JavaScript
1 2 3 4 5 6 |
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button> <p id="demo"></p> |
JavaScript can change HTML content
JavaScript can change HTML content.
1 2 3 4 5 6 |
<p id="demo2">JavaScript can change HTML content.</p> <button type="button" onclick="document.getElementById('demo2').innerHTML = 'Hello JavaScript!'"> Click Me!</button> |
JavaScript Can Change Images
Click the light bulb to turn on/off the light.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<p>Click the light bulb to turn on/off the light.</p> <img id="myImage" onclick="changeImage()" src="http://www.w3schools.com/js/pic_bulboff.gif" width="60" height="80"> <script> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { image.src = "http://www.w3schools.com/js/pic_bulboff.gif"; } else { image.src = "http://www.w3schools.com/js/pic_bulbon.gif"; } } </script> |
JavaScript can change the style of an HTML element
JavaScript can change the style of an HTML element.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p id="demo3">JavaScript can change the style of an HTML element.</p> <script> function myFunction() { var x = document.getElementById("demo3"); x.style.fontSize = "25px"; x.style.color = "red"; } </script> <button type="button" onclick="myFunction()">Click Me!</button> |
JavaScript Can Validate Input
Please input a number between 1 and 10:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div> <h1>JavaScript Can Validate Input</h1> <p>Please input a number between 1 and 10:</p> <input id="numb" type="number"> <button type="button" onclick="myFunction()">Submit</button> <p id="demo4"></p> <script> function myFunction() { var x, text; // Get the value of the input field with id="numb" x = document.getElementById("numb").value; // If x is Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo4").innerHTML = text; } </script> </div> |
Web Page
“document.write(5 + 6)”
1 2 3 4 5 |
<h1>5 + 6</h1> <button onclick="document.write(5 + 6)">Try it</button> |
5 + 6
1 2 3 4 5 6 |
<p id="demo5"></p> <script> document.getElementById("demo5").innerHTML = 5 + 6; </script> |
JavaScript Statements
Statements are separated by semicolons.
The variables x, y, and z are assigned the values 5, 6, and 11:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p id="demo6"></p> <p>Statements are separated by semicolons.</p> <p>The variables x, y, and z are assigned the values 5, 6, and 11:</p> <script> var x = 5; var y = 6; var z = x + y; document.getElementById("demo6").innerHTML = z; </script> |
JavaScript Numbers
Number can be written with or without decimals.
1 2 3 4 5 6 7 8 |
<p>Number can be written with or without decimals.</p> <p id="demo7"></p> <script> document.getElementById("demo7").innerHTML = 10.50; </script> |
JavaScript Strings
Strings can be written with double or single quotes.
1 2 3 4 5 6 7 8 |
<p>Strings can be written with double or single quotes.</p> <p id="demo8"></p> <script> document.getElementById("demo8").innerHTML = 'John Doe'; </script> |
JavaScript Variables
In this example, x is defined as a variable.
Then, x is assigned the value of 6:
1 2 3 4 5 6 7 8 9 10 11 |
<p>In this example, x is defined as a variable. Then, x is assigned the value of 6:</p> <p id="demo9"></p> <script> var x; x = 6; document.getElementById("demo9").innerHTML = x; </script> |
Assigning Values
In JavaScript the = operator is used to assign values to variables.
1 2 3 4 5 6 7 8 9 10 |
<p>In JavaScript the = operator is used to assign values to variables.</p> <p id="demo10"></p> <script> var x = 5; var y = 6; document.getElementById("demo10").innerHTML = x + y; </script> |
JavaScript Operators
JavaScript uses arithmetic operators to compute values (just like algebra).
1 2 3 4 5 6 7 8 |
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p> <p id="demo11"></p> <script> document.getElementById("demo11").innerHTML = (5 + 6) * 10; </script> |
JavaScript Expressions
Expressions compute to values.
1 2 3 4 5 6 7 8 |
<p>Expressions compute to values.</p> <p id="demo12"></p> <script> document.getElementById("demo12").innerHTML = 5 * 10; </script> |
JavaScript Expressions
Expressions compute to values.
1 2 3 4 5 6 7 8 9 |
<p>Expressions compute to values.</p> <p id="demo13"></p> <script> var x = 5; document.getElementById("demo13").innerHTML = x * 10; </script> |
JavaScript Expressions
Expressions compute to values.
1 2 3 4 5 6 7 8 9 10 |
<h1>JavaScript Expressions</h1> <p>Expressions compute to values.</p> <p id="demo14"></p> <script> document.getElementById("demo14").innerHTML = "John" + " " + "Doe"; </script> |
The var Keyword Creates a Variable
1 2 3 4 5 6 7 8 9 10 |
<h1>The var Keyword Creates a Variable</h1> <p id="demo15"></p> <script> var x = 5 + 6; var y = x * 10; document.getElementById("demo15").innerHTML = y; </script> |
Comments are NOT Executed
1 2 3 4 5 6 7 8 9 10 |
<h1>Comments are NOT Executed</h1> <p id="demo16"></p> <script> var x = 5; // var x = 6; I will not be executed document.getElementById("demo16").innerHTML = x; </script> |
JavaScript is Case Sensitive
Try change lastName to lastname.
1 2 3 4 5 6 7 8 9 10 |
<p>Try change lastName to lastname.</p> <p id="demo17"></p> <script> var lastName = "Doe"; var lastname = "Peterson"; document.getElementById("demo17").innerHTML = lastName; </script> |
In HTML, JavaScript statements are “commands” to the browser.
1 2 3 4 5 6 7 8 |
<p>In HTML, JavaScript statements are "commands" to the browser.</p> <p id="demo18"></p> <script> document.getElementById("demo18").innerHTML = "Hello Dolly."; </script> |
JavaScript code (or just JavaScript) is a list of JavaScript statements.
1 2 3 4 5 6 7 8 9 10 11 |
<p>JavaScript code (or just JavaScript) is a list of JavaScript statements.</p> <p id="demo19"></p> <script> var x = 5; var y = 6; var z = x + y; document.getElementById("demo19").innerHTML = z; </script> |
JavaScript statements are separated by semicolon.
1 2 3 4 5 6 7 8 9 10 11 |
<p>JavaScript statements are separated by semicolon.</p> <p id="demo20"></p> <script> a = 1; b = 2; c = a + b; document.getElementById("demo20").innerHTML = c; </script> |
Multiple statements on one line is allowed.
1 2 3 4 5 6 7 8 9 |
<p>Multiple statements on one line is allowed.</p> <p id="demo21"></p> <script> a = 1; b = 2; c = a + b; document.getElementById("demo21").innerHTML = c; </script> |
My Web Page
The best place to break a code line is after an operator or a comma.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>My Web Page</h1> <p> The best place to break a code line is after an operator or a comma. </p> <p id="demo22"></p> <script> document.getElementById("demo22").innerHTML = "Hello Dolly."; </script> |
My Web Page
I am a paragraph.
When you click on “Try it”, the two elements will change.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<h1>My Web Page</h1> <p id="myPar">I am a paragraph.</p> <div id="myDiv">I am a div.</div> <p> <button type="button" onclick="myFunction3()">Try it</button> </p> <script> function myFunction3() { document.getElementById("myPar").innerHTML = "Hello Dolly."; document.getElementById("myDiv").innerHTML = "How are you?"; } </script> <p>When you click on "Try it", the two elements will change.</p> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<h1>JavaScript Keywords</h1> JavaScript statements often start with a keyword to identify the JavaScript action to be performed. Keyword Description break Terminates a switch or a loop continue Jumps out of a loop and starts at the top debugger Stops the execution of JavaScript, and calls (if available) the debugging function do ... while Executes a block of statements, and repeats the block, while a condition is true for Marks a block of statements to be executed, as long as a condition is true function Declares a function if ... else Marks a block of statements to be executed, depending on a condition return Exits a function switch Marks a block of statements to be executed, depending on different cases try ... catch Implements error handling to a block of statements var Declares a variable |
Note: The comments are not executed.
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1 id="myH"></h1> <p id="myP"></p> <script> // Change heading: document.getElementById("myH").innerHTML = "My First Page"; // Change paragraph: document.getElementById("myP").innerHTML = "My first paragraph."; </script> <p><strong>Note:</strong> The comments are not executed.</p> |
Note: The comments are not executed.
1 2 3 4 5 6 7 8 9 10 11 |
<p id="demo23"></p> <script> var x = 5; // Declare x, give it the value of 5 var y = x + 2; // Declare y, give it the value of x + 2 document.getElementById("demo23").innerHTML = y; // Write y to demo </script> <p><strong>Note:</strong> The comments are not executed.</p> |
Note: The comment block is not executed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h1 id="myH2"></h1> <p id="myP2"></p> <script> /* The code below will change the heading with id = "myH" and the paragraph with id = "myp" in my web page: */ document.getElementById("myH2").innerHTML = "My First Page"; document.getElementById("myP2").innerHTML = "My first paragraph."; </script> <p><strong>Note:</strong> The comment block is not executed.</p> |
Note: The comment is not executed.
1 2 3 4 5 6 7 8 9 10 11 |
<h1 id="myH3"></h1> <p id="myP3"></p> <script> //document.getElementById("myH3").innerHTML = "My First Page"; document.getElementById("myP3").innerHTML = "My first paragraph."; </script> <p><strong>Note:</strong> The comment is not executed.</p> |
Note: The comment-block is not executed.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1 id="myH4"></h1> <p id="myP4"></p> <script> /* document.getElementById("myH4").innerHTML = "Welcome to my Homepage"; document.getElementById("myP4").innerHTML = "This is my first paragraph."; */ </script> <p><strong>Note:</strong> The comment-block is not executed.</p> |
JavaScript Variables
In this example, x, y, and z are variables
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>JavaScript Variables</h1> <p>In this example, x, y, and z are variables</p> <p id="demo24"></p> <script> var x = 5; var y = 6; var z = x + y; document.getElementById("demo24").innerHTML = z; </script> |
JavaScript Variables
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<h1>JavaScript Variables</h1> <p>In this example, price1, price2, and total are variables</p> <p id="demo25"></p> <script> var price1 = 5; var price2 = 6; var total = price1 + price2; document.getElementById("demo25").innerHTML = "The total is: " + total; </script> |
JavaScript Variables
Strings are written with quotes.
Numbers are written without quotes.
Try to experiment with the // comments.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<h1>JavaScript Variables</h1> <p>Strings are written with quotes.</p> <p>Numbers are written without quotes.</p> <p>Try to experiment with the // comments.</p> <p id="demo26a"></p> <p id="demo26b"></p> <p id="demo26c"></p> <script> var pi = 3.14; var person = "John Doe"; var answer = 'Yes I am!'; document.getElementById("demo26a").innerHTML = pi; document.getElementById("demo26b").innerHTML = person; document.getElementById("demo26c").innerHTML = answer; </script> |
JavaScript Variables
Create a variable, assign a value to it, and display it:
1 2 3 4 5 6 7 8 9 10 11 |
<h1>JavaScript Variables</h1> <p>Create a variable, assign a value to it, and display it:</p> <p id="demo27"></p> <script> var carName = "Volvo"; document.getElementById("demo27").innerHTML = carName; </script> |
JavaScript Variables
You can declare many variables in one statement.
1 2 3 4 5 6 7 8 9 10 11 |
<h1>JavaScript Variables</h1> <p>You can declare many variables in one statement.</p> <p id="demo28"></p> <script> var person = "John Doe", carName = "Volvo", price = 200; document.getElementById("demo28").innerHTML = carName; </script> |
JavaScript Variables
You can declare many variables in one statement.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>JavaScript Variables</h1> <p>You can declare many variables in one statement.</p> <p id="demo29"></p> <script> var person = "John Doe", carName = "Volvo", price = 200; document.getElementById("demo29").innerHTML = carName; </script> |
JavaScript Variables
A variable declared without a value will have the value undefined.
1 2 3 4 5 6 7 8 9 10 11 |
<h1>JavaScript Variables</h1> <p>A variable declared without a value will have the value undefined.</p> <p id="demo30"></p> <script> var carName2; document.getElementById("demo30").innerHTML = carName2; </script> |
JavaScript Variables
If you re-declare a JavaScript variable, it will not lose its value.
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>JavaScript Variables</h1> <p>If you re-declare a JavaScript variable, it will not lose its value.</p> <p id="demo31"></p> <script> var carName = "Volvo"; var carName; document.getElementById("demo31").innerHTML = carName; </script> |
JavaScript Variables
Add 5 + 2 + 3, and display the result:
1 2 3 4 5 6 7 8 9 10 11 |
<h1>JavaScript Variables</h1> <p>Add 5 + 2 + 3, and display the result:</p> <p id="demo32"></p> <script> var x = 5 + 2 + 3; document.getElementById("demo32").innerHTML = x; </script> |
JavaScript Variables
Add “John” + ” ” + “Doe”:
1 2 3 4 5 6 7 8 9 10 11 |
<h1>JavaScript Variables</h1> <p>Add "John" + " " + "Doe":</p> <p id="demo33"></p> <script> var x = "John" + " " + "Doe"; document.getElementById("demo33").innerHTML = x; </script> |
JavaScript Variables
Add “5” + 2 + 3. and display the result:
1 2 3 4 5 6 7 8 9 10 11 |
<h1>JavaScript Variables</h1> <p>Add "5" + 2 + 3. and display the result:</p> <p id="demo34"></p> <script> var x = "5" + 2 + 3; document.getElementById("demo34").innerHTML = x; </script> |
JavaScript Operators
x = 5, y = 2, calculate z = x + y, and display z:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>JavaScript Operators</h1> <p>x = 5, y = 2, calculate z = x + y, and display z:</p> <p id="demo35"></p> <script> var x = 5; var y = 2; var z = x + y; document.getElementById("demo35").innerHTML = z; </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
JavaScript Arithmetic Operators Arithmetic operators are used to perform arithmetic on numbers (literals or variables). Operator Description + Addition - Subtraction * Multiplication / Division % Modulus ++ Increment -- Decrement JavaScript Assignment Operators Assignment operators assign values to JavaScript variables. Operator Example Same As = x = y x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y The assignment operator (=) assigns a value to a variable. |
The += Operator
1 2 3 4 5 6 7 8 9 10 |
<h1>The += Operator</h1> <p id="demo36"></p> <script> var x = 10; x += 5; document.getElementById("demo36").innerHTML = x; </script> |
JavaScript Operators
The + operator concatenates (adds) strings.
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>JavaScript Operators</h1> <p>The + operator concatenates (adds) strings.</p> <p id="demo37"></p> <script> var txt1 = "John"; var txt2 = "Doe"; document.getElementById("demo37").innerHTML = txt1 + " " + txt2; </script> |
JavaScript Operators
The assignment operator += can concatenate strings.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>JavaScript Operators</h1> <p>The assignment operator += can concatenate strings.</p> <p id="demo38"></p> <script> txt1 = "What a very "; txt1 += "nice day"; document.getElementById("demo38").innerHTML = txt1; </script> |
JavaScript Operators
Adding a number and a string, returns a string.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<h1>JavaScript Operators</h1> <p>Adding a number and a string, returns a string.</p> <p id="demo39"></p> <script> var x = 5 + 5; var y = "5" + 5; var z = "Hello" + 5; document.getElementById("demo39").innerHTML = x + "<br>" + y + "<br>" + z; </script> |
1 2 3 4 5 6 7 8 9 10 11 12 |
JavaScript Comparison and Logical Operators Operator Description == equal to === equal value and equal type != not equal !== not equal value or not equal type > greater than < less than >= greater than or equal to <= less than or equal to |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
JavaScript Arithmetic Operators Arithmetic operators perform arithmetic on numbers (literals or variables). Operator Description + Addition - Subtraction * Multiplication / Division % Modulus ++ Increment -- Decrement |
A typical arithmetic operation takes two numbers and produces a new number.
1 2 3 4 5 6 7 8 9 10 |
<p>A typical arithmetic operation takes two numbers and produces a new number.</p> <p id="demo40"></p> <script> var x = 100 + 50; document.getElementById("demo40").innerHTML = x; </script> |
A typical arithmetic operation takes two numbers (or variables) and produces a new number.
1 2 3 4 5 6 7 8 9 10 11 |
<p>A typical arithmetic operation takes two numbers (or variables) and produces a new number.</p> <p id="demo41"></p> <script> var a = 100; var b = 50; var x = a + b; document.getElementById("demo41").innerHTML = x; </script> |
A typical arithmetic operation takes two numbers (or expressions) and produces a new number.
1 2 3 4 5 6 7 8 9 10 11 |
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p> <p id="demo42"></p> <script> var a = 3; var x = (100 + 50) * a; document.getElementById("demo42").innerHTML = x; </script> |
The % Operator
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>The % Operator</h1> <p id="demo43"></p> <script> var x = 5; var y = 2; var z = x % y; document.getElementById("demo43").innerHTML = z; </script> |
The ++ Operator
The increment operator (++) increments numbers.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h1>The ++ Operator</h1> <p id="demo44"></p> <script> var x = 5; x++; var z = x; document.getElementById("demo44").innerHTML = z; </script> |
The — Operator
The decrement operator (–) decrements numbers.
1 2 3 4 5 6 7 8 9 10 11 |
<h1>The -- Operator</h1> <p id="demo45"></p> <script> var x = 5; x--; var z = x; document.getElementById("demo45").innerHTML = z; </script> |
Multiplication has precedence over addition.
1 2 3 4 5 6 7 8 9 |
<p>Multiplication has precedence over addition.</p> <p id="demo46"></p> <script> document.getElementById("demo46").innerHTML = 100 + 50 * 3; </script> |
When many operations has the same precedence, they are computed from left to right.
1 2 3 4 5 6 7 8 9 |
<p>When many operations has the same precedence, they are computed from left to right.</p> <p id="demo47"></p> <script> document.getElementById("demo47").innerHTML = 100 + 50 - 3; </script> |
JavaScript Operator Precedence Values
used in the rest of the expression.
Value | Operator | Description | Example |
---|---|---|---|
19 | ( ) | Expression grouping | (3 + 4) |
18 | . | Member | person.name |
18 | [] | Member | person[“name”] |
17 | () | Function call | myFunction() |
17 | new | Create | new Date() |
16 | ++ | Postfix Increment | i++ |
16 | — | Postfix Decrement | i– |
15 | ++ | Prefix Increment | ++i |
15 | — | Prefix Decrement | –i |
15 | ! | Logical not | !(x==y) |
15 | typeof | Type | typeof x |
14 | * | Multiplication | 10 * 5 |
14 | / | Division | 10 / 5 |
14 | % | Modulo division | 10 % 5 |
14 | ** | Exponentiation | 10 ** 2 |
13 | + | Addition | 10 + 5 |
13 | – | Subtraction | 10 – 5 |
12 | << | Shift left | x << 2 |
12 | >> | Shift right | x >> 2 |
11 | < | Less than | x < y |
11 | <= | Less than or equal | x <= y |
11 | > | Greater than | x > y |
11 | >= | Greater than or equal | x >= y |
10 | == | Equal | x == y |
10 | === | Strict equal | x === y |
10 | != | Unequal | x != y |
10 | !== | Strict unequal | x !== y |
6 | && | And | x && y |
5 | || | Or | x || y |
3 | = | Assignment | x = y |
3 | += | Assignment | x += y |
3 | -= | Assignment | x -= y |
3 | *= | Assignment | x *= y |
3 | /= | Assignment | x /= y |
1 2 3 4 5 6 7 8 9 10 11 12 |
JavaScript Assignment Operators Assignment operators assign values to JavaScript variables. Operator Example Same As = x = x = y += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y |
The += Operator
1 2 3 4 5 6 7 8 9 10 |
<h1>The += Operator</h1> <p id="demo48"></p> <script> var x = 10; x += 5; document.getElementById("demo48").innerHTML = x; </script> |
The -= Operator
1 2 3 4 5 6 7 8 9 10 |
<h1>The -= Operator</h1> <p id="demo49"></p> <script> var x = 10; x -= 5; document.getElementById("demo49").innerHTML = x; </script> |
The *= Operator
1 2 3 4 5 6 7 8 9 10 |
<h1>The -= Operator</h1> <p id="demo50"></p> <script> var x = 10; x -= 5; document.getElementById("demo50").innerHTML = x; </script> |
The /= Operator
1 2 3 4 5 6 7 8 9 10 |
<h1>The /= Operator</h1> <p id="demo51"></p> <script> var x = 10; x /= 5; document.getElementById("demo51").innerHTML = x; </script> |
The %= Operator
1 2 3 4 5 6 7 8 9 10 |
<h1>The %= Operator</h1> <p id="demo52"></p> <script> var x = 10; x %= 5; document.getElementById("demo52").innerHTML = x; </script> |
JavaScript Data Types
When adding a number and a string, JavaScript will treat the number as a string.
1 2 3 4 5 6 7 8 9 |
<p>When adding a number and a string, JavaScript will treat the number as a string.</p> <p id="demo53"></p> <script> var x = 16 + "Volvo"; document.getElementById("demo53").innerHTML = x; </script> |
When adding a number and a string, JavaScript will treat the number as a string.
1 2 3 4 5 6 7 8 9 |
<p>When adding a number and a string, JavaScript will treat the number as a string.</p> <p id="demo54"></p> <script> var x = "Volvo" + 16; document.getElementById("demo54").innerHTML = x; </script> |
1 2 3 4 5 6 7 |
<p id="demo55"></p> <script> var x = 16 + 4 + "Volvo"; document.getElementById("demo55").innerHTML = x; </script> |
1 2 3 4 5 6 7 |
<p id="demo56"></p> <script> var x = "Volvo" + 16 + 4; document.getElementById("demo56").innerHTML = x; </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<p id="demo57"></p> <script> var carName1 = "Volvo XC60"; var carName2 = 'Volvo XC80'; var answer1 = "It's alright"; var answer2 = "He is called 'Johnny'"; var answer3 = 'He is called "Mika"'; document.getElementById("demo57").innerHTML = carName1 + "<br>" + carName2 + "<br>" + answer1 + "<br>" + answer2 + "<br>" + answer3; </script> |
1 2 3 4 5 6 7 8 9 10 11 |
<p id="demo58"></p> <script> var x1 = 34.00; var x2 = 34; var y = 123e5; var z = 123e-5; document.getElementById("demo58").innerHTML = x1 + "<br>" + x2 + "<br>" + y + "<br>" + z </script> |
1 2 3 4 5 6 7 8 |
<p id="demo59"></p> <script> var cars = ["Saab","Volvo","BMW"]; document.getElementById("demo59").innerHTML = cars[2]; </script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p id="demo60"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo60").innerHTML = person.firstName + " is " + person.age + " years old."; </script> |
The typeof operator returns the type of a variable or an expression.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p>The typeof operator returns the type of a variable or an expression.</p> <p id="demo61"></p> <script> document.getElementById("demo61").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" + typeof false + "<br>" + typeof [1,2,3,4] + "<br>" + typeof {name:'john', age:34}; </script> |
Both the value, and the data type, of a variable with no value is undefined.
1 2 3 4 5 6 7 8 9 10 |
<p>Both the value, and the data type, of a variable with no value is <b>undefined</b>.</p> <p id="demo62"></p> <script> var person3; document.getElementById("demo62").innerHTML = person3 + "<br>" + typeof person3; </script> |
1 2 3 4 5 6 7 8 9 10 |
<p id="demo63"></p> <script> var car = "Auto"; document.getElementById("demo63").innerHTML = "The value is: " + car + "<br>" + "The type is:" + typeof car; </script> |
Objects can be emptied by setting the value to null.
1 2 3 4 5 6 7 8 9 10 |
<p>Objects can be emptied by setting the value to <b>null</b>.</p> <p id="demo64"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; var person = null; document.getElementById("demo64").innerHTML = typeof person; </script> |
Objects can be emptied by setting the value to undefined.
1 2 3 4 5 6 7 8 9 10 |
<p>Objects can be emptied by setting the value to <b>undefined</b>.</p> <p id="demo65"></p> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; var person = undefined; document.getElementById("demo65").innerHTML = typeof person; </script> |
1 2 3 4 5 6 7 8 9 10 |
<p id="demo66"></p> <script> document.getElementById("demo66").innerHTML = typeof undefined + "<br>" + typeof null + "<br>" + (null === undefined) + "<br>" + (null == undefined); </script> |
Thanks to: w3schools.com
Recent Comments