Introduction to JavaScript
Instructor : Dr Farzana Jabeen
Why JavaScript?
• HTML to define the
content of web pages
• CSS to specify the
layout of web pages
• JavaScript to program
the behavior of web
pages
• https://www.w3schools
.com/js/
JavaScript Can Change HTML Content
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML
content.</p>
<button type="button"
onclick="document.getElementById('demo').
innerHTML = 'Hello JavaScript!'">
Click Me!</button>
</body>
</html>
Find an HTML element by its id
JavaScript Can Change HTML Attributes
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100"
height="180">
<p>Click the light bulb to turn on/off the
light.</p>
<script>
function changeImage() {
var image =
document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
JavaScript Can Change HTML Styles (CSS)
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the
style of an HTML element.</p>
<script>
function myFunction() {
var x =
document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
<button type="button"
onclick="myFunction()">Click Me!</button>
JavaScript Can Validate Data
<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="demo"></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("demo").innerHTML = text;
}
</script>
More JavaScript!!
• Program code is left in a text format, and interpreted
“on the fly,” (as opposed to a compiled language, in
which the program is compiled into binary code).
• Client side JavaScript is interpreted by a JavaScript
aware browser.
• Syntax similar to C++ and Java
• Object oriented
• Dynamically typed (you don’t have to declare a
variable type such as integer, floating point, or text.
Type is determined by content and context). This is
called coercion.
• JavaScript is Case sensitive!
JavaScript != Java
• 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.
• ECMAScript 5 (JavaScript 1.8.5 - July 2010) is
the current standard.
How to use JavaScript
• Use the <SCRIPT> tag
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Where should you put the Script tag?
• Insert into your Web page
– Within <HEAD> tag
• Executed when encountered(on page load)
<html>
<head>
<script>alert(“Hello”);</script>
</head>
<body>
</body>
</html>
– Within <BODY> tag
• Executed when required(on call)
<html>
<head>
</head>
<body>
<script>alert(“Hello”);</script>
</body>
</html>
What about re-usability?
• Use external JavaScript(s)
<html>
<head>
<script src=“head.js"></script>
<script src=“main.js"></script>
</head>
<body> </body>
</html>
• Don’t put the script tag in the external file!
Points to Note!!
• JavaScript
– Script statements should be in contiguous lines, ending with
a carriage return or semicolon
– More than one statements on a single line must be
separated with semi-colons
– Best practice is to use one statement per line, and end line
with semi-colon
– No raw HTML within the Script tag or external JS
• External JavaScript
– need not be in the html page on which they will be
displayed
– By convention, external scripts have extensions .js
Javascript Comments
• Single line comments start with //
//this is a comment
• Multiple line comments start with /* and end
with */
/*This is a multiple line comment so you can
drone on and on and on as much as you care
to*/
Hiding Javascripts
• Some browsers don’t understand Javascript, and display the code.
• You can use HTML comments to hide Javascripts:
• <SCRIPT LANGUAGE=“Javascript”>
<!-- Hide your script
Script
script
script
//Stop hiding now -->
</SCRIPT>
• The noscript tag allows display for non-javascript aware browsers:
<NOSCRIPT>
You need javascript to read this page
</NOSCRIPT>
JavaScript Output
• No built-in function
• Use instead:
– window.alert(): write into an alert box
– document.write(): write into the HTML output
– innerHTML(): write into an HTML element
– console.log(): write into the browser console
Using window.alert()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Using document.write()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Using innerHTML
<!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 console.log()
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript is Case Sensitive
• All JavaScript identifiers are case sensitive.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript is Case Sensitive</h1>
<p>My Last name is:</p>
<p id="demo"></p>
<script>
var lastName = “S";
var lastname = “Satti";
document.getElementById("demo").innerHTML = lastName;
</script>
</body>
</html>
Javascript Variables
• All JavaScript variables must be identified with unique names.
• These unique names are called identifiers.
• Identifiers can be short names (like x and y), or more
descriptive names (age, sum, totalVolume).
• The general rules for constructing names for variables (unique
identifiers) are:
– Names can contain letters, digits, underscores, and dollar signs.
– Names must begin with a letter
– Names can also begin with $ and _ (but we will not use it in this
tutorial)
– Names are case sensitive (y and Y are different variables)
– Reserved words (like JavaScript keywords) cannot be used as names
Defining a JavaScript Variable
• var x = 5;
var y = 6;
var z = x + y;
• var carName;
• carName = “Volvo”;
• var person = "John Doe",
carName = "Volvo", price = 200;
Declaring JavaScript Variables
• Ways to Declare a JavaScript Variable
•Using var
•Using let
•Using nothing
•Using const
var x = 5;
var y = 6; let x = 5;
var z = x + y; let y = 6; x = 5;
let z = x
+ y;
y = 6;
z = x + y;
const price1 = 5;
const price2 = 6;
let total = price1 23
+ price2;
Re-Declaring JavaScript Variables
var carName = "Volvo"; var carName = "Volvo";
var carName; var carName = “Mehran”;
window.alert(carName); window.alert(carName);
What will be the output?
// How to create
variables:
let var x;
y;
// How to use
variables:
x = 5;
y = 6;
var
The letvs. let z =
keyword was introduced x+
in ES6 y;
(2015).
let
Synta
Variables defined with let
x • cannot be Redeclared.
• must be Declared before use.
• have Block Scope.
JavaScript Syntax
let x = "John Doe";
let x = 0;
// SyntaxError: 'x' has already been The let keyword was introduced in ES6
declared (2015).
{
let x = 2;
Variables defined with let
}
• cannot be Redeclared.
alert(x); //error: x can NOT be used
outside of the block
• must be Declared before use.
let x = 2; // Allowed
{ • have Block Scope.
let x = 3; // Allowed
}
{
let x = 4; // Allowed
} 3
6
Using var vs let
var x = "John Doe";
var x = 0; //OKAY var x = 2; // Allowed
let x = 3; // Not allowed var x = 10;
// Here x is 10
{ {
var x = 2; let x = 2; // Allowed {
} let x = 3; // Not allowed var x = 2;
// x CAN be used here } // Here x is 2
}
{
var x = 2; let x = 2; // Allowed // Here x is 2
// Now x is 2 var x = 3; // Not allowed
}
var x = 3;
// Now x is 3
27
Variables and Data Types
• JavaScript is a loosely typed language
– Data types are converted during execution as needed
– Data typing only matters during operations
• “6” + “67” = “667” String
• 6 + 67 = 73
Variables and Data Types
• Numbers
– Integer and floating-point numbers.
• Booleans
– True or false.
• Strings
– Anything surrounded by “” (double quotes) or ‘’ (single quotes)
e.g. “My String” = ‘My String’
• Object
– myObj = new Object();
• null
– Not the same as zero - no value at all.
• Undefined
– The Variable has been created but no value has been assigned to it
Thank you
QUESTIONS?
