Keywords, Datatypes, Variables and Operators
Keywords:
Below are the reserved keywords in the JavaScript which can not be used as ‘variable’ and ‘function’ names etc.
| Keywords | |||
|---|---|---|---|
| abstract | boolean | break | byte |
| case | catch | char | class |
| const | continue | debugger | default |
| delete | do | double | else |
| enum | export | extends | false |
| final | float | for | function |
| goto | if | implements | import |
| in | int | interface | long |
| native | new | null | package |
| private | protected | public | return |
| short | static | super | switch |
| this | throw | throws | transient |
| true | try | typeof | var |
| void | volatile | while | with |
Datatypes:
JavaScript has three types of data.
- Numbers: E.g. 123, 32.32, 0.00025
- Strings: E.g. “Meher”, “Krishna Patel”, “123”
- Boolean: E.g. true, false
Note: All the numbers are considered as ‘floating point’.
Variables:
Variables can be define using keyword ‘var’. Further, JavaScript is untyped language i.e. a variable can hold any type of value.
In the below HTML, ‘p’ tag with id ‘p_name’ is defined at Line 10. This id will be used to write some text using JavaScript,.
1 <!-- js.html -->
2
3 <!DOCTYPE html>
4 <html>
5 <head>
6 <title>JavaScript</title>
7 </head>
8 <body>
9
10 <p id='p_name'></p>
11
12 <!-- import JavaScript files here -->
13 <script src="asset/js/my_javascript.js"></script>
14
15 </body>
16 </html>
Two variables are defined at Lines 9-10 of type ‘string’ and ‘float’ respectively. Then ‘getElementById’ is used to locate the tag with id ‘p_name’ and the text is inserted as shown in Line 11. Lastly, the ‘+’ sign is used to concatenate the values as Line 11.
1 // asset/js/my_javascript
2
3
4 // print message on the webpage
5 document.write("Hello World from JavaScript!<br>");
6
7
8 // variable example
9 var your_name = "James";
10 var age = 20;
11 document.getElementById("p_name").innerHTML= "Hello "+ your_name + "<br>Age : " + age;
Code output:
Hello James
Age : 20
Hello World from JavaScript!
Warning: If we import the ‘JavaScript’ file between the ‘ending-head-tag’ and ‘start-body-tag’, then Message ‘Hello Meher . . . ’ will not be displayed as ‘JavaScript’ will execute before the loading of the page; and JavaScript can not find the id ‘p_name’.
Note: All the JavaScript/HTML codes will be added below the existing codes, therefore only the newly added code will be shown in the rest of the tutorial.
‘prompt’ can be used to read the values from the user
1 // prompt
2
3
4 var x = prompt("enter a number");
5 document.write("2 * ", x, " = ", 2*x + "<br>");
A pop-up window will appear due to prompt. If we provide the input value as 3, then below output will be generated.
Code output:
3 * 3 = 6
Note: The ‘,’ and ‘+’ can be used to combine various outputs as shown in above example
Operators:
Various operators are shown in this section.
1. Arithmetic operators:
- +
- -
- *
- /
- % : modulus i.e remainder of the division
- ++ (increment)
- – (decrement)
2. Assignment operators
- =
- +=
- -=
- *
- /=
- %=
3. Comparison operators
- == (compare only values not type)
- === (compare both values and type)
- !=
- >
- <
- >=
- <=
4. Conditional operator
- ?:
Example: ‘( (a > b) ? a/b : b/a) )’ i.e if ‘a>b’ then do ‘a/b’ else do ‘b/a’
5. Logical operators
- && (logical and)
- || (logical or)
- ! (logical not)
6. Bitwise operators
- & (and)
- | (or)
- ^ (xor)
- ~ (not)
String to number conversion
‘Number’ is used to convert the string into numbers.
1 // string to number conversion
2
3 document.write("2 + Number('3.4') = ", 2 + Number('3.4'), "<br>");
Below is the output of above code.
Code output:
2 + Number('3.4') = 5.4
Convert to integer
A string or float value can be converted into integer using ‘parseInt’.
1 // int conversion
2
3 document.write("2 + parseInt('3.4') = ", 2 + parseInt('3.4'), "<br>");// string to int
4
5 document.write("2 + parseInt(3.4) = ", 2 + parseInt(3.4), "<br>"); // float to int
Below is the output of above code.
Code output:
2 + parseInt('3.4') = 5
2 + parseInt(3.4) = 5
Convert to float
The ‘parseFloat’ or ‘Number’ can be used to convert the value into float values.
1 document.write("2 + parseFloat('3.4') = ", 2 + parseFloat("3.4"), "<br>"); // parseFloat
Math
Math’ library contains various useful function as shown below.
1 // math
2 document.write("pi = ", Math.PI, "<br>");
3 document.write("e = ", Math.E, "<br>");
4 document.write("similarly we can use 'abs', 'floor', 'ceil' and 'round' etc. <br>");
5 document.write("random number : ", Math.ceil(Math.random()*20), "<br>"); // enter random number
Below is the output of above code.
Code output:
pi = 3.141592653589793
e = 2.718281828459045
similarly we can use 'abs', 'floor', 'ceil' and 'round' etc.
random number : 16
String
Below are the some of the useful ‘string-styles’.
1 // string
2 document.write("olusola".toUpperCase(), "<br>") // uppercase
3 w = "Olusola"
4 document.write(w.toLowerCase(), "<br>") // lowercase
5 document.write(w.small(), "<br>") // small
6 document.write(w.bold(), "<br>") // bold
7 document.write(w.strike(), "<br>") // strike
8 document.write(w.fontsize("5em"), "<br>") // strike
9 document.write(w.link("http://folklight.ng"), "<br>") // link
10 document.write(w.fontcolor("red").fontsize("12em"), "<br>") // multiple
The image below shows the output of above code.
Code output:
Arrays
In JavaScript, the arrays can store different types of values as shown in below code.
1 // arrays
2 arr = [15, 30, "Olusola"]
3 for(a in arr) document.write(arr[a], " ");
4 document.write("<br>");
5 document.write(arr.pop(), "<br>"); // remove last element
6 arr.push("Emeka"); // add element to end
7 document.write(arr.pop(), "<br>");
8 document.write("lenght of array: ", arr.length, "<br>");
Code output:
15 30 Olusola
Olusola
Emeka
lenght of array: 2