1 / 71

JavaScript

JavaScript. JavaScript Basics. It is a Scripting Language invented by Netscape in 1995. It is a client side scripting language.

gisela-deleon
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript

  2. JavaScript Basics • It is a Scripting Language invented by Netscape in 1995. • It is a client side scripting language. • Client-side scripting generally refers to the class of computer programs on the web that are executedclient-side, by the user's web browser, instead of server-side (on the web server).This type of computer programming is an important part of the Dynamic HTML (DHTML) concept, enabling web pages to be scripted; that is, to have different and changing content depending on user input, environmental conditions (such as the time of day), or other variables

  3. Understanding Javascript • Javascript is used in million of web pages to • Improve design • Validate forms • Detect browsers • Create cookies, etc. • Javascript is designed to add interactivity to HTML pages.

  4. Advantages of Javascript • An Interpreted language • Embedded within HTML • Minimal Syntax • Quick Development • Designed for Simple, Small programs • Performance • Procedural capabilities • Handling User events • Easy Debugging and Testing • Platform Independent

  5. JavaScript Basics • Prerequisites for learning javascript. • Knowledge of basic HTML. • You need a web browser. • You need a editor. • No need of special h/w or s/w or a web server.

  6. Understanding Javascript • Javascript is used in million of web pages to • Improve design • Validate forms • Detect browsers • Create cookies, etc. • Javascript is designed to add interactivity to HTML pages.

  7. Understanding Javascript • Javascript is a scripting language developed by Netscape. • We can use nodepad, dreamweaver, golive .etc. for developing javascripts.

  8. HTML and Javascript • The easiest way to test a javascript program is by putting it inside an HTML page and loading it in a javascript enabled browser. • You can integrate javascript code into the HTML file in three ways • Integrating under <head> tag • Integrating under <body> tag • Importing the external javascript.

  9. HTML and Javascript • Integrating script under the <head> tag • Javascript in the head section will execute when called i.e javascript in the HTML file will execute immediately while the web page loads into the web browser before anyone uses it.

  10. HTML and Javascript • Integrating script under the <head> tag • Syntax :- <html> <head> <script type=“text/javascript” > ----------------- </script> </head> <body> </body> <html>

  11. HTML and Javascript • Integrating script under the <body> tag • When you place the javascript code under the <body> tag, this generates the content of the web page. Javascript code executes when the web page loads and so in the body section.

  12. HTML and Javascript • Integrating script under the <body> tag • Syntax :- <html> <head> </head> <body> <script type=“text/javascript” > ----------------- </script> </body> <html>

  13. HTML and Javascript • Importing the External javascript • You can import an external javascript file when you want to run the same javascript file on several HTML files without having to write the same javascript code on every HTML file. • Save the external javascript file with an extension .js • The external javascript file don’t have a <script> tag.

  14. HTML and Javascript • Importing the external javascript • Syntax :- <html> <head> <script src=“first.js” > ----------------- </script> </head> <body> </body> <html>

  15. First javascript program • The javascript code uses <script> </script> to start and end code. • The javascript code bounded with the script tags is not HTML to be displayed but rather script code to be processed. • Javascript is not the only scripting laguage, so you need to tell the browser which scripting language you are using so it knows how to process that language, so you specify <script type =“text/javascript”>

  16. First javascript program • Including type attribute is a good practice but browsers like firefox, IE, etc. use javascript as their default script language, so if we don’t specify type attribute it assumes that the scripting language is javascript. • However use of type attribute is specified as mandatory by W3C.

  17. First javascript program <html> <head> <title> first javascript </title> </head> <body> <script type=“text/javascript” > document.write(“First javascript stmt.”); </script> </body> <html>

  18. Elements of javascript • Javascript statement • Every statement must end with a enter key or a semicolon. • Example :- <script type=“text/javascript” > document.write(“First javascript stmt.”); </script>

  19. Elements of javascript • Javascript statement blocks • Several javascript statement grouped together in a statement block. • Its purpose is to execute sequence of statements together. • Statement block begins and ends with a curly brackets.

  20. Elements of javascript • Example :- <script type=“text/javascript” > { document.write(“First javascript stmt.”); document.write(“Second javascript stmt.”); } </script>

  21. Elements of javascript • Javascript comments • It supports both single line and multi line comments. • // - Single line comments • /*---------*/ - Multi line comments

  22. Elements of javascript • Example :- <script type=“text/javascript” > // javascript code { /* This code will write two statement in the single line. */ document.write(“First javascript stmt.”); document.write(“Second javascript stmt.”); } </script>

  23. Variables • Basic syntax of variable declaration • Syntax:- var variablename; • Naming conventions • Variable name can start with a alphabet or underscore. ( Rest characters can be number, alphabets, dollar symbol, underscore ) • Do not user any special character other than dollar sign ($), underscore (_) • Variable names are case-sensitive. • Cannot contain blank spaces. • Cannot contain any reserved word.

  24. Variables • Once you declare a variable you can initialise the variable by assigning value to it. • Syntax:- variablename=value; • You can also declare and initialize the variable at the same time. • Syntax:- var variablename=value;

  25. Variables <html> <head> <title> javascript variables </title> </head> <body> <script type=“text/javascript”> var bookname=“web tech and applications”; var bookprice=390; document.write(“bookname is: ”,bookname); document.write(“bookprice is: ”,bookprice); </script> </body> </html>

  26. Datatypes • Javascript supports three primitive types of values and supports complex types such as arrays and objects. • Number :consists of integer and floating point numbers. • Interger literals can be represented in decimal, hexadecimal and octal form. • Floating literal consists of either a number containg a decimal point or an integer followed by an exponent.

  27. Datatypes • Boolean :consists of logical values true and false. • Javascript automatically converts logical values true and false to 1 and 0 when they are used in numeric expressions.

  28. Datatypes • String :consists of string values enclosed in single or double quotes. • Examples: var first_name=“Bhoomi”; var last_name=“Trivedi”; var phone=4123778; var bookprice=450.40;

  29. Operators • Arithmetic operators

  30. Operators • Addition • JavaScript can add together two or more numeric variables and/or numeric constants by combining them in an arithmetic expression with the arithmetic operator for addition ( + ). • The result derived from evaluating an expression can be assigned to a variable for temporary memory storage. • The following statements declare variables A and B and assign them numeric values; variable Sum is declared for storing the result of evaluating the arithmetic expression that adds these two variables. • Example :- var A = 20; var B = 10; var Sum = A + B; var Sum1 = 1 + 2; var Sum2 = A + 2 + B + 1; var Sum3 = Sum1 + Sum2;

  31. Operators • Other Arithmetic Operators

  32. Operators • Relational Operators

  33. Operators • Logical Operators

  34. If condition • Syntax:- if (conditional expression) { do this... }

  35. If – else condition • Syntax:- if (conditional expression) { do this... } else { do this... }

  36. Nested if condition • Syntax:- if (conditional expression) { if (conditional expression) { do this... } else { do this... } } else { if (conditional expression) { do this... } else { do this... } }

  37. If..else if condition • Syntax:- if (conditional expression1) { do this... } else if (conditional expression2) { do this... } else if (conditional expression3) { do this... } ... [else {do this...}]

  38. The Switch Statement • Syntax:- switch (expression) { case "value1": do this... break case "value2": do this... break ... [ default: do this... ] }

  39. Iterations • For statement:- for (exp1;exp2;exp3) { do this... } exp1:initial expression exp2:conditional expression exp3:incremental expression

  40. Iterations • while statement:- while (conditional expression) { do this... }

  41. Iterations • do …. while statement do { do this... }while (conditional expression)

  42. Array • Array is a javascript object that is capable of storing a sequence of values. • Array declaration syntax : • arrayname = new Array(); • arrayname = new Array(arraylength); • In the first syntax an of size zero is created. • In the second syntax size is explicitly specified, hence this array will hold a pre-determined set of values.

  43. Array • Example :- bookname = new Array(); • Note :- Even if array is initially created of a fixed length it may still be extended by referencing elements that are outside the current size of the array. • Example :- cust_order = new Array(); cust_order[50] = “Mobile”; cust_order[100] = “Laptop”;

  44. Array • Dense Array • It is an array that has been created with each of its elements being assigned a specific value. • They are declared and initialized at the same time. • Syntax:- arrayname = new Array(value0,value1,……..…,valuen); • Example :-

  45. Array • Array is a javascript object so it has several methods associated with it. • join() – it returns all elements of the array joined together as a single string. By default “,” is used as a separator or you can specify the character to separate the array elements. • reverse() – it reverses the order of the elements in the array.

  46. Array • Array is a javascript object so it has also properties associated with it. • length - it determines the total number of elements. • Example :- length = myarray.length; • Javascript values for array could me of any type • Example :- myarr = new Array(“one”,”two”,1,2, true, new Array(3,4) );

  47. Special Operators • Strict Equal (= = =) • Example “5” == 5 – true but “5” === 5 false • It do not perform type conversion before testing for equality. • Ternary operators (? :) • Example :- condition ? Exp1 : Exp2 • Delete operator • It is used to delete a property of an object or an element at an array index. • Example :- delete arrayname[5]

  48. Special Operators • New operator • It is used to create an instance of object type. • Example :- myarr = new Array(); • Void operator • It does not return a value • It is specially used to return a URL with no value.

  49. Functions • Functions are blocks of JS code that perform a specific task and often return a value. • Functions can be • Built in functions • User defined functions • Built in functions • Examples : • eval() • parseInt() • parseFloat()

  50. Functions • eval • It is used to convert a string expression to a numeric value. • Example :- var g_total = eval (“10 * 10 + 5”); • parseInt • It is used to convert a string value to an integer. • It returns the first integer contained in a string or “0” if the string does not begin with an integer. • Example :- var str2no = parseInt(“123xyz”); //123 var str2no =parseInt(“xyz”); //NaN

More Related