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.
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
What’s a Computer Program?
! Compiled vs. Scripting Languages
p 25 - ...
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).
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).
p28 - ...
<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.
In this way you can display messages (like “Welcome back to the site, Dave”) after a web page has downloaded.
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:
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.
Tracking Down Errors
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
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.
Numeric character, 5, 5.32, -43 - use operators document.write(5 + 15); - learn more page 445.
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.
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
Reserved for future use
Reserved for browser
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
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;
var isSuperHero=true, isAfraidOfHeights=false;
access that value simply by using the variable’s name:
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 formRegistration = 'newsletter' ;
var formName = ; 'signup';
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
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
+ 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);
A Quick Object Lesson
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. :-(((((
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