JavaScript
- Programming language of HTML and the web
- Easy to learn
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages.
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Example
document.getElementById('demo').innerHTML = 'Hello JavaScript';
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute:
JavaScript Display Possibilities.
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().
External JavaScript Advantages
It separates HTML and code.
It makes HTML and JavaScript easier to read and maintain.
Cached JavaScript files can speed up page loads.
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().
External JavaScript Advantages
It separates HTML and code.
It makes HTML and JavaScript easier to read and maintain.
Cached JavaScript files can speed up page loads.
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Example
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
External scripts cannot contain <script> tags.
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
External scripts cannot contain <script> tags.
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript":document.getElementById('demo').innerHTML = 'Hello JavaScript';
Changing the style of an HTML element, is a variant of changing an HTML attribute:
Example
<!DOCTYPE html>
<html>
<body>
<p id="shanu"></p>
<script>
function Circlearea (r){
return 3.14*(r*r);
}
document.getElementById("shanu").innerHTML = Circlearea(7);
</script>
</body>
</html>
document.getElementById("demo").style.fontSize = "35px";
JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style:
Hiding HTML elements can be done by changing the display style:
Example
document.getElementById("demo").style.display = "none";
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:
document.getElementById("demo").style.display = "none";
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:
Example
document.getElementById("demo").style.display = "block";
document.getElementById("demo").style.display = "block";
JavaScript Where To
The <script> Tag
In HTML, JavaScript code must be inserted between <script> and </script> tags.
The <script> Tag
In HTML, JavaScript code must be inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
JavaScript Functions and Events
JavaScript in <head> or <body>
Scripts can be placed in the <body>, or in the <head> section of an HTML page
JavaScript in <head>
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
JavaScript in <head> or <body>
Scripts can be placed in the <body>, or in the <head> section of an HTML page
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript in <body>
Example
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Using document.write() after an HTML document is fully loaded, will delete all existing HTML:
Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
JavaScript Statements
-- Values
Example
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Changing the innerHTML property of an HTML element is a common way to display data in HTML.
Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Using document.write() after an HTML document is fully loaded, will delete all existing HTML:
Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Using console.log()
For debugging purposes, you can use the console.log() method to display data.
You will learn more about debugging in a later chapter.
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
For debugging purposes, you can use the console.log() method to display data.
You will learn more about debugging in a later chapter.
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
-- Values
-- Operators
-- Expressions
-- Keywords
-- Comments.
JavaScript Keywords
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
|
JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.
JavaScript Arithmetic Operators
JavaScript Arithmetic Operators
Arithmetic operators perform arithmetic on numbers (literals or variables).
Operator
|
Description
|
+
|
Addition
|
-
|
Subtraction
|
*
|
Multiplication
|
/
|
Division
|
%
|
Modulus
|
++
|
Increment
|
--
|
Decrement
|
Example 1:
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
My name is:
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Shanu'">
Click me </button>
<p id="demo"></p>
<button type="checkbox" onclick ="document.getElementById('dem').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="dem"></p>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<body>
<p id="shanu"></p>
<script>
var uki= {
name: "shanu",
stuid: "stu05",
address: "jaffna",
mailid: "jshanuja@gmail.com"
};
document.getElementById("shanu").innerHTML = "My name is " + uki.name + "<br>" + " " + uki.stuid +"<br>" + " " + uki.address + "<br>"+ " " + uki.mai0lid;
</script>
</body>
</html>
Example 3:<!DOCTYPE html>
<html>
<body>
<p id="shanu"></p>
<script>
function Circlearea (r){
return 3.14*(r*r);
}
document.getElementById("shanu").innerHTML = Circlearea(7);
</script>
</body>
</html>
Comments
Post a Comment