html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
sections. Common ways to include JavaScript are inline using
Scribd
Upload
123 views

Chapter 6 - JAVASCRIPT - Hamid

JavaScript is a client-side scripting language that allows websites to become interactive and dynamic. JavaScript code can be embedded directly in HTML pages or linked via external JavaScript files. The <script> tag is used to define a JavaScript section in an HTML document and can be placed in the <head> or <body> sections. Common ways to include JavaScript are inline using <script> tags, via external .js files linked using the src attribute, or by defining event handlers.

Uploaded by

Asad Akhlaq
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
123 views

Chapter 6 - JAVASCRIPT - Hamid

JavaScript is a client-side scripting language that allows websites to become interactive and dynamic. JavaScript code can be embedded directly in HTML pages or linked via external JavaScript files. The <script> tag is used to define a JavaScript section in an HTML document and can be placed in the <head> or <body> sections. Common ways to include JavaScript are inline using <script> tags, via external .js files linked using the src attribute, or by defining event handlers.

Uploaded by

Asad Akhlaq
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

JavaScript: Client-Side

Scripting

 Chapter 6
Objectives
1 What is JavaScript
2 JavaScript Design

3 Using
JavaScript 4 Syntax

5 JavaScript
Objects
 Section 1 of 5

What IS JavaScript
Three layers of web design

HTML CSS JavaScript

Structure Style Behavior


SITE PLANNING PRESENTATION
Client-side (front-end) coding includes HTML, CSS and JavaScript. This just
means that our code will be downloaded from the server and then compiled
entirely in the browser.
• A Programming Language, Behavior and Interactivity with
the page.

• What happens when you move mouse over menu.

• What happens when a user types in an invalid or wrong


value in text field.

• Long a photo Slide Show takes to move from one image to


other.

JAVASCRIPT!
Client-Side Scripting
Let the client compute
scripts
• These are program codes
written inside HTML page.

What is a • They are written using a text


Scripting editor like notepad.
Language???
• Scripting languages like
JavaScript, VB script, PHP, Perl,
etc., are used to create
dynamic web pages.
 JavaScript:
– the first Web scripting language,
– developed by Netscape in 1995
– syntactic similarities to Java/C++, but simpler, more
flexible in some respects, limited in other
• (loose typing, dynamic variables, simple objects)

 JScript:
– Microsoft version of JavaScript, introduced in 1996
– same core language, but some browser-specific
differences
 fortunately, IE, Netscape, Firefox, etc. can (mostly)
handle both JavaScript & JScript
 JavaScript 1.5 & JScript 5.0 cores both conform to
ECMAScript standard
 VBScript:
– client-side scripting version of Microsoft Visual Basic
What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages.

 JavaScript is a scripting language.

 A JavaScript consists of lines of executable computer code.

 A JavaScript is usually embedded directly into HTML pages.

 JavaScript is an interpreted language (means that scripts execute


without preliminary compilation).

 Everyone can use JavaScript without purchasing a license.


What is JavaScript?

• JavaScript is used to program the behavior of web pages


(performing dynamic tasks).

• JavaScript are scripts (code) that is executed on the


client’s browser instead of the web-server
(Client-side scripts).
Introduction to JavaScript
 Java is a programming language
which requires compilation and
Is interpretation.
 Java is used to make large scale
JavaScript applications.
same as  JavaScript is a scripting
language which just requires
Java??? interpretation. The script is
some set of commands which
the browser interprets.
 JavaScript is used to add
interactivity in HTML Pages.
What JavaScript can do?
• Javascript can change HTML Content
• Javascript can change HTML Attributes
• Javascript can change HTML Styles (CSS)
• Javascript can Validate Data
• Javascript can Make Calculations
 Section 2of 6

Where Does JavaScript GO?


Where does JavaScript go?
JavaScript can be linked to an HTML page in a number
of ways.

• Inline
• Embedded
• External
JavaScript
• JavaScript consists of JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.

• The <script> tag alert the browser program to begin interpreting all the text
between these tags as a script.
• The script tag takes two important attributes:

language:
• This attribute specifies what scripting language you are using.
• Typically, its value will be “javascript”.

type:
• This attribute is what is now recommended to indicate the scripting language
in use. its value should be set to "text/javascript".

<script language="javascript" type="text/javascript">


JavaScript code
</script>
Using <script> tag
Eg:
<html>
<head><title>Example</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
Is a standard command for writing output
to a page
How to Handle Older Browsers
 Browsers that do not support JavaScript will display the
script as it is. Use the HTML comment tag to prevent this.
Eg.
<script type="text/javascript">
<!--
document.write("Hello World!")
// -->
The two forward slashes at the end of comment line
</script> (//) are a JavaScript comment symbol. This
prevents the JavaScript compiler from compiling
the line.
Incorporating JavaScript into HTML
 JavaScript programs require the <SCRIPT> tag in .html files

<script type = "text/javascript">


ACTUAL JavaScript code here
</script>

 These can appear in either the <HEAD> or <BODY> section


of an html document
• Functions and code that may execute multiple times is
typically placed in the <HEAD>
• Code that needs to be executed only once, when the
document is first loaded is placed in the <BODY>
Using the <script> Tag

• To embed a client-side script in a Web page, use the


element:
<script type= “ text/javascript ” >
script commands and comments
</script>

• To access an external script, use:

< script type = “ text/javascript ” src=“url” >


script commands and comments
</script>
How to Put a JavaScript Into an HTML
Page 1?
<html>
<body>

<script type=“ text/javascript ">

script commands

</script>
</body>
</html>
How to Put a JavaScript Into an HTML
Page 2?
<html>

<Head>
<script type=“ text/javascript ">

script commands

</script>
<Head>

<body>

</body>

</html>
How to Put a JavaScript Into an HTML
Page 3?
<html>

<Head>

< script type = “ text/javascript ” src=“Filename.JS” >


</script>
<Head>

<body>

</body>

</html>
Using External JavaScript (contd.)

document.write("This line <html>


has been writen in the <head><title>Example</title>
External JavaScript!!!") </head>
<body>
External.js <script src="External.js">
</script>>
<p >
This line has been written in the
html page!!!
</p>
</body>
</html>

JavaScript.html
Embedding JavaScript
External Javascript File
<body>
...
<script type="text/javascript" src="myCode.js" />

<script type="text/javascript">
//<![CDATA[
alert("Page is loading"); Inline Code
//]]>
</script>

<p onclick="alert(Hello, world!');">


Click here.</p>
... Event Handler
</body>
JavaScript
<html>
<head>
<script>
alert("head");
</script>
</head>
<body>
<script> alert("start"); </script>
<p>THis is text Wow</p>
<p>some what in middel 1</p>
<p>some what in middel 2</p>
<script> alert("middle"); </script>
<p>some what in midde 3</p>
<p>some what in midde4</p>
<p>finally end</p>
<script>alert("end");</script>
</body>
</html>
Writing Output to a Web Page
 JavaScript provides methods to write text to a Web page:
 document.write(“text”);

document.write (“ Welcome !");

document.write ("<h3> News Flash!</h3><br />");


JavaScript Statements
JavaScript Code
 JavaScript code (or just JavaScript) is a sequence of JavaScript
statements.
 Each statement is executed by the browser in the sequence they
are written.
 This example will write a heading and two paragraphs to a web
page:

Example:
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another
paragraph.</p>");
</script>
JavaScript Statements
JavaScript Blocks
 JavaScript statements can be grouped together in blocks.
 Blocks start with a left curly bracket { and end with a right curly
bracket }.
 The purpose of a block is to make the sequence of statements
execute together.
 This example will write a heading and two paragraphs to a web
page:

Example <script type="text/javascript">


{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>
alert(), confirm(), and prompt()

<script type="text/javascript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>
alert() and confirm()

alert("Text to be displayed");

 Display a message in a dialog box.


 The dialog box will block the browser.

var answer = confirm("Are you sure?");

 Display a message in a dialog box with two buttons: "OK" or


"Cancel".
 confirm() returns true if the user click "OK". Otherwise it
returns false.
prompt()
prompt("What is your student id number?");
prompt("What is your name?”, "No name");

 Display a message and allow the user to enter a value


 The second argument is the "default value" to be displayed in
the input textfield.
 Without the default value, "undefined" is shown in the input
textfield.

 If the user click the "OK" button, prompt() returns the value in
the input textfield as a string.
 If the user click the "Cancel" button, prompt() returns null.
JavaScript Comments
 Comments can be added to explain the JavaScript, or to make the code more
readable.
 Single line comments start with //.
 Multi line comments start with /* and end with */.

<html>
<body>

<script type="text/javascript">
// This is Comment 1..

/*
This is Comment 2..
this is multi-line comment
*/

document.write("<h1>ITEC 229</h1>"); // prints the text to the screen in <H1> format.

</script>
</body>
</html>
 Section 4 of 8

JavaScript Operators & Expressions


JavaScript Syntax

We will briefly cover the fundamental syntax for the


most common programming constructs including
• variables,
• assignment,
• conditionals,
• loops, and
• arrays
before moving on to advanced topics such as events
and classes.
JavaScript Varibles
 JavaScript variables are used to hold values or expressions.

 A variable can have a short name, like x, or a more descriptive name, like
carname.

 Rules for JavaScript variable names:


– Variable names are case sensitive (y and Y are two different variables)
– Variable names must begin with a letter or the underscore character

 A variable's value can change during the execution of a script.


 You can refer to a variable by its name to display or change its value.

36
JavaScript Varibles
Declaring (Creating) JavaScript Variables
 Creating variables in JavaScript is most often referred to as "declaring" variables.
 You declare JavaScript variables with the var keyword:
– var x;
var carname;
 After the declaration shown above, the variables are empty (they have no values
yet).
 However, you can also assign values to the variables when you declare them:
– var x=5; // will hold the value 5,
var carname="Volvo"; // and carname will hold the value Volvo

Note: When you assign a text value to a variable, use quotes around the value.
Note: If you redeclare a JavaScript variable, it will not lose its value.

37
Data Type in JavaScript (contd.)
 JavaScript recognizes the following type of values:

Values

numbers boolean
string 9, 3.56 true or false
null
Samuel, ”Samuel J Palmisano”
A Special keyword which refers to nothing
JavaScript Data type
 JavaScript variables can hold many data types:
numbers, strings, arrays, objects and more:

• var length = 16; // Number

• var lastName = "Johnson"; // String

• var cars = ["Saab", "Volvo", "BMW"]; // Array

• var x = {firstName:"John", lastName:"Doe"}; // Object


Data Type in JavaScript (contd.)
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Practice</title>
<meta charset="utf-8">
</head>
<body>
<h1>Using JavaScript</h1>
<h2>Hello
Using JavaScript
<script type="text/javascript">
<!--
Hello Nora
var userName;
userName = “Nora";
document.write(userName);
// -->
</script>
</h2>
</body>
</html>
Adding two strings together and display:

<html>
<head>
</head>
<body>
<script type="text/javascript">

var txt1="What a very";


var txt2="nice day";
var txt3;

txt3=txt1+txt2;
document.write(txt3);
</script>
</body>
</html>
Prompts
 prompt() method
– The prompt() method displays a dialog box with a message, a
text box, an OK button & a Cancel button.
– It requests a data from the user.

var myName;
myName = prompt(“prompt message”);

– The value typed by the user is stored in the variable myName


Prompts

Using JavaScript
Hello Nora
Hands-on Practice : The Code
<body>
<h1>Using JavaScript</h1>
<h2>Your two favorite colours are:
<script type="text/javascript">
<!--
var favcolour, favcolour2;
favcolour = prompt("What is your Favorite colour?");
favcolour2 = prompt("How about your second favorite colour?");
document.write(favcolour," ", favcolour2);
// -->
</script>
</h2>
JavaScript Variables Scope
Local JavaScript Variables
A variable declared within a JavaScript function becomes LOCAL and can only be
accessed within that function. (the variable has local scope).

Global JavaScript Variables


Variables declared outside a function become GLOBAL, and all scripts and functions
on the web page can access it.

<script>
x=1
Global scope
var y=2
function MyFunction()
{
var z
Local scope
z=3
// the rest of the code
}
</script>
JavaScript Operators

Operators

Arithmetic Assignment Conditional

String
Comparison
typeof
Logical
JavaScript Operators
JavaScript Arithmetic Operators
• Arithmetic operators are used to perform arithmetic between variables and/or
values.

• Given that y=5, the table below explains the arithmetic operators:

Operator Description Example Result


+ Addition x=y+2 x=7 y=5
- Subtraction x=y-2 x=3 y=5
* Multiplication x=y*2 x=10 y=5
/ Division x=y/2 x=2.5 y=5
% Modulus x=y%2 x=1 y=5
(division remainder)
++ Increment x=++y x=6 y=6
x=y++ x=5 y=6
-- Decrement x=--y x=4 y=4
x=y-- x=5 y=4
48
JavaScript Operators
JavaScript Assignment Operators

• Assignment operators are used to assign values to JavaScript variables.


• Given that x=10 and y=5, the table below explains the assignment
operators:

Operator Example Same As Result


= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

49
JavaScript Operator (contd.)
JavaScript String Operators
JavaScript Operators
The + Operator Used on Strings

 The + operator can also be used to add string variables or text values
together.

 To add two or more string variables together, use the + operator;


– txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

 After the execution of the statements above, the variable txt3 contains
"What a verynice day".

51
JavaScript Operators
The + Operator Used on Strings
 To add a space between the two strings, insert a space into one of the
strings:
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
or insert a space into the expression:
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
 After the execution of the statements above, the variable txt3
contains:
"What a very nice day"

52
JavaScript Operators
Comparison Operators
 Comparison operators are used in logical statements to determine equality or
difference between variables or values.
 Given that x=5, the table below explains the comparison operators:
 Comparison operators can be used in conditional statements to compare values
and take action depending on the result.

Operator Description Example


== is equal to x==8 is false
x==5 is true
=== is exactly equal to (value and x===5 is true
type) x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true

53
JavaScript Operators
Logical Operators

 Logical operators are used to determine the logic between variables or


values.
 Given that x=6 and y=3, the table below explains the logical operators:

Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x==5 || y==5) is false

! not !(x==y) is true

54
What you Learned
1 What is JavaScript
2 JavaScript Design

3 Using
JavaScript 4 Syntax

5 JavaScript
Objects

7 8

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy