Your SlideShare is downloading. ×
0
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Missing Manual, Ch. 1

2,017

Published on

JavaScript Missing Manual, Ch. 1

JavaScript Missing Manual, Ch. 1

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

  • Be the first to like this

No Downloads
Views
Total Views
2,017
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript: The Missing Manual Chapter 1: Writing Your First JavaScript Program Author: David S. McFarland | Publisher: O’Reilly Copyright 2010
  • 2. Introducing Programming <ul><li>JavaScript is can be used to add intelligence to your Web pages </li></ul><ul><li>JavaScript lets you make your Web pages more engaging and effective </li></ul>Copyright 2010
  • 3. Introducing Programming <ul><li>As programming languages go, JavaScript is relatively friendly to nonprogrammers </li></ul><ul><li>Still, JavaScript is more complex than either HTML or CSS and tends to be less intuitive to Web designers </li></ul>Copyright 2010
  • 4. Introducing Programming <ul><li>Learning JavaScript’s syntax is like learning the vocabulary and grammar of another language </li></ul>Copyright 2010
  • 5. Client Side vs. Server Side <ul><li>JavaScript is a client-side language </li></ul><ul><ul><li>it works inside of a Web browser (the client) </li></ul></ul><ul><ul><li>you can view the source code along with HTML and CSS </li></ul></ul><ul><li>PHP (and other languages) are server-side </li></ul><ul><ul><li>only works on the Web server </li></ul></ul><ul><ul><li>cannot view the source code </li></ul></ul>Copyright 2010
  • 6. What is a Computer Program? <ul><li>A computer program is a series of steps completed in a designated order </li></ul><ul><li>When you add JavaScript to a page you are writing a computer program </li></ul><ul><ul><li>actually, a lite version of a program called a script </li></ul></ul>Copyright 2010
  • 7. Compiled vs. Scripting Languages <ul><li>Compiling is the process of turning code a programmer writes into instructions that a computer can understand </li></ul><ul><li>A scripting language, like JavaScript, uses an interpreter built into all Web browsers </li></ul><ul><ul><li>an interpreter converts the script into something a computer can understand </li></ul></ul>Copyright 2010
  • 8. How to Add JavaScript to a Page <ul><li>Anatomy of a Web browser: </li></ul><ul><li>layout or rendering engine </li></ul><ul><ul><li>the part of a Web browser that understands how to process HTML and CSS </li></ul></ul><ul><li>interpreter </li></ul><ul><ul><li>the part of a Web browser that understands how to process JavaScript </li></ul></ul>Copyright 2010
  • 9. How to Add JavaScript to a Page <ul><li>The <script> tag is regular old HTML </li></ul><ul><ul><li>it acts like a switch </li></ul></ul><ul><ul><li>use the interpreter, not the rendering engine, to process the code that follows </li></ul></ul><ul><ul><li>the </script> tag is the signal to switch back to using the rendering engine to process HTML and CSS </li></ul></ul>Copyright 2010
  • 10. How to Add JavaScript to a Page <ul><li>General guidelines #1: </li></ul><ul><ul><li><script> placed inside <head> most of the time </li></ul></ul><ul><ul><li>type attribute needed for page validation </li></ul></ul><ul><ul><li><script> tags are placed after stylesheet information </li></ul></ul><ul><ul><ul><li><link /> </li></ul></ul></ul><ul><ul><ul><li><style></style> </li></ul></ul></ul><ul><ul><ul><li><script type=“text/javascript”></script> </li></ul></ul></ul>Copyright 2010
  • 11. How to Add JavaScript to a Page <ul><li>My First Internal JavaScript Page </li></ul><ul><ul><li>. . . </li></ul></ul><ul><ul><li><title>My First Internal JavaScript Page</title> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul></ul><ul><ul><li>alert(&quot;My first internal JavaScript page&quot;); </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li>. . . first_internal.html </li></ul></ul>Copyright 2010
  • 12. How to Add JavaScript to a Page <ul><li>General guidelines #2: </li></ul><ul><ul><li>When creating an external JavaScript file: </li></ul></ul><ul><ul><ul><li>cut out all of the code BETWEEN the <script> tags, but NOT INCLUDING the <script> tags </li></ul></ul></ul><ul><ul><ul><li>create a new text file with a .js extension </li></ul></ul></ul><ul><ul><ul><li>use the scr attribute in the opening <script> tag to locate the external JavaScript file </li></ul></ul></ul>Copyright 2010
  • 13. External JavaScript Files <ul><li>My First External JavaScript Page </li></ul><ul><ul><li>. . . </li></ul></ul><ul><ul><li><title>My First External JavaScript Page</title> </li></ul></ul><ul><ul><li><script type=&quot;text/javascript“ src=“first_external.js”> </li></ul></ul><ul><ul><li></script> </li></ul></ul><ul><ul><li>. . . first_external.html </li></ul></ul>Copyright 2010
  • 14. How to Add JavaScript to a Page <ul><li>General guidelines #3: </li></ul><ul><ul><li>place JavaScript code in external files whenever possible </li></ul></ul><ul><ul><ul><li><link /> </li></ul></ul></ul><ul><ul><ul><li><style></style> </li></ul></ul></ul><ul><ul><ul><li><script type=“text/javascript” src=“file_name.js”> </li></ul></ul></ul><ul><ul><ul><li></script> </li></ul></ul></ul>Copyright 2010
  • 15. How to Add JavaScript to a Page <ul><li>General guidelines #4: </li></ul><ul><ul><li>place external JavaScript files in a folder (directory) called “scripts” </li></ul></ul><ul><ul><ul><li>the same way you’d place all images in an “images” directory or stylesheets in a “styles” directory </li></ul></ul></ul><ul><ul><ul><li><script type=“text/javascript” ► src=“scripts/file_name.js”></script> </li></ul></ul></ul>Copyright 2010
  • 16. URL Types <ul><li>Three types of paths </li></ul><ul><ul><li>document-relative </li></ul></ul><ul><ul><ul><ul><li>src=“scripts/first_external.js” </li></ul></ul></ul></ul><ul><ul><li>root-relative </li></ul></ul><ul><ul><ul><ul><li>src=“/scripts/first_external.js” </li></ul></ul></ul></ul><ul><ul><li>absolute </li></ul></ul><ul><ul><ul><ul><li>src=“http://gbabon.cdiaweb.com/ ► </li></ul></ul></ul></ul><ul><ul><ul><ul><li>scripts/first_external.js” </li></ul></ul></ul></ul><ul><ul><li>url_types.html </li></ul></ul>Copyright 2010
  • 17. Your First JavaScript Program <ul><li>Assignment: </li></ul><ul><ul><li>Download file 1.1.html </li></ul></ul><ul><ul><li>Add a JavaScript alert message that greets the visitor with “Hello world!” </li></ul></ul><ul><ul><li> 1.1.html </li></ul></ul><ul><ul><li>complete_1.1.html </li></ul></ul>Copyright 2010
  • 18. Writing Text on a Page <ul><li>Walk through: </li></ul><ul><ul><li>download file 1.2.html </li></ul></ul><ul><ul><li>add a <script> tag set in the <body> below the <h1> tag set </li></ul></ul><ul><ul><li>add the following command: </li></ul></ul><ul><ul><ul><li>document.write(‘<p>Hello world!</p>’); </li></ul></ul></ul><ul><ul><li> 1.2.html </li></ul></ul><ul><ul><li>complete_1.2.html </li></ul></ul>Copyright 2010
  • 19. Writing Text on a Page <ul><li>General guidelines #5: </li></ul><ul><ul><li><script> placed inside <head> most of the time </li></ul></ul><ul><ul><li>Exceptions: </li></ul></ul><ul><ul><ul><li>when using a document.write statement to display an element on the page </li></ul></ul></ul>Copyright 2010
  • 20. Attaching an External JavaScript File <ul><li>Brief introduction to libraries </li></ul><ul><ul><li>a library is a collection of JavaScript code, frequently written by others, and made available for you to use free of charge </li></ul></ul><ul><ul><li>one increasing popular JavaScript library is called jQuery </li></ul></ul>Copyright 2010
  • 21. Attaching an External JavaScript File <ul><li>Walk through (jQuery striped tables): </li></ul><ul><ul><li>download file 1.3.html </li></ul></ul><ul><ul><li>add <script> tags linking to jquery.js file </li></ul></ul><ul><ul><li>add second set of <script> tags </li></ul></ul><ul><ul><li>continued . . . 1.3.html </li></ul></ul><ul><ul><li>complete_1.3.html </li></ul></ul>Copyright 2010
  • 22. Attaching an External JavaScript File <ul><ul><li>add the following jQuery code: </li></ul></ul><ul><ul><li>$(document).ready(function() { </li></ul></ul><ul><ul><li> $(‘table.striped tr:even’).addClass(‘even’); </li></ul></ul><ul><ul><li>}); </li></ul></ul><ul><ul><li> 1.3.html </li></ul></ul><ul><ul><li>complete_1.3.html </li></ul></ul>Copyright 2010
  • 23. Tracking Down Errors <ul><li>Most Web browsers are set up to silently ignore JavaScript errors </li></ul><ul><ul><li>your code simply doesn’t work! </li></ul></ul><ul><ul><li>no error message to bother the visitor </li></ul></ul><ul><li>Most Web browsers keep track of errors and record them in a separate window called a JavaScript console </li></ul>Copyright 2010
  • 24. JavaScript Consoles <ul><li>Access the JavaScript console in Firefox: </li></ul><ul><li>Tools -> Error Console </li></ul><ul><li>Access the JavaScript console in Safari: </li></ul><ul><ul><li>Safari -> Preferences -> Advanced -> </li></ul></ul><ul><ul><ul><ul><li>Show Develop menu in menu bar </li></ul></ul></ul></ul><ul><li>Develop -> Show error console </li></ul>Copyright 2010
  • 25. JavaScript Consoles <ul><li>Access the JavaScript console in Internet Explorer: </li></ul><ul><ul><li>type in the URL getfirefox.com! </li></ul></ul><ul><li>Typical errors to look for: </li></ul><ul><ul><li>misspellings </li></ul></ul><ul><ul><li>uneven pairs of ( ), { }, ‘ ’, “ ”, etc. </li></ul></ul>Copyright 2010
  • 26. JavaScript <ul><li>blah, blah, blah . . . </li></ul>Copyright 2010

×