JavaScript CMPT 281
Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages
Announcements
Layout with tables Assignment 3
JavaScript Resources
Resources
Why JavaScript?
HTML + CSS + JavaScript
Separation of Concerns
Separation of Concerns
What is Javascript?
What is Javascript? 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
Types of computer languages High-Level vs. Low Level Compiled vs. Interpreted Structured vs. Object Oriented Scripting vs. Programming
JavaScript High-Level vs. Low Level Compiled vs. Interpreted Structured vs. Object Oriented Scripting vs. Programming
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 )
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)
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
Example: writing to the page
Example: loading a random image
Where do scripts go? In the HMTL page Like styles, can be external, internal, or inline Use these for different situations
Where do scripts go? For scripts that respond to user events, and for functions: Either external or internal In <head> </head> For scripts that write document content: In <body> </body>
Body example <html> <head> </head> <body> <script type="text/javascript"> document.write("this message written by JavaScript"); </script> </body> </html>
Internal example <html> <head> <script type="text/javascript"> function message() { alert("this alert was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html
External example <html> <head> <script type="text/javascript" src="xyz.js"></script> </head> <body> </body> </html>
How does JS access the page? DOM: Document Object Model A framework to describe a web page (document) in a tree-like structure
DOM
DOM
Using the DOM to get at the page <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue); </script> </body> </html>
Using the DOM to get at the page <html> <body> <p id="intro">hello World!</p> <script type="text/javascript"> x=document.getelementbyid("intro"); document.write(x.firstchild.nodevalue); </script> </body> </html>
JavaScript Basics
JavaScript Basics Statements Variables Events Functions Dialogs
Statements <script type="text/javascript"> var a = 10; var b = 11; var c; c = a + b; alert( The answer is + c); </script>
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)
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.
JavaScript Operators Arithmetic Operators Operator Description Example Result + Addition x=2 4 y=2 x+y - Subtraction x=5 3 y=2 x-y * Multiplication x=5 20 y=4 x*y / Division 15/5 3 % Modulus (division remainder) 5/2 2,5 5%2 1 10%8 2 10%2 0 ++ Increment x=5 x=6 x++ -- Decrement x=5 x=4 x--
JavaScript Operators Assignment Operators Operator Example Is The Same As = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y
JavaScript Operators Comparison Operators Operator Description Example == is equal to 5==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 equal 5!=8 returns true > is greater than 5>8 returns false < is less than 5<8 returns true >= is greater than or equal to 5>=8 returns false <= is less than or equal to 5<=8 returns true
JavaScript Operators Logical Operators Operator Description Example && and x=6 y=3 or x=6 (x < 10 && y > 1) returns true y=3! not x=6 (x==5 y==5) returns false y=3!(x==y) returns true
User and Browser Events
Functions <script type= text/javascript > function dontclick() { alert("i told you not to click!"); } </script>... <input type="button" value="don't Click Me!" onclick="dontclick()"/>
Dialogs alert("hello!"); confirm("delete files?"); var name=prompt("your name?", "Tim Berners-Lee");
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
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 <!-- All of your comments here -->
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.
Example
JavaScript Libraries Prototype script.aculo.us Yahoo! User Interface Library Dojo jquery MooTools www.prototypejs.org/ script.aculo.us/ developer.yahoo.com/yui/ dojotoolkit.org/ jquery.com/ mootools.net/
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