\n\n\n
\nslide23. Internal example \n\n\n\n\n\n\n\nslide24. External example \n\n \n\n\n\n
\nslide25. How does JS access the page? DOM: Document Object Model\nA framework to describe a web page (document) in a tree-like structure
\nslide26. DOM
\nslide27. DOM
\nslide28. Using the DOM to get at the page \u000b\u000b\u000b

Hello World!

\u000b\u000b\u000b\u000b\u000b
\nslide29. Using the DOM to get at the page \u000b\u000b\u000b

Hello World!

\u000b\u000b\u000b\u000b\u000b
\nslide30. JavaScript Basics
\nslide31. JavaScript Basics Statements\nVariables\nEvents\nFunctions\nDialogs
\nslide32. Statements
\nslide33. JavaScript Variables Variables are used to store data. \nRules for variable names:\nVariable names are case sensitive \nThey must begin with a letter or the underscore character \nstrname – STRNAME (not same)
\nslide34. JavaScript Variables Variables: containers for data\nAll variables have \nName\nType – JavaScript is loosely typed\nValue or “null”\nTo declare a variable\nvar variableName\nBeware of reserved words:\nE.g., ‘if’, ‘Document’, ‘Math’, etc.
\nslide35. JavaScript Operators Arithmetic Operators
\nslide36. JavaScript Operators Assignment Operators
\nslide37. JavaScript Operators Comparison Operators
\nslide38. JavaScript Operators Logical Operators
\nslide39. User and Browser Events
\nslide40. Functions \n...\n\n
\nslide41. Dialogs alert(\"Hello!\");\nconfirm(\"Delete files?\");\nvar name=prompt(\"Your name?\", \"Tim Berners-Lee\");
\nslide42. Coding Tips Check your statements are on one line\nCheck your \" and ' quotes match\nTake care with capitalisation\nLay it out neatly - use tabs\nUse the Chrome developer tools\nOr Firebug for Firefox
\nslide43. A Word About Comments JavaScript Comments\nThese comments must be within a script\n// begins a single line comment\nThese can start anywhere on the line, but the remainder of the line bec" }

JavaScript CMPT 281 Outline Introduction to

debby-jeon
Published  . 0 views
↓ Download
JavaScript CMPT 281 Outline Introduction to
1 / 1
JavaScript CMPT 281 Outline Introduction to - slide 1 of 47 JavaScript CMPT 281 Outline Introduction to - slide 2 of 47 JavaScript CMPT 281 Outline Introduction to - slide 3 of 47 JavaScript CMPT 281 Outline Introduction to - slide 4 of 47 JavaScript CMPT 281 Outline Introduction to - slide 5 of 47 JavaScript CMPT 281 Outline Introduction to - slide 6 of 47 JavaScript CMPT 281 Outline Introduction to - slide 7 of 47 JavaScript CMPT 281 Outline Introduction to - slide 8 of 47 JavaScript CMPT 281 Outline Introduction to - slide 9 of 47 JavaScript CMPT 281 Outline Introduction to - slide 10 of 47 JavaScript CMPT 281 Outline Introduction to - slide 11 of 47 JavaScript CMPT 281 Outline Introduction to - slide 12 of 47 JavaScript CMPT 281 Outline Introduction to - slide 13 of 47 JavaScript CMPT 281 Outline Introduction to - slide 14 of 47 JavaScript CMPT 281 Outline Introduction to - slide 15 of 47 JavaScript CMPT 281 Outline Introduction to - slide 16 of 47 JavaScript CMPT 281 Outline Introduction to - slide 17 of 47 JavaScript CMPT 281 Outline Introduction to - slide 18 of 47 JavaScript CMPT 281 Outline Introduction to - slide 19 of 47 JavaScript CMPT 281 Outline Introduction to - slide 20 of 47 JavaScript CMPT 281 Outline Introduction to - slide 21 of 47 JavaScript CMPT 281 Outline Introduction to - slide 22 of 47 JavaScript CMPT 281 Outline Introduction to - slide 23 of 47 JavaScript CMPT 281 Outline Introduction to - slide 24 of 47 JavaScript CMPT 281 Outline Introduction to - slide 25 of 47 JavaScript CMPT 281 Outline Introduction to - slide 26 of 47 JavaScript CMPT 281 Outline Introduction to - slide 27 of 47 JavaScript CMPT 281 Outline Introduction to - slide 28 of 47 JavaScript CMPT 281 Outline Introduction to - slide 29 of 47 JavaScript CMPT 281 Outline Introduction to - slide 30 of 47 JavaScript CMPT 281 Outline Introduction to - slide 31 of 47 JavaScript CMPT 281 Outline Introduction to - slide 32 of 47 JavaScript CMPT 281 Outline Introduction to - slide 33 of 47 JavaScript CMPT 281 Outline Introduction to - slide 34 of 47 JavaScript CMPT 281 Outline Introduction to - slide 35 of 47 JavaScript CMPT 281 Outline Introduction to - slide 36 of 47 JavaScript CMPT 281 Outline Introduction to - slide 37 of 47 JavaScript CMPT 281 Outline Introduction to - slide 38 of 47 JavaScript CMPT 281 Outline Introduction to - slide 39 of 47 JavaScript CMPT 281 Outline Introduction to - slide 40 of 47 JavaScript CMPT 281 Outline Introduction to - slide 41 of 47 JavaScript CMPT 281 Outline Introduction to - slide 42 of 47 JavaScript CMPT 281 Outline Introduction to - slide 43 of 47 JavaScript CMPT 281 Outline Introduction to - slide 44 of 47 JavaScript CMPT 281 Outline Introduction to - slide 45 of 47 JavaScript CMPT 281 Outline Introduction to - slide 46 of 47 JavaScript CMPT 281 Outline Introduction to - slide 47 of 47
Description: JavaScript CMPT 281 Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages Announcements Assignment 3 Layout with tables JavaScript Resources Resources Why JavaScript? HTML CSS JavaScript Separation of

Related Topics

Download Presentation

"JavaScript CMPT 281 Outline Introduction to" is the property of its rightful owner. Permission is granted to download and print the materials on this website for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentation Transcript

slide1. JavaScript CMPT 281<br>
slide2. Outline Introduction to JavaScript
Resources
What is JavaScript?
JavaScript in web pages<br>
slide3. Announcements<br>
slide4. Assignment 3 Layout with tables<br>
slide5. JavaScript Resources<br>
slide6. Resources<br>
slide7. Why JavaScript?<br>
slide8. HTML + CSS + JavaScript<br>
slide9. Separation of Concerns<br>
slide10. Separation of Concerns<br>
slide11. What is Javascript?<br>
slide12. 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<br>
slide13. Types of computer languages High-Level vs. Low Level
Compiled vs. Interpreted
Structured vs. Object Oriented
Scripting vs. Programming<br>
slide14. JavaScript High-Level vs. Low Level
Compiled vs. Interpreted
Structured vs. Object Oriented
Scripting vs. Programming<br>
slide15. 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…)<br>
slide16. 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)<br>
slide17. 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<br>
slide18. Example: writing to the page<br>
slide19. Example: loading a random image<br>
slide20. Where do scripts go? In the HMTL page
Like styles, can be external, internal, or inline
Use these for different situations<br>
slide21. 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><br>
slide22. Body example <html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("This message written by JavaScript");
</script>

</body>
</html><br>
slide23. 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<br>
slide24. External example <html>
<head>
<script type="text/javascript" src="xyz.js"></script>
</head>
<body>
</body>
</html><br>
slide25. How does JS access the page? DOM: Document Object Model
A framework to describe a web page (document) in a tree-like structure<br>
slide26. DOM<br>
slide27. DOM<br>
slide28. 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><br>
slide29. 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><br>
slide30. JavaScript Basics<br>
slide31. JavaScript Basics Statements
Variables
Events
Functions
Dialogs<br>
slide32. Statements <script type="text/javascript">

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

</script><br>
slide33. 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)<br>
slide34. 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.<br>
slide35. JavaScript Operators Arithmetic Operators<br>
slide36. JavaScript Operators Assignment Operators<br>
slide37. JavaScript Operators Comparison Operators<br>
slide38. JavaScript Operators Logical Operators<br>
slide39. User and Browser Events<br>
slide40. 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()"/><br>
slide41. Dialogs alert("Hello!");
confirm("Delete files?");
var name=prompt("Your name?", "Tim Berners-Lee");<br>
slide42. 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<br>
slide43. 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… --><br>
slide44. 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.<br>
slide45. Example<br>
slide46. JavaScript Libraries<br>
slide47. 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<br>