JavaScript

1,817
-1

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,817
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
55
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript

  1. 1. JavaScript Er. Pradip Kharbuja
  2. 2. Introduction • • • • • • JavaScript was developed by Netscape previously known as LiveScript. JavaScript is a program i.e. included in an HTML pages. JavaScript is client side scripting language. It is case sensitive. JavaScript is not Java. It is platform independent because it is interpreted and we just need to have interpreter for executing JavaScript code on any platform.
  3. 3. What JavaScript can do? • • • • • • • Add interactivity to your website Change page contents dynamically Validate user input on forms without going back to server. Can handle user events. Detect the visitor's browser and control browser Can create different animations, sliders Can create and call AJAX (Asynchronous JavaScript And XML)
  4. 4. What JavaScript can not do? • • • • • JavaScript cannot write to files on the server. JavaScript cannot access databases. JavaScript cannot read from or write to files in the client. JavaScript cannot access web pages hosted on another domain. JavaScript cannot protect your page source or images.
  5. 5. Hello World from JavaScript! <html> <head> <title>Learning JavaScript</title> <script type="text/JavaScript"> alert("Hello World from JavaScript!"); </script> </head> <body> </body> </html>
  6. 6. Hello World from JavaScript! <html> <head> <title>Learning JavaScript</title> <script type="text/JavaScript"> console.log("Hello World from JavaScript!"); </script> </head> <body> </body> </html>
  7. 7. Comments • • • • Comments in JavaScript are given three ways:// /* Single Line Comment */ Multiple Line Comments <! -// --> Html Comments. To hide it against browser that doesn’t support JavaScript
  8. 8. No JavaScript??? • to give information if browser has no JavaScript or JavaScript is disabled. • e.g.:<noscript>This Page requires JavaScript. </noscript>
  9. 9. Variables • It is used to store the values used in a program. • The value of variables can be changed during the program. • A variable name must start with an alphabet or underscore ("_"), the remaining characters can be (0-9) digits. • e.g:- Valid variable name Invalid variable name firstname first name first_name 1name boys boy*s _nikesh ( nikesh) • As JavaScript is case sensitive variable firstname or FirstName are treated as different variables.
  10. 10. Declaring Variables • Syntax:var <variable_name> = <value>; • e.g:• var i; • var a = 10; • var a, b, c; • var a = 20, b = 30, c = "JavaScript"; • x = 100;
  11. 11. Keywords • Keywords are words that have special meanings in a programming language. • We cannot use keywords to name variables or functions. • e.g.:- break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof
  12. 12. Data Types • It defines type of values that we can store in variable. • Basic JavaScript data types are: 1. Number • It consist both integer and floating point number. e.g:-4, 5, 12.12, 4.5, 65.4, etc. 2. Boolean • Boolean values are also known as logical values: - true (1) & false (0). • These are useful for signifying whether a certain condition is true or false.
  13. 13. Data Types (Contd.) 3. String • It consists of string values enclosed in single or double quotes. • e.g. "Khwopa", "25", 'pradip', etc.  E.g. var a = 10, b = false, c = "Nepal"; console.log(a); console.log(b); console.log(c);
  14. 14. JavaScript - a loosely typed language.  We can declare a variable but do not need to specify the type of variable.  The data types are automatically converted during the execution of the program. • e.g.:- var a; a = 2; //Here a is integer number. a = "Ram"; //Here a is string. a = 5.382; //Here a is floating point number. a = true; //Here a is boolean. console.log(typeof(a));
  15. 15. Operators 1. String Operator  + 2. Arithmetic Operator  + - * / % ++ *= /= %= 3. Assignment Operator  = += -= --
  16. 16. Operators (Contd.) 4. Comparison Operator  == != > < >= <= 5. Logical Operator  || && ! 6. Conditional Operator • It assigns value based on some specific condition. ===
  17. 17. Conditional Operator Example <script type="text/javascript"> var a=1; var b=8; var c; c=(a>b)?"A is greater":"B is greater"; console.log(c); </script>
  18. 18. Dialog Box • 3 types of dialog boxes. 1. Alert Box • to display information Syntax : alert(message); example : alert ("Welcome to my homepage!");
  19. 19. Dialog Box - 2 2. Confirm Box • It can evaluate value based on a decision made by the user. • The confirm box includes both OK and Cancel buttons. • This returns a Boolean value Syntax : confirm ("Message"); Example : confirm("OK to continue?");
  20. 20. Dialog Box - 3 • Confirm Box Example var reply = confirm("OK to continue?"); var temp=(reply==true)?"OK":"Cancel"; console.log("You clicked "+ temp);
  21. 21. Dialog Box - 4 3. Prompt Box • We can use this box to receive input from the user. • It returns the value of the input field. Syntax : prompt ("Message","Defaultvalue"); Example : var answer = prompt("What is your name?", "David"); console.log("Your name is "+ answer);
  22. 22. Task • Write javascript code to take 2 input from user using prompt(), sum them and show the result.  Answer var a, b, sum; a = prompt("Enter value for a:",0); b = prompt("Enter value for b:",0); sum = a + b; console.log("Result is : " + sum);
  23. 23. Conditional Statements • • • • if statement if...else statement if...else if....else statement switch statement Task Write different programs to demonstrate above statements.
  24. 24. Loop Statements • for loop. • while loop. • do....while loop. Task Write different programs to demonstrate above statements.
  25. 25. Array • An array is a special variable, which can hold more than one value, at a time under the same name. • Creating an Array • An array can be defined in three ways. 1. var myCars = new Array( ); // regular array (add an optional integer argument to array size) myCars[0] = "Saab"; myCars[1] = "Volvo"; myCars[2] = "BMW"; 2. var myCars = new Array("Saab","Volvo","BMW"); 3. var myCars = ["Saab","Volvo","BMW"]; // condensed array // literal array
  26. 26. Array - 2 • Access an Array • You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0. • e.g. myCars[0], myCars[1], etc. • Example : var myCars = new Array("Saab", "Volvo", "BMW"); for (var i = 0; i < 3; i++) { console.log(myCars[i]); }
  27. 27. Function 1. Function Definition Syntax:function function_name (parameter 1, parameter 2,........) { //Blocks of codes } 2. Function Call Syntax:function_name (parameter 1, parameter 2,........);
  28. 28. Function Example function sum (a,b) { var c = a + b; console.log(c); } sum(20, 30); sum(-2, 30); sum(1000, 2000);
  29. 29. Local and Global Variable • Local Variable  Variable i.e. declared within function  has scope within the function • Global Variable  Variable that is declared outside the function  has scope throughout the program.
  30. 30. Local and Global Variable Example var full_name = "John Smith"; //global variable function showName() { var age = 20; //local variable console.log("Full name = " + full_name); console.log("Age = " + age); } showName( ); console.log("Full name = " + full_name); console.log("Age = " + age);
  31. 31. External JavaScript • Linking external JavaScript file • File extension "js" <script type="text/javascript" src="script.js"></script> Task What are the advantages of using external JavaScript?
  32. 32. Document Object Model (DOM) • It is an API which provides a platform where programming languages can talk to HTML & XML. • The way that document content is accessed and modified is called the Document Object Model, or DOM. • The document object is used to access and modify the document content • eg. document.bgColor = "red"; console.log(document.width); console.log(document.height);
  33. 33. Document Object • When an HTML document is loaded into a web browser, it becomes a document object. 1. forms object 2. images object 3. links object document forms images links
  34. 34. Browser Object Model (BOM) window document forms images history links location navigator screen
  35. 35. Events 1. 2. 3. 4. 5. 6. 7. onClick onDblClick onFocus onBlur onChange onLoad onUnLoad 8. onSelect 9. onSubmit 10. onReset 11. onMouseOver 12. onKeyDown 13. onKeyUp 14. onKeyPress
  36. 36. Manipulating HTML • We can modify HTML elements using JavaScript’s DOM • getElementById is the most useful to access the HTML elements • Example : <p id="test"> </p> <script type="text/javascript"> document.getElementById("test").innerHTML = "Hello world!"; </script>
  37. 37. Tasks • An HTML page contains a paragraph with id result and a button with text Click Me!. When button is clicked, the content of paragraph should be changed to Hello EveryBody!. • An HTML page contains two textboxes and one div for result. When number is typed the sum should be automatically calculated and shown in result div. [Hint : User onKeyUp event]
  38. 38. Contact Me college.pradip@gmail.com http://www.pradipkharbuja.com.np http://www.pradipkharbuja.com.np/softwarica/dynamic-websites/

×