JS Java Script

Ahmad Damra
MCT, MCSD, MCPD, MCTs

FB.COM/Mr.AhmadDamra
©2021 Ahmad Damra
 Introduction to JavaScript
 What is JavaScript?
 History
 Uses
 Adding JavaScript to HTML
 JavaScript syntax
 JavaScript events
 JavaScript classes
 The HTML Document Object Model

©2021 Ahmad Damra

 Introduction to JavaScript
 What is JavaScript?
JavaScript is a programming language for use in HTML pages
Invented in 1995 at Netscape Corporation (LiveScript)

 JavaScript has nothing to do with Java

 JavaScript programs are run by an interpreter built into the user's web browser (not
on the server

©2021 Ahmad Damra

 What can JavaScript Do?
 JavaScript can dynamically modify an HTML page
 JavaScript can react to user input
 JavaScript can validate user input
 JavaScript can be used to create cookies (yum!)
 JavaScript is a full-featured programming language
 JavaScript user interaction does not require any
communication with the server

©2021 Ahmad Damra

 Using JavaScript in your HTML

©2021 Ahmad Damra

 Where to Put your Scripts
• You can have any number of scripts
• Scripts can be placed in the HEAD or in the BODY
• In the HEAD, scripts are run before the page is displayed
• In the BODY, scripts are run as the page is displayed
• In the HEAD is the right place to define functions
• and variables that are used by scripts within the BODY

©2021 Ahmad Damra

 Using JavaScript
in your HTML

©2021 Ahmad Damra

 External Scripts
 Scripts can also be loaded from an external file
 This is useful if you have a complicated script or
set of subroutines that are used in several different documents

©2021 Ahmad Damra

 Values
 Values are bits of information.
 Values types and some examples include:
 Number: 1, 2, 3, etc.
 String: characters enclosed in quotes.
 Boolean: true or false.
 Object: image, form
 Function: validate, doWhatever

©2021 Ahmad Damra

 Java Script Variables

 Variables contain values and use the equal sign to specify their value.

 Variables are created by declaration using the command with or without an

initial value state.
 e.g. var month;
 e.g. var month = April;

©2021 Ahmad Damra

 Expressions

• Expressions are commands that assign values to variables.

• Expressions always use an assignment operator, such as the equals sign.

e.g., var month = May; is an expression.

•
• Expressions end with a semicolon.

©2021 Ahmad Damra

 JavaScript Variables
 JavaScript has variables that you can declare with the optional var keyword
 Variables declared within a function are local to that function
 Variables declared outside of any function are global variables

var myname = “Ahmad Damra";

©2021 Ahmad Damra

 JavaScript Operators and Constructs

 JavaScript has most of the operators we're used to from C/Java

 Arithmetic (+, - ,*, /, %)
 Assignment (=, +=, -=, *= /=, %=, ++, --)
 Logical (&&, ||, !)
 Comparison (<, >, <=, >=,==)
• Note: + also does string concatenation
• Constructs:
– if, else, while, for, switch, case

©2021 Ahmad Damra

 Logical Operators

• !

• &&

• ||

©2021 Ahmad Damra

 Operators (continue)
 String concatenation operator
 +
 If one of the operand is a string, the other operand is automatically converted to
its equivalent string value.

 Assignment operators
 =, +=, -=, *=, /=, %=

 Bitwise operators
 &, |, ^, >>, <<, >>>

©2021 Ahmad Damra

 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>

©2021 Ahmad Damra

 Simple User Interaction

• There are three built-in methods of doing simple

• user interaction
• alert(msg) alerts the user that something has happened
• confirm(msg) asks the user to confirm (or cancel) something
• prompt(msg, default) asks the user to enter some text

alert("There's a monster on the wing!");

confirm("Are you sure you want to do that?");
prompt("Enter you name","Adam");

©2021 Ahmad Damra

 JavaScript Functions

• JavaScript lets you define functions using the function keyword

• Functions can return values using the return keyword

function showConfirm()
{
confirm("Are you sure you want to do that?");
}

©2021 Ahmad Damra

 Example: Function

©2021 Ahmad Damra

 Example: Function

©2021 Ahmad Damra

 Comments in JavaScript

©2021 Ahmad Damra

 JavaScript Strings

 A String object is created every time you use a string literal (just like in Java)
 Have many of the same methods as in Java
 charAt, concat, indexOf, lastIndexOf, match, replace, search, slice, split, substr,
substring, toLowerCase, toUpperCase, valueOf
 There are also some HTML specific methods
 big, blink, bold, fixed, fontcolor, fontsize, italics, link, small, strike, sub, sup

©2021 Ahmad Damra

 JavaScript Dates

 The Date class makes working with dates easier

 A new date is initialized with the current date
 Dates can be compared and incremented

var myDate = new Date();

myDate.setFullYear(2007,2,14);
var today = new Date();
var nextWeek = today + 7;
if (nextWeek > today)
{
alert("You have less than one week left");
}

©2021 Ahmad Damra

 Conditional Statements

• “if” statement
• “if … else” statement
• "? :" ternary conditional statement

©2021 Ahmad Damra

 Looping Statement

 “for/in” Loops

©2021 Ahmad Damra

 Control Structures
 There are three basic types of control structures in JavaScript: the if
statement, the while loop, and the for loop
 Each control structure manipulates a block of JavaScript expressions
beginning with { and ending with }

©2021 Ahmad Damra

 Statements

©2021 Ahmad Damra

 The If Statement

©2021 Ahmad Damra

 Repeat Loops

©2021 Ahmad Damra

 Loop Statements

©2021 Ahmad Damra

 The While Loop

©2021 Ahmad Damra

 The For Loop
• The for loop is used when there is a need to have a counter of some kind
• The counter is initialized before the loop starts, tested after each iteration to
see if it is below a target value, and finally updated at the end of the loop

©2021 Ahmad Damra

 Example: For Loop

// Print the numbers 1 through 10

for (i=1; i<= 10; i++)

document.write(i);

©2021 Ahmad Damra

 Example: For Loop

<SCRIPT LANGUAGE= "JavaScript">

document.write("1");
document.write("2");
document.write("3"); <SCRIPT LANGUAGE="JavaScript">
document.write("4");
document.write("5"); for (i=1; i<=5; i++)
</SCRIPT> document.write(i);

©2021 Ahmad Damra

 An example of event handler

©2021 Ahmad Damra