Embed Size (px)
DESCRIPTION
JavaScript Missing Manual, Ch. 1
Citation preview
JavaScript:JavaScript:The Missing The Missing ManualManual
Chapter 1:Chapter 1:Writing Your First JavaScript ProgramWriting Your First JavaScript Program
Author: David S. McFarland | Publisher: O’Reilly Copyright 2010
Introducing ProgrammingIntroducing Programming
JavaScript is can be used to add JavaScript is can be used to add intelligence to your Web pagesintelligence to your Web pages
JavaScript lets you make your Web pages JavaScript lets you make your Web pages more engaging and effectivemore engaging and effective
Copyright 2010
Introducing ProgrammingIntroducing Programming
As programming languages go, JavaScript As programming languages go, JavaScript is relatively friendly to nonprogrammersis relatively friendly to nonprogrammers
Still, JavaScript is more complex than Still, JavaScript is more complex than either HTML or CSS and tends to be less either HTML or CSS and tends to be less intuitive to Web designersintuitive to Web designers
Copyright 2010
Introducing ProgrammingIntroducing Programming
Learning JavaScript’s syntax is like Learning JavaScript’s syntax is like learning the vocabulary and grammar of learning the vocabulary and grammar of another languageanother language
Copyright 2010
Client Side vs. Server Client Side vs. Server SideSide
JavaScript is a JavaScript is a client-sideclient-side language language it works inside of a Web browser (the client)it works inside of a Web browser (the client) you can view the source code along with you can view the source code along with
HTML and CSSHTML and CSS
PHP (and other languages) are PHP (and other languages) are server-sideserver-side only works on the Web serveronly works on the Web server cannot view the source codecannot view the source code
Copyright 2010
What is a ComputerWhat is a ComputerProgram?Program?
A computer program is a series of steps A computer program is a series of steps completed in a designated ordercompleted in a designated order
When you add JavaScript to a page you When you add JavaScript to a page you are writing a computer programare writing a computer program actually, a lite version of a program called a actually, a lite version of a program called a
scriptscript
Copyright 2010
Compiled vs. ScriptingCompiled vs. ScriptingLanguagesLanguages
CompilingCompiling is the process of turning code a is the process of turning code a programmer writes into instructions that a programmer writes into instructions that a computer can understandcomputer can understand
A scripting language, like JavaScript, uses A scripting language, like JavaScript, uses an an interpreterinterpreter built into all Web browsers built into all Web browsers an an interpreterinterpreter converts the script into converts the script into
something a computer can understandsomething a computer can understand
Copyright 2010
How to Add JavaScriptHow to Add JavaScriptto a Pageto a Page
Anatomy of a Web browser:Anatomy of a Web browser:
layoutlayout or or renderingrendering engineengine the part of a Web browser that understands the part of a Web browser that understands
how to process HTML and CSShow to process HTML and CSS
interpreterinterpreter the part of a Web browser that understands the part of a Web browser that understands
how to process JavaScripthow to process JavaScript
Copyright 2010
How to Add JavaScriptHow to Add JavaScriptto a Pageto a Page
The The <script><script> tag is regular old HTML tag is regular old HTML it acts like a switchit acts like a switch use the interpreter, not the rendering engine, use the interpreter, not the rendering engine,
to process the code that followsto process the code that follows the the </script></script> tag is the signal to switch back tag is the signal to switch back
to using the rendering engine to process to using the rendering engine to process HTML and CSSHTML and CSS
Copyright 2010
How to Add JavaScriptHow to Add JavaScriptto a Pageto a Page
General guidelines #1:General guidelines #1: <script> placed inside <head> most of the time<script> placed inside <head> most of the time typetype attribute needed for page validation attribute needed for page validation <script> tags are placed after stylesheet <script> tags are placed after stylesheet
informationinformation1.1. <link /><link />
2.2. <style></style><style></style>
3.3. <script type=“text/javascript”></script><script type=“text/javascript”></script>
Copyright 2010
How to Add JavaScriptHow to Add JavaScriptto a Pageto a Page
My First Internal JavaScript PageMy First Internal JavaScript Page
. . .. . .<title>My First Internal JavaScript Page</title><title>My First Internal JavaScript Page</title>
<script type="text/javascript"><script type="text/javascript">
alert("My first internal JavaScript page");alert("My first internal JavaScript page");
</script></script>
. . .. . . first_internal.htmlfirst_internal.html
Copyright 2010
How to Add JavaScriptHow to Add JavaScriptto a Pageto a Page
General guidelines #2:General guidelines #2: When creating an external JavaScript file:When creating an external JavaScript file:
1.1. cut out all of the code cut out all of the code BETWEENBETWEEN the <script> the <script> tags, but tags, but NOT INCLUDINGNOT INCLUDING the <script> tags the <script> tags
2.2. create a new text file with a .js extensioncreate a new text file with a .js extension
3.3. use the use the scrscr attribute in the opening <script> tag attribute in the opening <script> tag to locate the external JavaScript fileto locate the external JavaScript file
Copyright 2010
External JavaScript FilesExternal JavaScript Files
My First External JavaScript PageMy First External JavaScript Page
. . .. . .<title>My First External JavaScript Page</title><title>My First External JavaScript Page</title>
<script type="text/javascript“ src=“first_external.js”><script type="text/javascript“ src=“first_external.js”>
</script></script>
. . .. . .first_external.htmlfirst_external.html
Copyright 2010
How to Add JavaScriptHow to Add JavaScriptto a Pageto a Page
General guidelines #3:General guidelines #3: place JavaScript code in external files place JavaScript code in external files
whenever possiblewhenever possible1.1. <link /><link />
2.2. <style></style><style></style>
3.3. <script type=“text/javascript” src=“file_name.js”><script type=“text/javascript” src=“file_name.js”>
</script></script>
Copyright 2010
How to Add JavaScriptHow to Add JavaScriptto a Pageto a Page
General guidelines #4:General guidelines #4: place external JavaScript files in a folder place external JavaScript files in a folder
(directory) called “scripts”(directory) called “scripts” the same way you’d place all images in an the same way you’d place all images in an
“images” directory or stylesheets in a “styles” “images” directory or stylesheets in a “styles” directorydirectory
<script type=“text/javascript” <script type=“text/javascript” ► ► src=“scripts/file_name.js”></script>src=“scripts/file_name.js”></script>
Copyright 2010
URL TypesURL TypesThree types of pathsThree types of paths
document-relativedocument-relativesrc=“scripts/first_external.js”src=“scripts/first_external.js”
root-relativeroot-relativesrc=“/scripts/first_external.js”src=“/scripts/first_external.js”
absoluteabsolutesrc=“http://gbabon.cdiaweb.com/ src=“http://gbabon.cdiaweb.com/ ►►
scripts/first_external.js”scripts/first_external.js”
url_types.htmlurl_types.html
Copyright 2010
Your First JavaScript Your First JavaScript ProgramProgram
Assignment:Assignment: Download file 1.1.htmlDownload file 1.1.html Add a JavaScript alert message that greets Add a JavaScript alert message that greets
the visitor with “Hello world!”the visitor with “Hello world!”
1.1.html1.1.html
complete_1.1.htmlcomplete_1.1.html
Copyright 2010
Writing Text on a PageWriting Text on a PageWalk through:Walk through:
download file 1.2.htmldownload file 1.2.html add a <script> tag set in the <body> below the add a <script> tag set in the <body> below the
<h1> tag set<h1> tag set add the following command:add the following command:
document.write(‘<p>Hello world!</p>’);document.write(‘<p>Hello world!</p>’);
1.2.html1.2.htmlcomplete_1.2.htmlcomplete_1.2.html
Copyright 2010
Writing Text on a PageWriting Text on a Page
General guidelines #5:General guidelines #5: <script> placed inside <head> most of the <script> placed inside <head> most of the
timetime Exceptions:Exceptions:
when using a when using a document.writedocument.write statement to statement to display an element on the pagedisplay an element on the page
Copyright 2010
Attaching an External Attaching an External JavaScript FileJavaScript File
Brief introduction to Brief introduction to librarieslibraries a a librarylibrary is a collection of JavaScript code, is a collection of JavaScript code,
frequently written by others, and made frequently written by others, and made available for you to use free of chargeavailable for you to use free of charge
one increasing popular JavaScript library is one increasing popular JavaScript library is called called jQueryjQuery
Copyright 2010
Attaching an External Attaching an External JavaScript FileJavaScript File
Walk through (jQuery striped tables):Walk through (jQuery striped tables): download file 1.3.htmldownload file 1.3.html add <script> tags linking to jquery.js fileadd <script> tags linking to jquery.js file add second set of <script> tagsadd second set of <script> tags
continued . . .continued . . . 1.3.html 1.3.html
complete_1.3.htmlcomplete_1.3.html
Copyright 2010
Attaching an External Attaching an External JavaScript FileJavaScript File
add the following jQuery code:add the following jQuery code:
$(document).ready(function() {$(document).ready(function() {
$(‘table.striped tr:even’).addClass(‘even’);$(‘table.striped tr:even’).addClass(‘even’);
});});
1.3.html1.3.html
complete_1.3.htmlcomplete_1.3.html
Copyright 2010
Tracking Down ErrorsTracking Down Errors
Most Web browsers are set up to silently Most Web browsers are set up to silently ignore JavaScript errorsignore JavaScript errors your code simply doesn’t work!your code simply doesn’t work! no error message to bother the visitorno error message to bother the visitor
Most Web browsers keep track of errors Most Web browsers keep track of errors and record them in a separate window and record them in a separate window called a called a JavaScript consoleJavaScript console
Copyright 2010
JavaScript JavaScript ConsolesConsoles
Access the JavaScript console in Firefox:Access the JavaScript console in Firefox:
Tools Tools → Error Console→ Error Console
Access the JavaScript console in Safari:Access the JavaScript console in Safari:Safari → Preferences → Advanced →Safari → Preferences → Advanced →
Show Develop menu in menu barShow Develop menu in menu bar
Develop → Show error consoleDevelop → Show error console
Copyright 2010
JavaScript JavaScript ConsolesConsoles
Access the JavaScript console in Internet Access the JavaScript console in Internet Explorer:Explorer: type in the URL getfirefox.com!type in the URL getfirefox.com!
Typical errors to look for:Typical errors to look for: misspellingsmisspellings uneven pairs of ( ), { }, ‘ ’, “ ”, etc.uneven pairs of ( ), { }, ‘ ’, “ ”, etc.
Copyright 2010
JavaScriptJavaScript blah, blah, blah . . .blah, blah, blah . . .
Copyright 2010
