Javascript


 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.
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.

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.

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":
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:
Example
document.getElementById("demo").style.fontSize = "35px";

JavaScript Can Hide HTML Elements
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:
Example
document.getElementById("demo").style.display = "block";

JavaScript Where To
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>

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:
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>

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>

JavaScript Statements
--  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
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