1. JavaScript CMPT 281

2. Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages

3. Announcements

4. Assignment 3 Layout with tables

5. JavaScript Resources

6. Resources

7. Why JavaScript?

8. HTML + CSS + JavaScript

9. Separation of Concerns

11. What is Javascript?

12. A scripting programming language – Cannot be run without a browser – Embedded in most web browsers A way to create web pages that respond dynamically to user action A tool for server-side development

13. Types of computer languages High-Level vs. Low Level Compiled vs. Interpreted Structured vs. Object Oriented Scripting vs. Programming

14. JavaScript High-Level vs. Low Level Compiled vs. Interpreted Structured vs. Object Oriented Scripting vs. Programming

15. History Need for ‘client side’ interaction – Code executes on the local machine – No need for network connection once script runs Developed by Netscape in 1995 – (Not related to the Java Language) Actually ECMAScript (ECMA-262) – en.wikipedia.org/wiki/ECMAScript – Several variants (JScript, Action Script…)

16. What can JavaScript do? It is a full programming language – API (application programming interface) is specific to working with browsers Restrictions: – Security-based limitations No networking No access to local file system – Limited UI toolkit and graphics (This is changing with HTML5)

17. What can JavaScript do? Benefits: – Close integration with the browser Access the webpage and all elements within Adjust or create HTML Open and resize browser windows Run animations, play sounds

18. Example: writing to the page

19. Example: loading a random image

20. Where do scripts go? In the HMTL page Like styles, can be external, internal, or inline – Use these for different situations

21. Where do scripts go? For scripts that respond to user events, and for functions: – Either external or internal – In … For scripts that write document content: – In …

22. Body example document.write("This message written by JavaScript");

23. Internal example function message() { alert("This alert was called with the onload event"); } </html

24. External example

25. How does JS access the page? DOM: Document Object Model – A framework to describe a web page (document) in a tree-like structure

26. DOM

28. Using the DOM to get at the page Hello World! x=document.getElementById("intro"); document.write(x.firstChild.nodeValue);

29. Using the DOM to get at the page Hello World! x=document.getElementById("intro"); document.write(x.firstChild.nodeValue);

30. JavaScript Basics

31. Statements Variables Events Functions Dialogs

32. Statements var a = 10; var b = 11; var c; c = a + b; alert(‘The answer is’ + c);

33. JavaScript Variables Variables are used to store data. Rules for variable names: – Variable names are case sensitive – They must begin with a letter or the underscore character strname – STRNAME (not same)

34. JavaScript Variables Variables: containers for data – All variables have Name Type – JavaScript is loosely typed Value or “null” To declare a variable – var variableName Beware of reserved words: – E.g., ‘if’, ‘Document’, ‘Math’, etc.

35. JavaScript Operators Arithmetic Operators OperatorDescriptionExampleResult +Additionx=24 y=2 x+y -Subtractionx=53 y=2 x-y *Multiplicationx=520 y=4 x*y /Division15/53 5/22,5 %Modulus (division remainder) 5%21 10%82 10%20 ++Incrementx=5x=6 x++ --Decrementx=5x=4 x--

36. JavaScript Operators Assignment Operators OperatorExampleIs The Same As =x=y +=x+=yx=x+y -=x-=yx=x-y *=x*=yx=x*y /=x/=yx=x/y %=x%=yx=x%y

37. JavaScript Operators Comparison Operators OperatorDescriptionExample ==is equal to5==8 returns false ===is equal to (checks for both value and type) x=5 y="5" x==y returns true x===y returns false !=is not equal5!=8 returns true >is greater than5>8 returns false <is less than5<8 returns true >=is greater than or equal to 5>=8 returns false <=is less than or equal to5<=8 returns true

38. JavaScript Operators Logical Operators OperatorDescriptionExample &&andx=6 y=3 (x 1) returns true ||orx=6 y=3 (x==5 || y==5) returns false !notx=6 y=3 !(x==y) returns true

39. User and Browser Events

40. Functions function dontClick() { alert("I told you not to click!"); }...

41. Dialogs alert("Hello!"); confirm("Delete files?"); var name=prompt("Your name?", "Tim Berners-Lee");

42. Coding Tips Check your statements are on one line Check your " and ' quotes match Take care with capitalisation Lay it out neatly - use tabs Use the Chrome developer tools – Or Firebug for Firefox

43. A Word About Comments JavaScript Comments – These comments must be within a script – // begins a single line comment These can start anywhere on the line, but the remainder of the line becomes a comment – /* All of your comments here… */ Everything between the start and end comment markers are comments Can be on a single line or span many… HTML Comments –

44. Ending Statements With a Semicolon? With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon (;). Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! Semicolons are required if you want to put more than one statement on a single line.

45. Example

46. JavaScript Libraries Prototypewww.prototypejs.org/ script.aculo.usscript.aculo.us/ Yahoo! User Interface Librarydeveloper.yahoo.com/yui/ Dojodojotoolkit.org/ jQueryjquery.com/ MooToolsmootools.net/

47. Reminders for this week Do the JavaScript tutorials on w3schools: – 'JS Basic‘: www.w3schools.com/js/ Assignment Reading: – Pattern group I: Designing Effective Page Layouts Pages 631-657