p1 - What is JavaScript - History - jQuery - HTML - Validating Web Pages - CSS - Anatomy of a Style - Software for JavaScript Programming / Editors - About This Book - This Book’s Approach to JavaScript - About the Outline - The Very Basics - Online Resources sawmac.com/js2e - Complete unfinished pages - Visit the finished pages - the URLs are mentioned in this book’s lessons (see page 32 - they are in the MM_JAVASCRIPT2E folder named complete_ and then the file name like complete_hello.html etc.)
Part One: Getting Started with JavaScript - Chapter 1-3/15
Chapter 1 - Writing Your First JavaScript Program
p21 - HTML no smarts, can't do math, figure out things, make decisions on how visitors interact. For all of this and more we need JS. HTML5 can do now some of it but browsers may not support - JS can do much more - more about HTML5 and web forms in Mark Pilgrim’s HTML5: Up and Running (O’Reilly). amazon.com shows mousing over links etc.
Introducing Programming
p22 - JS friendly language, many other not - but more complex than HTML and CSS. This book teaches to think more like programmers - fundeamental programming concepts for all languages (like ActionScript, C++ etc.) - and how to approach a programming task knowing exactly what we want to do before adding JS.
p23 - Some are struck by JS words and symbols, each language has it's own key words and set of rules, syntax, need to memorize it or use a book - a simple typo mistake or missing punctuation mark may prevent JS program from working or trigger error in browser.
! The Client Side vs. the Server Side
...
p24 - JS programming may be frustrating at first, typing errors and hard to follow. If you have tried JS and gave up, this book will help to get past the hurdles. (And if you do have programming experience, this book will teach you JavaScript’s idiosyncrasies and the unique concepts involved in programming for web browsers.) Book also about worlds most popular JS library jQuery - makes complex JS programming much easier. So with a little bit of JavaScript knowledge and the help of jQuery, you’ll be creating sophisticated, interactive websites in no time.
What’s a Computer Program?
...
! Compiled vs. Scripting Languages
p 25 - ...
How to Add JavaScript to a Page
The layout or rendering engine of browsers convertsHTML or CSS to visual display on screen. Most have also a JavaScriptinterpreter.
<script type="text/javascript"> - in <head> or <body> - if <!doctype html> (means HTML5 - and <meta charset="UTF-8">) just <script>
p26 - Web browsers let you leave out the type attribute in HTML 4.01 and XHTML 1.0 files as well — the script will run the same; however, your page won’t validate correctly without the type attribute (see the box on page 7 for more on validation).
In many cases, you’ll put the <script> tags in the page’s <head> in order to keep your JavaScript code neatly organized in one area of the web page. But can put it anywhere in html document.
There’s a JavaScript command that lets you write information directly into a web page. It’s even common to put <script> tags just below the closing
</body> tag — this approach makes sure the page is loaded and the visitor sees it before running any JavaScript.
External JavaScript Files
p27 - <script src="navigation.js"></script> in <head> - The src attribute of the <script> tag works just like the src attribute of an <img> tag, or an <a> tag’s href attribute. In other words, it points to a file either in your website or on another website (see the box on the next page).
Note: When adding the src attribute to link to an external JavaScript file, don’t add any JavaScript code between the opening and closing <script> tags. If you want to link to an external JavaScript file and add custom JavaScript code to a page, use a second set of <script> tags.
URL Types
p28 - ...
p29 - You can (and often will) attach multiple external JavaScript files.
Note: Sometimes the order in which you attach external JavaScript files matters.
Your First JavaScript Program
The best way to learn JavaScript programming is by actually programming. Need text editor, browser, and the exercise files named MM_JAVASCRIPT2E located at sawmac.com/js2e for download (advice: put a folder into your root folder, name it js, and put MM_JAVASCRIPT2E into the js folder - then open all the pages from there :-) - FO put in root (games/)js/MM_JAVASRIPT2E/chapter01/hello.html etc. - Errata for this book
p30 - The JavaScript Alert box is a quick way to grab someone’s attention. It’s one
of the simplest JavaScript commands to learn and use. Openhello.html - Alert box appears - no content on page - close Alert box - content appears :-) - Open directly from desktop and then from server :-) - both should work :-)
p31 - A web browser will run a JavaScript program the moment it reads in the JavaScript code. The alert() command appeared before the web browser displayed the web page, because the JavaScript code appeared before the HTML in the
<body> tag. Important if you want to manipulate HTML of the web page.
Note: IE doesn't like to open JS from personal HDs, fears it may harm. If IE shows message saying that IE has blocked the script click “Allow blocked content” to see the program run. This doesn't happen if program is opened from web server. Better preview pages in a different web browser (Firefox, Chrome, or Safari etc.) to avoid hitting the “Allow blocked content” button each time you view your pages.
Writing Text on a Web Page Print a message directly onto a web page using JavaScript - many ways to do so - now we use a built-in JavaScript command - document.write(). Write <script> directly in <body> of hello2.html:
Like the alert() function, document.write() is a JavaScript command that literally writes out whatever you place between the opening and closing parentheses. In this case, the HTML <p>♡ Hello world! ♡</p> is added to the page: a paragraph tag and ♡ two words ♡. Save and open hello2.html:
In this way you can display messages (like “Welcome back to the site, Dave”) after a web page has downloaded.
You find the completed files as complete_ in the same folder as the tutorial file - in the MM_JAVASCRIPT2E folder (- on this page always press Comlete 1.2 etc. to compare the complete_ file). You can download MM_JAVASCRIPT2E at sawmac.com/js2e - also see page 29.
The two scripts you just created may leave you feeling a little underwhelmed with JavaScript...or this book. Don’t worry. It’s important to start out with a full understanding of the basics. You’ll be doing some very useful and complicated things using JavaScript in just a few chapters.
Attaching an External JavaScript File
p33 - You’ll usually put JavaScript code in an external file if you want to use the same scripts on more than one web page. You may use also someone else’s JavaScript code or collections of JavaScript code called libraries. This makes it easy to do something that’s normally quite difficult to do. More on page 117 - this book uses jQuery libraries.
Now we attach an external JavaScript file to a page, and write a short program that does some amazing things:
This code links a file named jquery-1.6.3.min.js, which is contained in a folder named _js, to this web page. When a web browser loads this web page, it also downloads the jquery-1.6.3.min.js JavaScript file and runs the code inside it.
Note: It’s common to include a version number in the name of a JavaScript file. In this example, the filename is jquery-1.6.3.min.js. The 1.6.3 indicates the version 1.6.3 of jQuery. The min part means that the file is minimized - which makes the file smaller so that it downloads faster.
It is a good habit to always write the opening and the ending tag and then fill in the content inbetween. Write under the last line:
Explanation page 169 - this line takes advantage of the programming that’s inside the jquery-1.6.3.min.js file to make sure that the browser executes the next line of code at the right time. The second line makes the page’s content first disappear and then slowly fade into view over the course of 3 seconds (or 3000 milliseconds). The third line closes up the JavaScript code, much as a closing </script> tag indicates the end of a JavaScript program.
Note: If you upload fadeIn, and Internet Explorer doesn’t seem to do anything, click the “Enable blocked content” box that appears at the bottom of the page (see the Note on page 31).
As you can see, with jQuery you’ll be able to create sophisticated, interactive websites without being a programming wizard yourself.
The next three chapters will cover the very basics of JavaScript - the fundamental concepts and syntax that make up the language.
Tracking Down Errors
p34 - Figuring out why browsers don't react on JavaScript programming is part of the game.
p35 - Most browsers are set up to ignore JS errors - mostly not to interrupt viewing the page. Many ways to track errors. Advanced debugging chapter 15 - most basic method is consulting your browser - they keep track of errors and record them in error console - shows in which line error occurred in and error description - helps weeding out basic typo mistakes - any browser has console. Now we will learn how to turn on JS in all major browsers. JS Consoles - Firefox IE Chrome Safari.
...
Now have some fun :-) - 1
Chapter 2 - The Grammar of JavaScript
p41 - We must learn like new language - words, punctuation, set of rules, grammer of JS - this chapter covers concepts that all JS programs rely on - introduces fundamentals for beginners - basics (but crucial) topics.
Statements Statements are basic programming units, usually presenting single steps - like sentences in articles - combined they build the program. For example alert('Hello World!'); is a statement - opens alert window with message. In many cases a single line of code - each ending with a semicolon ; like a period in a sentence - makes clear that stap is over and interpreter should move on to next action.
p42 - Note: Putting semicolon is optional but should be done, makes reading easier, or it could cause error etc. Making code compact see page 465.
General process: type statement - type ; - on new line again a statement etc. until program complete.
Built-In Functions Functions are commands and get things done like verbs in sentences - like alert() or document.write() which are used for browsers - other functions for other apps like Adobe etc. - universal functions like isNaN() which checks if number or not. We identify functions because parentheses follow the function (). We can build our own functions in JS - learn more page 100.
Types of Data
p43 - The three most basic types of data are number, string, and Boolean.
Numbers
Numeric character, 5, 5.32, -43 - use operators document.write(5 + 15); - learn more page 445.
Strings
Strings are series of letters and other symbols enclosed inside of single or double quote marks. For example, ‘Welcome Hal’, and “You are here” - interpreter accepts the symbols literally, not interpreting. JS uses regular straight quote marks: " " and ' ' - not curly quotes “ ”and ‘ ’. Learn more page 425.
Putting Quotes into Strings
p44 - ‘He said, "This isn\'t fair."' Use backward slash \
Booleans True or false - more page 82.
Variables
p45 - Variables store information and can be manipulated - changed - like a basket, put things in, put out, change etc. Numbers strings booleans not.
Creating a Variable
2 steps: declaring the variable and naming it: var score; - var is keyword - pacman created by JS variables worldsbiggestpacman.com - we choose the name, but rules are:
• must begin with letter, $, and _
• can only contain letters, numbers, $, and _ - no spaces etc.
• case sensitive - score Score SCORE sCoRe etc. - uppercase and lowercase
• avoid keywords or special properties - can't name it var etc. - alert document window etc. - ends up in JS error - not all cause problems in browsers, but better steer clear of them
List of Reserved Words
JavaScript keywords
Reserved for future use
Reserved for browser
break
abstract
alert
case
boolean
blur
catch
byte
closed
continue
char
document
debugger
class
focus
default
const
frames
delete
double
history
do
enum
innerHeight
else
export
innerWidth
false
extends
length
finally
final
location
for
float
navigator
function
goto
open
if
implements
outerHeight
in
import
outerWidth
instanceof
int
parent
new
interface
screen
null
let
screenX
return
long
screenY
switch
native
statusbar
this
package
window
throw
private
true
protected
try
public
typeof
short
var
static
void
super
while
synchronized
with
throws
transient
volatile
yield
p48 - Choose names clear and meaningful and easy to read - better score than s - use underscore or captalize the first letter of each word after the first - image_path or imagePath
Using Variables
Once a variable is created, you can store any type of data that you’d like in it. To do so, you use the = sign.
var score; // variable name
score = 0; // stores 0
The equal sign = is called an assignment operator.
var firstName = 'Peter';
var lastName = 'Parker';
var age = 22;
var isSuperHero = true;
To save typing, declare multiple variables:
var x, y, z;
or save both in one JavaScript statement:
var isSuperHero=true, isAfraidOfHeights=false;
access that value simply by using the variable’s name:
alert(score);
Notice that you don’t use quotes with a variable - but use them for strings. JS interpreter treats words without quotes as either special JavaScript objects (like the alert() command) or as variable names.
Spaces, Tabs, and Carriage Returns in JavaScript
p49 - In general, JS is pretty relaxed about spaces, carriage returns, and tabs - often leave out or add spaces or carriage returns no problem - interpreters ignore it - don’t need a space on either side of an assignment operator =+-/*
var formName='signup';
var formRegistration = 'newsletter' ;
var formName = ; 'signup';
var formRegistration
=
'newsletter';
General rule of thumb is to add extra space if it makes your code easier to understand. More examples page 59 and 145. Can’t insert a carriage return inside a string; in other words, you can’t split a string over two lines in your code like this:
var name = 'Bob
Smith';
produces JavaScript error. In addition, you must put a space between keywords: varscore=0, for example, is not the same as var score=0. A space isn’t necessary between keywords and symbols like the assignment operator (=) or the semicolon that ends a statement.
Note: You should only use the var keyword once for each variable—when you first create the variable. After that, you’re free to assign new values to the variable without using var.
Working with Data Types and Variables
p50 - First step storing data in variable, then manipulate data to get new results - add a number to a score, multiply by costs, or personalize message by adding name - “Good to see you again, Igor.”. JavaScript proides various operators to modify data +-/* etc. - different types of operators for the different data types.
Basic Math
+ add - substract / divide * mutiply - Use * not x - 3*4
You can also use variables in mathematical operations. Since a variable is only a container for some other value like a number or string, using a variable is the same as using the contents of that variable.
var price = 10;
var itemsOrdered = 15;
var totalCost = price * itemsOrdered;
Only have to update the variable if for example price changes.
var price = 20;
p51 - Other ways to work with variables page 445
The Order of Operations
4 + 5 * 10 - multiplication (the * symbol) and division (the / symbol) take precedence over addition (+) and subtraction (–) - or write (4 + 5) * 10 - Any math that’s performed inside parentheses happens first. It would be clearer to write code like this: 4 + (5*10);
Arrays
p59 -
...
A Quick Object Lesson
p70 -
...
Comments
p72 -
...
Chapter 3 - Adding Logic and Control to Your Programs
p77 - ...
Part Two - Getting Started with jQuery - Chapter 4-6/15
Chapter 4 - Introducing jQuery - p117
Chapter 5 - Action/Reaction: Making Pages Come Alive with Events - p157
Chapter 6 - Animations and Effects - p185-203
p351 - Learn PHP etc. :-(((((
Vocabularies
gibberish - Gequassel, Kauderwelsch, kaudern
take precedence over s.th. - Vorrang haben
struck - angeschlagen ... erschlagen
typo - Schreibfehler, Druckfehler
unintelligible - unverständlich, unfasslich
unprecedented - beispiellos, unerhört, noch nie dagewesen
JavaScript & jQuery - the missing manual - Second Edition - David Sawyer McFarland - Sawyer McFarland Media, Inc. - sawmac.com