Scribd
Upload
4 views

05_JavaScript_v5 Part-1 (1) (2)

The document is an introduction to JavaScript, covering its purpose in web development alongside HTML and CSS, and detailing its capabilities such as changing HTML content, validating data, and manipulating styles. It explains JavaScript syntax, variable declaration, and the differences between JavaScript and Java, as well as best practices for writing and organizing JavaScript code. Additionally, it highlights JavaScript's case sensitivity, data types, and provides examples of using JavaScript in HTML.

Uploaded by

Abdullah Naeem
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

05_JavaScript_v5 Part-1 (1) (2)

The document is an introduction to JavaScript, covering its purpose in web development alongside HTML and CSS, and detailing its capabilities such as changing HTML content, validating data, and manipulating styles. It explains JavaScript syntax, variable declaration, and the differences between JavaScript and Java, as well as best practices for writing and organizing JavaScript code. Additionally, it highlights JavaScript's case sensitivity, data types, and provides examples of using JavaScript in HTML.

Uploaded by

Abdullah Naeem
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

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?

You might also like