What is java script
► JavaScript is the world's most popular programming language.
► JavaScript is the programming language of the Web.
► JavaScript is easy to learn.
► In web designing, JavaScript is mainly used for field validation
► JavaScript and Java are completely different languages, both in concept and
design.
► JavaScript was invented by Brendan Eich in 1995, and became an ECMA
standard in 1997.
► ECMA-262 is the official name of the standard. ECMAScript is the official name
of the language.
JavaScript
Day 1
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
► HTML to define the content of web pages
► CSS to specify the layout of web pages
► JavaScript to program the behavior of web pages
JavaScript Versions
► JavaScript was invented by Brendan Eich in 1995, and became an ECMA
standard in 1997.
► ECMAScript is the official name of the language.
► From 2015 ECMAScript is named by year (ECMAScript 2015).
JavaScript / ECMAScript
JavaScript was developed for Netscape. Netscape 2 was the first browser to
run JavaScript.
After Netscape the Mozilla foundation continued to develop JavaScript for the
Firefox browser.
The latest JavaScript version was 1.8.5. (Identical to ECMAScript 5).
ECMAScript was developed by ECMA International after the organization
adopted JavaScript.
The first edition of ECMAScript was released in 1997.
Year JavaScript ECMA Browser
1996 1.0 Netscape 2
1997 ECMAScript 1 IE 4
1998 1.3 Netscape 4
1999 ECMAScript 2 IE 5
2000 ECMAScript 3 IE 5.5
2000 1.5 Netscape 6
2000 1.5 Firefox 1
2011 ECMAScript 5 IE 9 (Except "use strict")
2011 1.8.5 Firefox 4 (Except leading zeroes in parseInt)
2012 IE 10
2012 Chrome 23
2012 Safari 6
2013 Firefox 21
2013 Opera 15
2015 ECMAScript 2015 Partially Supported in all Browser
What is ECMAScript 5?
ECMAScript 5 is also known as ES5 and ECMAScript 2009
This chapter introduces some of the most important features of ES5.
ECMAScript 5 Features
These were the new features released in 2009:
⮚ "use strict"
⮚ String.trim()
⮚ Array.isArray()
⮚ Array.forEach()
⮚ Array.map()
⮚ Array.filter()
⮚ Array.reduce()
⮚ Array.reduceRight()
⮚ Array.every()
⮚ Array.some()
⮚ Array.indexOf()
⮚ Array.lastIndexOf()
⮚ JSON.parse()
⮚ JSON.stringify()
⮚ Date.now()
⮚ Property Getters and Setters
⮚ New Object Property Methods
Commonly Asked Questions
How do I get JavaScript?
Where can I download JavaScript?
Is JavaScript Free?
You don't have to get or download JavaScript.
JavaScript is already running in your browser on your computer, on your
tablet, and on your smart-phone.
JavaScript is free to use for everyone.
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and
changes the element content (innerHTML) to "Hello JavaScript":
HINT:
use “ (or) ‘ for
text
script can accept
both
Example 1(change html content)
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
Example 2(show date)
DOCTYPE html>
<html>
<body>
<h2>M<!y First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Example 3(turn on/off by button
event)
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an
image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn
on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn
off the light</button>
</body>
</html>
Example 4(change css text style)
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!
</button>
</body>
</html>
Example 5 (hide data)
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button"
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>
</body>
</html>
Example 6(show hidden elements)
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button"
onclick="document.getElementById('demo').style.display='block'">Click
Me!</button>
</body>
</html>
Example 7(change head by java script)
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Example 8(change body content)
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<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>
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
Example 9(external file)
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Example 10(external file from
folder)
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
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().
Using innerHTML
(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>
Using 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 window.alert()
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()
Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Print
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the browser to print
the content of the current window.
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
JavaScript Statements
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a
computer.</p>
<p id="demo"></p>
<script>
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script>
</body>
</html>
JavaScript Programs
► A computer program is a list of "instructions" to be "executed" by a computer.
► In a programming language, these programming instructions are called statements.
► A JavaScript program is a list of programming statements.
JavaScript Statements
► JavaScript statements are composed of:
► Values, Operators, Expressions, Keywords, and Comments.
Semicolons ;
► Semicolons separate JavaScript statements.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
JavaScript White Space
JavaScript ignores multiple spaces. You can add white
space to your script to make it more readable.
The following lines are equivalent:
var person = "Hege";
var person="Hege";
JavaScript Line Length and Line Breaks
For best readability, programmers often like to avoid code lines longer than 80 characters.
If a JavaScript statement does not fit on one line, the best place to break it is after an operator:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML ="Hello Dolly!";
</script>
</body>
</html>
JavaScript Code Blocks
JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.
The purpose of code blocks is to define statements to be executed together.
One place you will find statements grouped together in blocks, is in JavaScript functions:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript code blocks are written between { and }</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
JavaScript Keywords
JavaScript statements often start with a keyword to identify the JavaScript action to be performed.
Visit our Reserved Words reference to view a full list of JavaScript keywords.
Here is a list of some of the keywords you will learn about in this tutorial:
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 Syntax
JavaScript syntax is the set of rules, how JavaScript programs are
constructed:
var x, y, z; // Declare Variables
x = 5; y = 6; // Assign Values
z = x + y; // Compute Values
JavaScript Values
The JavaScript syntax defines two types of values:
► Fixed values-------Fixed values are called Literals.
The two most important syntax rules for fixed values are:
1. Numbers are written with or without decimals:
2. Strings are text, written within double or single quotes:
► Variable values-------Variable values are called Variables.
1. In a programming language, variables are used to store data values.
2. JavaScript uses the var keyword to declare variables.
3. An equal sign is used to assign values to variables.
4. In this example, x is defined as a variable. Then, x is assigned (given) the
value 6:
JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values:
JavaScript uses an assignment operator ( = ) to assign values to variables:
JavaScript Expressions
An expression is a combination of values, variables, and operators, which
computes to a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:
JavaScript comments
Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as a comment.
JavaScript Identifiers
Identifiers are names.
In JavaScript, identifiers are used to name variables (and keywords, and
functions, and labels).
The rules for legal names are much the same in most programming
languages.
In JavaScript, the first character must be a letter, or an underscore (_), or
a dollar sign ($).
Subsequent characters may be letters, digits, underscores, or dollar
signs.
JavaScript is Case Sensitive
All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript is Case Sensitive</h2>
<p>Try change lastName to lastname.</p>
<p id="demo"></p>
<script>
var lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
document.getElementById("demo").innerHTML = lastName;
</script>
</body>
</html>
JavaScript and Camel Case
Historically, programmers have used different ways of joining multiple words into one
variable name:
Hyphens: first-name, last-name, master-card, inter-city.
Underscore: first_name, last_name, master_card, inter_city.
Upper Camel Case (Pascal Case): FirstName, LastName, MasterCard, InterCity.
Lower Camel Case: JavaScript programmers tend to use camel case that starts
with a lowercase letter: firstName, lastName, masterCard, interCity.
JavaScript Character Set
JavaScript uses the Unicode character set.
Unicode covers (almost) all the characters, punctuations, and symbols in the world.
