1 / 54

Javascript

Javascript. Outline. Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML). Introduction - Outline. Introduction What is Javacript? What Javascript can do? Examples usage of Javascript How to use Javascript?. What is Javascript.

mae
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. Outline • Introduction • Fundamental of JavaScript • Javascript events management • DOM and Dynamic HTML (DHTML)

  3. Introduction - Outline • Introduction • What is Javacript? • What Javascript can do? • Examples usage of Javascript • How to use Javascript?

  4. What is Javascript • Official name: ECMAScript maintain by ECMA organisations • ECMA 262 – official Javascript standard based on Javascript (Netscape) & Jscript (Microsoft) • Invented by Brendan Eich at Netscape (with Navigator 2.0) • Development is still in progress!

  5. What is Javascript • Java and Javascript is not the SAME – only similar to Java and C++ • The fundamentals of Javascript are similar to Java and/or C++

  6. What is Javascript? • was designed to add interactivity to HTML pages • Is a scripting language • an interpreted language (means that scripts execute without preliminary compilation) • Case-sensitive • Must be embedded into HTML • Browser dependent • Execute whenever the HTML doc. which contain the script open by browser. • Everyone can use JavaScript without purchasing a license

  7. What Javascript can do? • JavaScript gives HTML designers a programming tool • JavaScript can put dynamic text into an HTML page • JavaScript can react to events • JavaScript can read and write HTML elements • JavaScript can be used to validate data • JavaScript can be used to detect the visitor's browser • JavaScript can be used to create cookies

  8. Examples usage of Javascript -activity 01 • Limited capability application • Clocks • Mouse Trailers (an animation that follows your mouse when you surf a site) • Date Picker • The objective of Javascript is not for creating full-blown application running in a browser!

  9. Examples usage of Javascript • Event management • Form management & verification • Dynamic HTML (DHTML) • Client-Server application - AJAX

  10. How to use Javascript?– activity 02 • Inside the head tag (head section) • Within the body tag (body section) • In an external file (external script)

  11. How to use Javascript?- head section <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html>

  12. How to use Javascript?- body section <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html>

  13. How to use Javascript?- external script <html> <head> <script src="myjs.js"> </script> </head> <body> <input type="button" onclick="popup()" value="Click Me!"> </body> </html> // JavaScript Document (myjs.js) function popup() { alert("Hello World") }

  14. How to use Javascript? • All code inside head tag (except in function) will be executed first before the html <body> load • Put global variables in the <head> section script • Use document.write/ln to send html output • Use window.prompt to get user input

  15. Use in alert box

  16. Debugging Errors: Activities 03

  17. Simple JS application – input/output – activity 4

  18. Javascript Fundamental • A light Java/C++ • All other things are more or less the same: • Keyword, variables • Operator • Conditional statement • Looping etc. • Case sensitive • No strong typing in JS for variable

  19. Javascript Variables – activity 5 • Variables name – case sensitive • No typing! • Can change type during execution • Activity 05 - a • Use double qoute for character and string variable • Cannot use reserve word for variable name!

  20. OUTPUT: 10 rosely 25

  21. JS – Reserve Word

  22. Javascript variables operation • Arithmetic operations – same as Java/C++ • + operators is overloaded, can be used for string • Number + string (or vice versa), result string • Activity 05 - b • A = 2 + 5 (result 7) • A = 2 + “5” (result 25) • A = A + 2 (result 252)

  23. OUTPUT: 2 25 252

  24. JS Operators

  25. JS Operators

  26. Javascript – Conditional expressions – activity 06 • If else, switch statement – same as C++/Java • Boolean • Value 0, false = false • Value 1, true = true • String comparison, use the quote! • if (password == “007”) • Check the example!

  27. Javascript – Conditional expressions • Special conditional operator • variablename=(condition)?value1:value2  • If true value1 assigned else value2 assigned to variablename greeting = (visitor == "PRES") ? "Dear President “ : "Dear ";

  28. Javascript – Loop – Activity 7 • for loop, while loop – same as C++/Java • Use break statement to exit loop • JavaScript For...In Statement • used to loop (iterate) through the elements of an array or through the properties of an object. • var mycars = new Array(); • for (x in mycars) • document.write(mycars[x] + "<br />"); • Activity 07

  29. Javascript Array– activity 08 (.1, .2, .3) • Array is a built-in object in JS • http://www.w3schools.com/jsref/jsref_obj_array.asp • Means have methods and properties • Important properties: • length (total elements) • For traversing array elements • Example method: • sort() : sorting array elements • join() : combine all array elements into a string

  30. Javascript Array - creating var a = new Array(12); var b = new Array(); var c = new Array(12,10,11); var d = [12,10,11]; // same as c var e = [1,,,10]; // 4 elements array, only first & last element initialized

  31. A[0] 10 A[1] 20 A[2] Ali A[3] 2.34 Javascript array: inserting values var A =new Array(); A[0]= 10; A[1]= 20; A[2]=“Ali”; A[3]=2.34; Result:

  32. JS Array: creating and accessing

  33. JS Array: sort method

  34. Javascript Array - Multidimensional– activity 08.4 • Technically, JavaScript doesn't support multi-dimensional arrays • Because array is an object, you can put object inside of another object, so emulating a multi dimensional array • So it is possible to have a different dimension (column) for each row!

  35. Javascript Array - Multidimensional • var myarray=new Array(3) • Create a multidimensional array

  36. Javascript Array - Multidimensional

  37. Javascript Array - Multidimensional

  38. Javascript Array - Multidimensional

  39. Javascript Array - Multidimensional

  40. JS Array: Associative- Activity 08.5 • Using a similar access technique to hash function • In this case, the index of an array is using a word or key instead of number. • This is where For In is use instead of For Loop

  41. Javascript Function – Activity 9 • Functions in Javascript behave similar to numerous programming languages (C, C++, PHP, etc). • Put in head section or external • Variables inside a function is local • Use return to return value and exiting the function (return without value) without finishing

  42. Javascript Functions Involves two steps: • Define: to define what processes should be taken • Call/Invoke: to execute the functions Syntax of function definition: function function_name (param1, param2, .., param_n) //parameters are optional { //function’s code goes here return value_or_object; //optional }

  43. Javascript function – activity 09

  44. Javascript Object – activity 10 • Objects in Javascript can be created directly using variable declaration

  45. JS object: directly instantiated var empty = {}; // An object with no properties var point = { x:0, y:0 }; var circle = { x:point.x, y:point.y+1, radius:2 }; var homer = { "name": "Homer Simpson", "age": 34, "married": true, "occupation": "plant operator", 'email': "homer@example.com" };

  46. JS Object: directly instantiated using var

  47. JS: Built-in objects – Activity 11 • Date • http://www.w3schools.com/js/js_obj_math.asp • String • http://www.w3schools.com/js/js_obj_string.asp • Math • http://www.w3schools.com/js/js_obj_date.asp

  48. Javascript – Window & BoxesActivity 12 • Alert message • Prompt (getting input) • Confirm message • Redirection

  49. JS: Alert • Creating message box • No input, only Ok button to continue • Useful for debugging • alert (“hello world”); • var name = “rosely”; • alert (“hello ” + name); • var age = 17; • alert (“your age is: “ + age);

  50. JS: Prompt • Getting input from user • name = window.prompt ("Please enter your name", “polan");

More Related