Scribd
Upload
35 views

JavaScript v1

The document provides an overview of how JavaScript can be used to program the behavior of web pages. It demonstrates how JavaScript can change HTML content, attributes, styles, and validate data. It also discusses key JavaScript concepts like syntax, using comments, hiding scripts, output methods, variables, and case sensitivity.

Uploaded by

kamran khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

JavaScript v1

The document provides an overview of how JavaScript can be used to program the behavior of web pages. It demonstrates how JavaScript can change HTML content, attributes, styles, and validate data. It also discusses key JavaScript concepts like syntax, using comments, hiding scripts, output methods, variables, and case sensitivity.

Uploaded by

kamran khan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

JavaScript

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
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('de
mo').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
<!DOCTYPE html>
<html>
<body>

<h2>Demo External JavaScript</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try


it</button>

<p>This example links to "myScript.js".</p>


<p>(myFunction is stored in "myScript.js")</p>

<script src="myScript.js"></script>

</body>
</html>
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;
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?

You might also like