Download presentation
Presentation is loading. Please wait.
1
Lectured By: Vivek Dimri Asst. Professor, SET, Sharda University
Java Script Lectured By: Vivek Dimri Asst. Professor, SET, Sharda University
2
What is Java Script JavaScript is a client-side scripting language.
A scripting language is a lightweight programming language. JavaScript is programming code that can be inserted into HTML pages. JavaScript inserted into HTML pages, can be executed by all modern web browsers. Java Script can enhance the dynamics and interactive features of your page by allowing you to perform calculations, check forms, write interactive games, add special effects, customize graphics selections, create security passwords and more. Lectured by: Vivek Dimri
3
What is Java Script JavaScript is used in Web site development to such things as: automatically change a formatted date on a Web page cause a linked-to-page to appear in a popup window cause text or a graphic image to change during a mouse rollover Lectured by: Vivek Dimri
4
Java Vs Java Script Requires the JDK to create the applet
Requires a Java virtual machine to run the applet Applet files are distinct from the XHTML code Source code is hidden from the user Programs must be saved as separate files and compiled before they can be run Programs run on the server side Requires a text editor Required a browser that can interpret JavaScript code JavaScript can be placed within HTML and XHTML Source code is made accessible to the user Programs cannot write content to the hard disk Programs run on the client side Lectured by: Vivek Dimri
5
ECMA Script The responsibility for the development of a scripting standard has been transferred to an international body called the European Computer Manufacturers Association (ECMA). The standard developed by the ECMA is called ECMAScript, though browsers still refer to it as JavaScript. The latest version is ECMA-262, which is supported by the major browsers. Lectured by: Vivek Dimri
6
Writing a Java Script Program
The Web browser runs a JavaScript program when the Web page is first loaded, or in response to an event. JavaScript programs can either be placed directly into the HTML file or they can be saved in external files. placing a program in an external file allows you to hide the program code from the user source code placed directly in the HTML file can be viewed by anyone Lectured by: Vivek Dimri
7
Writing a Java Script Program
A JavaScript program can be placed anywhere within the HTML file. Many programmers favor placing their programs between <head> tags in order to separate the programming code from the Web page content and layout. Some programmers prefer placing programs within the body of the Web page at the location where the program output is generated and displayed. Lectured by: Vivek Dimri
8
How to use/implement Java Script???
We can implement Java script in our web page by following three ways- Inside the head tag Within the body tag In an external file (with extension .js) Lectured by: Vivek Dimri
9
Implementing Java Script
Inside HEAD Tag: Syntax: <HTML> <HEAD> <SCRIPT TYPE= “TEXT/JAVASCRIPT”> <!- - Java Script Code // - -> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Lectured by: Vivek Dimri
10
Implementing Java Script
Within BODY Tag: Syntax: <HTML> <HEAD> </HEAD> <BODY> <SCRIPT TYPE= “TEXT/JAVASCRIPT”> <!- - java script code // - -> </SCRIPT> </BODY> </HTML> Lectured by: Vivek Dimri
11
Implementing Java Script
In an External Link: Syntax: <HTML> <HEAD> <SCRIPT SRC= “myscript.js”> </SCRIPT> </HEAD> <BODY> <input TYPE=“Button” onclick=“msg()” value=“Message”> </BODY> </HTML> Myscript.js: Function msg() { alert("Hello") } Lectured by: Vivek Dimri
12
Java Script Syntax Issue
JavaScript commands and names are case sensitive. JavaScript command lines end with a semicolon to separate it from the next command line in the program. in some situations, the semicolon is optional semicolons are useful to make your code easier to follow and interpret Lectured by: Vivek Dimri
13
Displaying some text on web Page
You can write on page by using following statement of Java script- document.write(“message”) document.writeln(“message”) Example: document.write(“<h1><B>My first message</B></h1>” ) ; Lectured by: Vivek Dimri
14
Working with Variables & Data
A variable is a named element in a program that stores information. The following restrictions apply to variable names: the first character must be either a letter or an underscore character ( _ ) the remaining characters can be letters, numbers, or underscore characters variable names cannot contain spaces Variable names are case-sensitive. document.write(Year); Lectured by: Vivek Dimri
15
Types of Variables JavaScript supports four different types of variables Numeric variables can be a number, such as 13, 22.5, or string variables is any group of characters, such as “Hello” or “Happy Holidays!” Boolean variables are variables that accept one of two values, either true or false null variables is a variable that has no value at all Lectured by: Vivek Dimri
16
Declaring a Variable Before you can use a variable in your program, you need to declare a variable using the var command or by assigning the variable a value. Any of the following commands is a legitimate way of creating a variable named “Month”: var Month; var Month = “December”; Month = “December”; Lectured by: Vivek Dimri
17
Working with Dates There are two ways to create a date object: variable = new Date(“month day, year, hours:minutes: seconds”) variable = new Date(year, month, day, hours, minutes, seconds”) variable is the name of the variable that contains the date information month, day, year, hours, minutes, and seconds indicate the date and time var Today=new Date(“October 15, 2006”); var Today=new Date(2006, 9, 15); Lectured by: Vivek Dimri
18
Java Script Date Methods
Lectured by: Vivek Dimri
19
Operators in JavaScript
Following operators are used in JavaScript- Arithmetic Operator Comparison Operator Lectured by: Vivek Dimri
20
Operators in JavaScript
Following operators are used in JavaScript- Arithmetic Operator Operator Meaning Example + Addition 2 + 4 - Subtraction 6 - 2 * Multiplication 5 * 3 / Division 15 / 3 % Modulus 43 % 10 Lectured by: Vivek Dimri
21
Example <body> <script type="text/JavaScript"> <!– var two = 2 var ten = 10 var linebreak = "<br />" document.write("two plus ten = ") var result = two + ten document.write(result) document.write(linebreak) document.write("ten * ten = ") result = ten * ten document.write("ten / two = ") result = ten / two //--> </script> </body> Lectured by: Vivek Dimri
22
Output two plus ten = 12 ten * ten = 100 ten / two = 5
Lectured by: Vivek Dimri
23
Operators in JavaScript
Comparison Operator Operator Meaning Example Result == Equal To x == y false != Not Equal To x != y true < Less Than x < y > Greater Than x > y <= Less Than or Equal To x <= y >= Greater Than or Equal To x >= y Lectured by: Vivek Dimri
24
Built-in JavaScript Functions
Functions provided by the language and you cannot change them to suit your needs. Some of the built-in functions in JavaScript are shown here: eval - eval(expr) eval evaluates the expression or statements isFinite Determines if a number is finite isNaN Determines whether a value is “Not a Number” parseInt Converts string literals to integers, no number NaN. parseFloat Finds a floating-point value at the beginning of a string. Lectured by: Vivek Dimri
25
The Math Object & Math Methods
Another way of performing a calculation is to use the JavaScript built-in Math methods. These methods are applied to an object called the Math object. The syntax for applying a Math method is: value = Math.method(variable); For example, AbsValue = Math.abs(NumVar); Lectured by: Vivek Dimri
26
The Math Object & Math Methods
Lectured by: Vivek Dimri
27
JavaScript Functions A function is a block of organized reusable code (a set of statements) for performing a single or related action. Begins with keyword “function” and the function name and “( … )” Inside the parentheses We can pass parameters to the function E.g. function myfuc(arg1, arg2) {…} Built-in and user-defined functions Lectured by: Vivek Dimri
28
Creating JavaScript Functions
Declaration Syntax Functions are declared using the function reserved word The return value is not declared, nor are the types of the arguments function function_name(parameters) { JavaScript commands } parameters are the values sent to the function (note: not all functions require parameters) { and } are used to mark the beginning and end of the commands in the function. Lectured by: Vivek Dimri
29
Creating JavaScript Functions: Example
<HTML> <HEAD> <SCRIPT TYPE=TEXT/JAVASCRIPT> <!- - function myMessage() { document.write(“<B>Hello World”); } // - -> </SCRIPT> </HEAD> <BODY> <INPUT TYPE=BUTTON onClick=myMessage() Value=Click > </BODY> </HTML> Lectured by: Vivek Dimri
30
Event in JavaScript JavaScript is its ability to help you create dynamic web pages that increase user interaction The building blocks of an interactive web page is the JavaScript event system. An event in JavaScript is something that happens with or on the webpage. A few example of events: A mouse click The webpage loading Mousing over a hot spot on the webpage, also known as hovering Selecting an input box in an HTML form A keystroke Lectured by: Vivek Dimri
31
Event in JavaScript JS Event Handler Onclick onMouseOver onMouseOut
onLoad onUnload, etc Lectured by: Vivek Dimri
32
JavaScript Object Object Number String Date Array Boolean Math, etc
Lectured by: Vivek Dimri
33
Window Document Object
The Window object represents a web browser window. In client-side JavaScript, the Window object is the global object that defines all top-level properties and methods. The properties and methods of the Window object are therefore global properties and global functions and you can refer to them by their property names without any object prefix. One of the properties of the Window object is named window and refers back to the Window object itself: window // The global Window object window.document // The document property of the window document // Or omit the object prefix Lectured by: Vivek Dimri
34
Browser Document Object
Lectured by: Vivek Dimri
35
Document Object Java script enable browsers are capable of recognizing individual objects in a HTML page. Each HTML document loaded into a browser window becomes a Document object. The Document object provides access to all HTML elements in a page, from within a script. DOM has following properties- Anchor Applet Body Cookies Form Image Link Title URL , etc Lectured by: Vivek Dimri
36
Document Object DOM methods- Open() Close() getElementByName()
getElementBYId() Write() Writeln() Lectured by: Vivek Dimri
37
Validation in JavaScript
Form Validation- Form data that typically are checked by a JavaScript could be: has the user left required fields empty? has the user entered a valid address? has the user entered a valid date? has the user entered text in a numeric field? Ex: Blank/ or null validation var x= document.forms["myForm"]["fname"].value if (x==null || x=="") // for Null or blank value validation var x=document.forms["myForm"][" "].value; var var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) Lectured by: Vivek Dimri
Similar presentations
