JavaScript v1

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>
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">
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”>

</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>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Using innerHTML
<!DOCTYPE html>
<html>
<body>
<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>
<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?

JavaScript v1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript v1

Uploaded by

Copyright:

Available Formats

JavaScript

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change

Find an HTML element by its id

<p id="demo">JavaScript can change the

// Get the value of the input field with id="numb"

// If x is Not a Number or less than one or greater than 10

– Within <BODY> tag

<h2>Demo External JavaScript</h2>

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

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

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

• The noscript tag allows display for non-javascript aware browsers:

<h1>JavaScript is Case Sensitive</h1>

<p>My Last name is:</p>

What will be the output?

You might also like