HTML5 CSS3 JS
JavaSript Workshop <<< Back to
JavaScript & jQuery - Workshop
IDL Webdesign
JavaScript Garden
JavaScript Guide - MDN
The Definitive Guide To HTML5 - Adam Freeman
p1 - PART I - Getting Started
Chapter 1-5 Refresher about HTML CSS JS
Chapter 1 - Putting HTML in Context
p3 - History
p7 - Structure of the book - Part I (Ch 1-5) HTML CSS JS - Part II (CH 6-15) HTML elements - Part III (Ch 16-24) CSS - Part IV (Ch 25-31) DOM and JS - Part 5 (Ch 32-40) Ajax multimedia canvas - not SVG
p9 - Chapter 2 - Getting Ready
Selection of Browser (Chrome Firefox etc.) - Editor Komodo - Server - Node.js from nodejs.org version 0.4.11 - Multipart module from github.com/isaacs/multipart-js needed for Ajax chapter 32-33
Get all examples of HTML from this book from apress.com for free
*******
p13-p37 - Chapter 3 - Getting Started with HTML
HTML elements - content (text etc.) - attributes
p15 - HTML not case sensitve
<code> - I like apples and oranges.
p16 - HTML elements define the structure and meaning of your content and Cascading Style Sheets (CSS) to control the way the content is presented to the user.
CSS can override default styles of HTML.
Elements a body button code DOCTYPE head hr html input label p style table td textarea th title tr
p17 - Empty elements possible and valid <code></code> or write <code /> - combines both empty tags
Void elements have no closing tags like <hr> or write <hr /> - preferred in this book
p18 - Even if some opening or closing tags can be omitted don't do so
p19 - Attributes
*******
p38 - Chapter 4 - Getting Started with CSS
p41 - using style inline
Visit the Apress website
I like apples and oranges.
Visit the W3C website
p69 - blueprintcss.org - Download CSS Framework
*******
p70-p101 - Chapter 5 - Getting Started with JavaScript
p72 - Inline script or external script
***
JS test 5-1
document.writeln("Hello");
<<< This is the JavaScript result :-) Read the source code
Learn to Code - The Full Beginner's Guide - p1-22 - By Adam Dachis of lifehacker.com - lifehacker.com/5744113/learn-to-code-the-full-beginners-guide
Part I - Variables and Basic Data Types
p3 - Starting with Variables - "String" Number Boolean - strings always in quotes " "
Don't use reserved words
end statement line with ;
JS loosely typed - ActionScript (used in Flash) strictly typed
myVariable = "Hello world!"; - loosely typed
var myVariable:String = "Hello world!"; - strictly typed
p5 - Creating variables and using the alert() function - creates pop-up dialogue box
alert has to be followed by paranthesis () - alert has to know if something follows or it can remain empty
Try open pop-up with myNumber - myString - my Boolean
Mute script code with /* comment */
We give alert() variables because they can vary due to the user's interaction
Part II - Working With Variables
p6 - Create variable statements - create four variables and then use them to make a sentence
p7 - Pop-up: Adam ate 3 apples.
var myStatement = myName + " ate " + numberEaten + " " + foodType + ", leaving " + (numberTotal - numberEaten) + " " + foodType + " left over.";
Pop-up: Adam ate 3 apples, leaving 4 apples left over.
Change the contents of your variables and see how myStatement automatically updates when you reload the page in your web browser.
When you add a string variable to practically anything (even a number), it creates another string.
By putting the mathematical statement in parenthesis, the computer will know to perform that operation first before considering it part of the big long string variable we're creating.
Part III - Arrays and Logic Statements
p8 - Arrays can contain more than one piece of data (like in variables) - like a box with a bunch of sections.
var myArray = new Array("Lisa", "George", "Adam", "Paloma", "Jeffrey");
Separated by a comma , and each name is in quotes " " because they're strings.
alert(myArray); - pop-up: Lisa,George,Adam,Paloma,Jeffrey
myArray[0] or myArray[1] etc. - pop-up: Lisa or George etc.
Arrays can be sorted, spliced, searched etc. (Write [ ] German keyboard alt + 5 or 6) - For more examples go w3schools.com/jsref/jsref_obj_array.asp
p10 - For loops or for statements run a chunk of code a specified number of times and count that number as it moves along.
i stands for iterator.
Example: As i, you need to run a mile and you're at the starting line of a quarter-mile track. To complete a mile, that means you have to run four laps around the track. Represented as a for statement, that might look something like this:
i starts by 0 - runs the loops and repeats from the beginning, increasing via i++ each time and putting i=1 i=2 i=3 and stops if i=4 because i<4 .
Code runs inside of curly braces - they section off the specific code you want to run - { } (German keyboard alt + 8 or 9 - and [ ] German keyboard alt + 5 or 6).
(??? >) Now let's use it:
Try next - if we don't know the length of the array:
The property of myArray is .lenth (< ???)
p13 - If statements are easy and may make you addicted :-) You can do with them about anything if you have enough of them - true, but you could lose your mind in the process. So don't overuse them.
Basically: it says if the specified condition is true, then run this block of code. It can also be used to say, if the first condition isn't met, do this instead. You can also check if an alternate condition is met if the first one fails. For example, if you want to wash your dog if your dog is blue, you can use an if statement to find out and wash the dog if it turns out to be blue. Here's how that could look as a piece of code:
if tells the computer that we're declaring an if statement - in parentheses, we're defining the condition.
(???)
Part IV - Understanding Functions and Making a Guessing Game
A function is basically a means of calling a large chunk of code with just a tiny bit of text. Functions are kind of like the text expansion of programming.
alert() is a function.
function tells the computer that we're defining a function. Then we name the function nameOfFunction. After the name of the function are parentheses ( ). May stay empty, or pass variables inside - specify the name of the variables. Finally, we have our curly braces at the end { }. Everything the function needs to do will go inside of these curly braces.
p16 - Making a Simple Guessing Game in JavaScript
The Apple Game
How many apples can you eat?
Put the <script> into the <head> area of your document:
Let's break it down. >>> ...
Write in HTML <body>:
Epilogue - Best Practices and Additional Resources
p19 - Comment your code - single-line or multi-line - remove parts of your code without deleting them - isolate a problem when you're debugging. What you want to explain in your comments is information the code can't already tell you: why you made the choices you made.
Avoid using eval() if possible. The main reason is that eval() slows down your code. And you can almost always find a better way.
...
Video
p873 - Chapter 34 - Working with Multimedia
Vocabularies
array - Datenreihe, Schlachtreihe, Feld, Anordnung, Aufgebot von Menschen etc.
chunk - Brocken, Stück, Datenblock
colon - : Doppepunkt
conveniently - geeigneter Weise
foray - Ausflug, Streifzug, Wochenendausflug, Überfall
hence - daher
intimidate s.o. - einschüchtern, verprellen
omit - auslassen
tackle - bewältigen, angehen, anpacken, in Angriff nehmen
Session - 2014-3-26, Bln, JS LR - Learn to Code - The Full Beginner's Guide - complete 4 chapters - WR HP HTML CSS JS - 9:55-16:40, 18:20-21:30, 23:20-
Session - 2014-3-22, Bln, video ch 34 - HTML ch 3 - JS ch 5 - Getting Started ch 2 - 12:55-14:30, 20:35-21:10, 22:45-23:55 = 3:20h
Testing Area
This is my new code
And here line 2
and 3 etc.
Do you like it?
Hmmm...
More coming soon :-)