• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Missing Manual, Ch. 1
 

JavaScript Missing Manual, Ch. 1

on

  • 2,176 views

JavaScript Missing Manual, Ch. 1

JavaScript Missing Manual, Ch. 1

Statistics

Views

Total Views
2,176
Views on SlideShare
2,169
Embed Views
7

Actions

Likes
0
Downloads
39
Comments
0

2 Embeds 7

http://www.slideshare.net 6
http://www.techgig.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript Missing Manual, Ch. 1 JavaScript Missing Manual, Ch. 1 Presentation Transcript

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