8 introduction to_java_script

Java Script ● JavaScript (JS) is an interpreted , untyped computer programming language. ● It is a scripting language produced by Netscape, was originally called Live Script (later renamed to Java Script) and was first used in Netscape browsers for use within HTML Web pages.

Why Java Script? ● HTML to specify the content of web pages, ● CSS to specify the presentation of those pages, ● JavaScript to specify their behavior.

DHTML – Dynamic HTML ● DHTML is a term used to characterize the dynamic effects that arise from using HTML, CSS, and JavaScript on a webpage

Names and Versions ● Netscape(now Mozilla) submitted the Java Script language for standardization to ECMA (European Computer Manufacturer’s Association) ● Due to trademark issues, cthe standardized version of the language is called “ECMAScript” ● Again due to trademark reasons, Microsoft’s version of the language is formally known as “JScript” ● Most supported version ECMA Script 3(ES3) and Latest version is ECMA Script 5(ES 5), and corresponding Mozilla’s Java Script version 1.5 is basically ECMAScript 3

Core Java Script ● JavaScript programs are written using the Unicode character set and is Case Sensitive. ● Core JavaScript contains a core set of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. ● Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects. Eg: Client-side JS, Server-Side JS.

Client-Side and Server-Side ● Client-side JavaScript extends the core language by supplying objects to control a browser (Navigator or another web browser) and its Document Object Model (DOM). ● Server-side JavaScript (Node JS)extends the core language by supplying objects relevant to running JavaScript on a server.

JavaScript and Java ● JavaScript is an object-based language based on prototypes, rather than being class-based like Java. ● Class-based object-oriented languages, involve the use of classes and instances, but a prototype-based language, such as JavaScript, does not make this distinction: it simply has objects. – A prototype-based language has a prototypical object, used as a template from which to get the initial properties for a new object. – Any object can specify its own properties, when created or at run time. – Any object can be associated as the prototype for another object, allowing the second object to share the first object's properties.

Java Script Syntax ● A JavaScript consists of JavaScript statements that are placed within the <script>... </script> HTML tags in a web page. ● <script language="javascript" type="text/javascript"> – JavaScript code ● </script>

Sample Java Script ● <html> ● <body> ● <script language="javascript" type="text/javascript"> ●  ● </script> ● </body> ● </html> ● Output: Hello World!

Including Java Script in a Web page ● There are four standard ways to include script in an (X)HTML document: – Within the <script> element – As a linked file via the src attribute of the <script> element – Within an XHTML event handler attribute such as onclick – Via the pseudo-URL javascript: syntax referenced by a link

Comments ● JavaScript supports two styles of comments. ● Single Line Comment - // comments... ● Multiline Comment - /* comments in multiple lines */ but may not be nested // This is a single-line comment. /* This is also a comment */ // And here is another. /* * This is yet another comment. * It has multiple lines. */

Optional Semicolons ● Like many programming languages, JavaScript uses the semi-colon (;) to separate statements from each other ● Semicolon can be omitted between two statements if – those statements are written on separate lines. – at the end of a program or – if the next token in the program is a closing curly brace }

Types ● The kinds of values that can be represented and manipulated in a programming language are known as types. ● JavaScript types can be divided into two categories: – Primitive types – Object types.

Primitive Types ● JavaScript’s primitive types include – Number – String – Boolean ● Special JavaScript values null and undefined are primitive values, but they are not numbers, strings, or booleans. ● Each value is considered to be the sole member of its own special type.

Object Types ● Any JavaScript value that is not a number, a string, a boolean, or null or undefined is an object ● An object (that is, a member of the type object) is a collection of properties where each property has a name and a value (either a primitive value, such as a number or string, or an object). ● Object types in Java Script - objects, arrays, and functions

Variables ● A variable defines a symbolic name for a value and allows the value to be referred to by name. ● Variables are declared with the var keyword. ● JavaScript variables are untyped: we can assign a value of any type to a variable, and we can later assign a value of a different type to the same variable. ● JavaScript uses lexical scoping. – Global Variables - Variables declared outside of a function visible everywhere in JS – Function Scope - Variables declared inside a function and visible only to code that appears inside that function

Identifiers and Reserved Words ● An identifier is used to name variables and functions and to provide labels for certain loops in JavaScript code ● A JavaScript identifier must begin with a letter, an underscore (_), or a dollar sign ($) ● Java Script reserved keywords cannot be used as identifiers.

Java Script Reserved Keywords ● break ● case ● catch ● continue ● debugger ● default ● delete ● do ● else ● false ● finally ● for ● return ● switch ● this ● throw ● true ● Try ● function ● if ● in ● instanceof ● new ● class ● const ● enum ● export ● extends ● import ● super ● void ● while ● With ● Null ● typeof ● var

Java Script Reserved Keywords ● Strict mode reserved words: ● implements ● interface ● let ● package ● private ● protected ● public ● static ● Yield ● arguments ● eval

● ECMAScript 3 reserved all the keywords of the Java language: ● static ● super ● synchronized ● throws ● class ● const ● abstract ● boolean ● byte ● char ● double ● enum ● export ● extends ● goto ● implements ● import ● int ● native ● package ● private ● protected Java Script Reserved Keywords ● final ● float ● interface ● long ● public ● short ● transient ● volatile

Numbers ● Java-Script represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard - [digits][.digits][(E|e) [(+|-)]digits] ● JavaScript programs work with numbers using the arithmetic operators that the language provides. ● These include + for addition, - for subtraction, * for multiplication, / for division, and % for modulo (remainder after division). ● Infinity (Divide by zero) ● NaN(zero divided by zero, divide infinity by infinity, square root of a negative number, use of arithmetic operators with nonnumeric operands that cannot be converted to numbers)

The Arithmetic Operators ● Addition + ● Subtraction - ● Multiplication * ● Division / ● Modulus % ● Increment ++ ● Decrement --

The Comparison Operators ● Equals == ● Not Equals != ● Greater > ● Greater than Equal to >= ● Less < ● Less than equal to < =

The Logical Operators ● And && ● Or || ● Not !

The Bitwise Operators ● And & ● Or | ● Xor ^ ● Not ~ ● Shift Left << ● Shift Right >> ● Shift Right with zero >>>

The Assignment Operators ● = ● += ● -= ● *= ● /= ● %=

Miscellaneous Operator ● Conditional Operator (?:) – (If true)? X : Y ● typeof Operator – The typeof is a unary operator that is placed before its single operand, which can be of any type. – Its value is a string indicating the data type of the operand.

Control Statements ● if statement if (expression){ Statement(s) to be executed if expression is true } ● if...else statement if (expression){ Statement(s) to be executed if expression is true }else{ Statement(s) to be executed if expression is false }

Control Statements ● if...else if... statement if (expression 1){ Statement(s) to be executed }else if (expression 2){ Statement(s) to be executed }else if (expression 3){ Statement(s) to be executed }else{ Statement(s) to be executed }

Control Statements ● switch statement switch (expression) { case condition 1: statement(s) break; case condition 2: statement(s) break; ... case condition n: statement(s) break; default: statement(s) }

Control Statements ● while Loop while (expression){ Statement(s) to be executed if expression is true } ● do...while Loop do{ Statement(s) to be executed; } while (expression);

Control Statements ● for Loop for (initialization; test condition; iteration statement){ Statement(s) to be executed if test condition is true } ● for...in Loop for (variablename in object){ statement or block to execute }

Control Statements ● break Statement is used to exit a loop early, breaking out of the enclosing curly braces ● continue Statement The continue statement tells the interpreter to immediately start the next iteration of the loop and skip remaining code block.

Function Definition ● Function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces. <script type="text/javascript">  </script>

Calling a Function <script type="text/javascript">  </script>

Exceptions ● Exceptions can be handled with the common try/catch/finally block structure. <script type="text/javascript">  </script>

Exceptions <html> <head> <script type="text/javascript">  </script> </head> <body> <p>Click the following to see the result:</p> <form> <input type="button" value="Click Me" onclick="myFunc();" /> </form> </body> </html>

Throw Statement ● throw statement is used to raise built-in exceptions or customized exceptions <html> <head> <script type="text/javascript">  </script> </head> <body> <p>Click the following to see the result:</p> <form> <input type="button" value="Click Me" onclick="myFunc();" /> </form> </body> </html>

Alert Dialog Box ● An alert dialog box is mostly used to give a warning message to the users. <script type="text/javascript">  </script>

Confirmation Dialog Box ● A confirmation dialog box is mostly used to take user's consent on any option. ● It displays a dialog box with two buttons: OK and Cancel. <script type="text/javascript">  </script>

Prompt Dialog Box ● To get user input <script type="text/javascript">  </script>

Page Re-direction ● To do a page redirect using JavaScript at client side. <script type="text/javascript">  </script>

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

SetTimeOut function ● setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval. <script type="text/javascript">  </script>

The void Keyword ● The void is an important keyword in JavaScript which can be used as a unary operator that appears before its single operand, which may be of any type. ● This operator specifies an expression to be evaluated without returning a value.

Page Printing ● JavaScript helps you to implement this functionality using print function of window object. ● The JavaScript print function window.print() will print the current web page when executed. ● <head> ● <script type="text/javascript"> ●  ● </script> ● </head> ● <body> ● <form> ● <input type="button" value="Print" onclick="window.print()" /> ● </form> ● </body>

Cookies ● Creating Cookies – The simplest way to create a cookie is to assign a string value to the document.cookie object – document.cookie = "key1=value1;key2=value2;expires=date"; ● Reading Cookies – The value of the document.cookie object is the cookie. – The document.cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value.

Global Object ● Global Object is a regular JavaScript object whose properties are the globally defined symbols that are available to a JavaScript program. ● In top-level code (JS code that is not part of a function) we can use the JavaScript keyword this to refer to the global object: var global = this; // /refer to the global object ● In client-side JavaScript, the Window object serves as the global object. ● This global Window object has a self-referential window property that can be used to refer to the global object.

8 introduction to_java_script

More Related Content

What's hot

Viewers also liked

Similar to 8 introduction to_java_script

Recently uploaded

8 introduction to_java_script