javascript Flashcards
Manipulating HTML Elements
My First Paragraph
<script> <br/> document.getElementById("demo").innerHTML="My First JavaScript";<br/> </script>
Writing to The Document Output
<script> <br/> document.write("<p>My First JavaScript</p>");<br/> </script>
Warning
<script>
<br/> function myFunction()<br/> {<br/> document.write("Oops! The document disappeared!");<br/> }<br/>
</script>JavaScript Code JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will manipulate two HTML elements:
document. getElementById(“demo”).innerHTML=”Hello Dolly”;
document. getElementById(“myDIV”).innerHTML=”How are you?”;
JavaScript functions.
function myFunction()
{
document.getElementById("demo").innerHTML="Hello Dolly";
document.getElementById("myDIV").innerHTML="How are you?";
}Break up a Code Line
JavaScript Variables
avaScript variables are “containers” for storing information:
Example
var x=5; var y=6; var z=x+y;
JavaScript Variables
As with algebra, JavaScript variables can be used to hold values (x=5) or expressions (z=x+y).
Variable can have short names (like x and y) or more descriptive names (age, sum, totalvolume).
Variable names must begin with a letter
Variable names can also begin with $ and _ (but we will not use it)
Variable names are case sensitive (y and Y are different variables)
JavaScript Data Types
JavaScript variables can also hold other types of data, like text values (name=”John Doe”).
In JavaScript a text like “John Doe” is called a string.
There are many types of JavaScript variables, but for now, just think of numbers and strings.
When you assign a text value to a variable, put double or single quotes around the value.
When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.
Example
var pi=3.14; var name="John Doe"; var answer='Yes I am!';
One Statement, Many Variables
You can declare many variables in one statement. Just start the statement with var and separate the variables by comma:
var name="Doe", age=30, job="carpenter"; Your declaration can also span multiple lines:
var name="Doe", age=30, job="carpenter";
JavaScript Has Dynamic Types
JavaScript has dynamic types. This means that the same variable can be used as different types:
Example
var x // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String
JavaScript Numbers
JavaScript has only one type of numbers. Numbers can be written with, or without decimals:
Example
var x1=34.00; //Written with decimals var x2=34; //Written without decimals
JavaScript Booleans
Booleans can only have two values: true or false.
var x=true var y=false
JavaScript Arrays
var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";
JavaScript Objects
An object is delimited by curly braces. Inside the braces the object’s properties are defined as name and value pairs (name : value). The properties are separated by commas:
var person={firstname:"John", lastname:"Doe", id:5566};
The object (person) in the example above has 3 properties: firstname, lastname, and id.
Spaces and line breaks are not important. Your declaration can span multiple lines:
var person={
firstname : “John”,
lastname : “Doe”,
id : 5566
};
You can address the object properties in two ways:
Example
name=person.lastname;
name=person[“lastname”];
JavaScript Objects
Properties and Methods
Properties are values associated with an object.
Methods are actions that can be performed on objects.
Objects in JavaScript:
In JavaScript, objects are data (variables), with properties and methods.
When you declare a JavaScript variable like this:
var txt = "Hello"; You actually create a JavaScript String object. The String object has a built-in property called length. For the string above, length has the value 5. The String object also have several built-in methods.
Properties:
txt.length=5
“Hello”
Methods:
txt.indexOf()
txt. replace()
txt. search()
In object oriented languages, properties and methods are often called object members.
You will learn more about properties and the methods of the String object in a later chapter of this tutorial.
Creating JavaScript Objects
Almost “everything” in JavaScript is an object. Strings, Dates, Arrays, Functions.
You can also create your own objects.
This example creates an object called “person”, and adds four properties to it:
Example
person=new Object();
person. firstname=”John”;
person. lastname=”Doe”;
person. age=50;
person. eyecolor=”blue”;
Accessing Object Properties
The syntax for accessing the property of an object is:
objectName.propertyName
This example uses the length property of the String object to find the length of a string:
var message="Hello World!"; var x=message.length; The value of x, after execution of the code above will be:
12
Accessing Object Methods
You can call a method with the following syntax:
objectName.methodName()
This example uses the toUpperCase() method of the String object, to convert a text to uppercase:
var message="Hello world!"; var x=message.toUpperCase(); The value of x, after execution of the code above will be:
HELLO WORLD!
JavaScript Functions
A function is a block of code that will be executed when “someone” calls it:
Example
<script>
<br/> function myFunction()<br/> {<br/> alert("Hello World!");<br/> }<br/>
</script>
<button>Try it</button>
JavaScript Function Syntax
A function is written as a code block (inside curly { } braces), preceded by the function keyword:
function functionname()
{
some code to be executed
}
The code inside the function will be executed when "someone" calls the function.
The function can be called directly when an event occurs (like when a user clicks a button), and it can be called from “anywhere” by JavaScript code.
JavaScript is case sensitive. The function keyword must be written in lowercase letters, and the function must be called with the same capitals as used in the function name.
Calling a Function with Arguments
When you call a function, you can pass along some values to it, these values are called arguments or parameters.
These arguments can be used inside the function.
You can send as many arguments as you like, separated by commas (,)
myFunction(argument1,argument2)
Declare the argument, as variables, when you declare the function:
function myFunction(var1,var2)
{
some code
}
The variables and the arguments must be in the expected order. The first variable is given the value of the first passed argument etc.
Example
<button>Try it</button>
<script>
<br/> function myFunction(name,job)<br/> {<br/> alert("Welcome " + name + ", the " + job);<br/> }<br/>
</script>
