07 - Client-Side Scripting (Part I)

Lecture 7- Client-Side
Scripting (Part 1)
1
Objectives
• JavaScript Overview.
• What Can JavaScript Do?
• JavaScript Statements.
• JavaScript Variables.
• JavaScript Operators.
• JavaScript Functions.
• JavaScript Events.
• JavaScript Objects.
• JavaScript Conditional Statements.
2
JavaScript Overview
• JavaScript is a Scripting Language.
• A scripting language is a lightweight programming language.
• JavaScript is the most popular scripting language in the world. It is the
programming language of the web, for servers, PCs, laptops, tablets and mobile
phones.
• JavaScript was designed to add interactivity to HTML pages.
• JavaScript is programming code that can be inserted into HTML pages to
be executed by the web browser.
• JavaScript is completely different from Java except for some syntactical
similarities.
3
Placement of JavaScript
• Similar to CSS, there are three ways to use JavaScript:
1. Inline: Place JavaScript code as part of an event attached to an XHTML element.
2. Embedded: JavaScript can be placed in the <head> or in the <body> of an HTML
document using the <script> element.
3. External: JavaScript can be put in a separate .js file.
<script type="text/javascript">
//JavaSript Code Goes here
</script> <script src="myJavaScriptFile.js"></script>
Embedded External
4
What Can JavaScript Do?
• JavaScript can:
◦ Write directly to the HTML output stream
◦ Change the content or style of HTML elements
◦ React to HTML events and test HTML form input
◦ Delete and create HTML elements
document.write("<p>This is a paragraph</p>"); //Write to document
x=document.getElementById("demo") //Find an element

x.innerHTML="Hello"; //Change the content


<button type="button" onclick="myFunction()">Click Me!</button>
5
JavaScript Display Possibilities
• JavaScript can "display" data in different ways:
◦ Writing into an HTML element, using innerHTML.
◦ Writing into the HTML output using document.write().
◦ Writing into an alert box, using window.alert().
◦ Writing into the browser console (for debugging), using console.log().
6
JavaScript Statements
• A computer program is a list of "instructions" to be "executed" by a
computer.
• In a programming language, these programming instructions are called
statements.
• A JavaScript program is a list of programming statements.
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
7
JavaScript Comments
• Single line comments start with //.
◦ Any text between // and the end of the line will be ignored by JavaScript (will not be
executed).
// This is a Single line comment.
• Multi-line comments start with /* and end with */.

◦ Any text between /* and */ will be ignored by JavaScript.
/*
The is
A multi line comment
It will be ignored by JS
*/
8
JavaScript Variables
• JavaScript variables can hold many data types: numbers, strings,
booleans, arrays, objects and more.
• Variables are declared with a var statement.
var length = 16; // Number

var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
9
JavaScript Operators
• Arithmetic operators are used to perform arithmetic on numbers:
Operator Description
+ Addition var x = 5;
var y = 2;
- Subtraction
* Multiplication var a = x + y;
** Exponentiation var b = x – y;
var c = x * y;
/ Division var d = x / y;
% Modulus (Division Remainder) var e = x % y;
x++; //value now is 6.
++ Increment
y--; //value now is
-- Decrement 1.
10
JavaScript Assignment Operators
• Assignment operators assign values to JavaScript variables.
Operator Example Same As

= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
11
JavaScript Functions
• A JavaScript function: is a block of code designed to perform a particular
task.
• A JavaScript function is executed when "something" invokes it (calls it).
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo"
).innerHTML = myFunction(4,
3);
</script>
</body>
</html> 12
JavaScript Events
• HTML events are "things" that happen to HTML elements.
• When JavaScript is used in HTML pages, JavaScript can "react" on these
events.
• Example: onclick attribute with a <button> element .

<html>
<body>
<button onclick="document.getElementById('demo')
.innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
13
JavaScript Math Object
• The JavaScript Math object allows you to perform mathematical tasks on
numbers.
◦ Math.abs(-3); // returns 3
Method Description
◦ Math.ceil(4.7); // returns 5 abs(x) Returns the absolute value of x
◦ Math.foor(4.7); // returns 4 ceil(x) Returns the value of x rounded up to its nearest integer
◦ Math.round(4.7); // returns 5 floor(x) Returns the value of x rounded down to its nearest integer
◦ Math.round(4.4); // returns 4 round(x) Returns the value of x rounded to its nearest integer
max(x, y, z, ..., n) Returns the number with the highest value
◦ Math.max(8, 2); // returns 8
min(x, y, z, ..., n) Returns the number with the lowest value
◦ Math.min(8, 2); // returns 2
pow(x, y) Returns the value of x to the power of y
◦ Math.pow(8, 2); // returns 64
random() Returns a random number between 0 and 1
◦ Math.random(); // returns random sqrt(x) Returns the square root of x
◦ Math.sqrt(4); // returns 2
14
JavaScript Date Formats
• You can create a Date object like this:
var d = new Date();
• There are generally 3 types of JavaScript date input formats:

Type Example JS Code
ISO Date "2015-03-25" (The International Standard) var d = new Date("2015-03-25");
Short Date "03/25/2015" var d = new Date("03/25/2015");
Long Date "Mar 25 2015" or "25 Mar 2015" var d = new Date("Mar 25 2015");
15
JavaScript Conditional Statements: if...else
• Conditional statements are used to perform different actions based on
different conditions.
◦ Use if to specify a block of code to be executed, if a specified condition is true.
◦ Use else if to specify a new condition to test, if the first condition is false.
◦ Use else to specify a block of code to be executed, if the above condition is false.
if (condition1) { if (time < 10) {

//code to be executed if condition1 is true greeting = "Good morning";
} else if (condition2) { } else if (time < 20) {
//if the condition1 is false and condition2 is true greeting = "Good day";
} else { } else {
//if the condition1 is false and condition2 is false greeting = "Good
} evening";
}
16
JavaScript Conditional Statements: Switch
• The switch statement is used to perform different
actions based on different conditions.
◦ The switch expression is evaluated once. switch(expression) {
◦ case x:
The value of the expression is compared with the values of each case.
// code block
◦ If there is a match, the associated block of code is executed. break;
◦ If multiple cases matches, the first case is selected. case y:
//
• When JavaScript reaches a break keyword, it breaks out of code
the switch block. block
brea
• The default keyword specifies the code to run if there is no k;
defaul
case match t:
//
code
block
}
17
JavaScript Conditional Statements: Switch
• Examples:
◦ The getDay() method returns the weekday as a number from 0 and 6.
switch (new Date().getDay()) {

case 3:
switch (new Date().getDay()) { case 4:
case 5: text = "Soon it is Weekend";
text = "Today is Friday"; break;
break; case 5:
case 6: case 6:
text = "Today is Saturday"; text = "It is Weekend";
break; break;
default: default:
text = “Today is not a text = "Looking forward
Weekend"; } to the Weekend";
}
18
JavaScript Resources
• The Modern JavaScript Tutorial
◦ http://javascript.info/
• A re-introduction to JavaScript
◦ https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-
introduction_to_JavaScript
• JavaScript reference
◦ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
19

07 - Client-Side Scripting (Part I)

Uploaded by

Document Information

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

07 - Client-Side Scripting (Part I)

Uploaded by

Copyright:

Available Formats

Lecture 7- Client-Side

document.write("<p>This is a paragraph</p>"); //Write to document

x=document.getElementById("demo") //Find an element

// This is a Single line comment.

• Multi-line comments start with /* and end with */.

var length = 16; // Number

Operator Example Same As

• Example: onclick attribute with a <button> element .

• There are generally 3 types of JavaScript date input formats:

if (condition1) { if (time < 10) {

switch (new Date().getDay()) {

You might also like