1. Introduction to JavaScript Module 1 Client Side JS Programming Group @ M-GO Sponsored By www.mgo.com

2. Welcome to Client Side JS What will we be learning in this course? – Almost everything about core JavaScript in the browser environment What won’t we be learning in this course? – No server side JavaScript, advanced CSS, advanced HTML, REST APIs, JavaScript libraries and of course we won’t learn about a whole different language called Java

3. Module 1 Topics Tools for programming Chrome, Firefox, Safari, IE Text Editor The basic HTML5 document Tags, the tag Simple onload script. Hello world via alert and innerHTML

4. Tools for programming Notepad! Y U NO HAVE Syntax Highlighting!? Syntax Highlighting Text editor – Free Notepad++ (windows) Programmer’s Notepad (windows) http://goo.gl/QYNB2l (list of good mac editors) http://goo.gl/QYNB2l vi, vim (linux, mac) emacs (linux, mac) – Not free Sublime Text http://www.sublimetext.com/3

5. Browser Chrome Firefox Safari Opera Internet Explorer Something else?

6. Creating a text/html file Install your editor and open it Click File > New Save your document on the desktop Name your file module1.html Click and drag your new file from the desktop into your browser Click refresh

7. The basic HTML5 document My HTML5 document Hello World Dev 4 life yo

8. Self closing tags: tags that don’t “contain” anything Non self closing: tags that can “contain” things Almost all the other tags! … [ a whole lot more! ]

9. Tag Attributes Tags can contain attributes – An attribute is a bit of information about the tag. Some attributes can cause a tag to behave in a certain way. For example, change the color of the tag, make the tag do something when you click on it or move your mouse over it. Syntax: Examples:

10. id, style attributes id : the unique id of a tag on the page. You define this tag. Without this attribute, your tag will be lost in a sea of tags and will it be very difficult to find your tag. style : the CSS (cascading style sheet) of this tag. Actually called the “inline” css. You can manipulate the appearance, and location of your tag with this attribute.

11. onxxxxx attribute onclick : this attribute tells your browser to do something – namely execute javascript, when this tag is clicked on. There are a lot of onxxxxx events, such as onmouseover, onmouseout, onkeyup, onkeydown, onkeypress, onmousemove, onmousedown, onload, and on and on never stopping. Literally never stopping, new events are being added to the specification all the time. These are called level 1 event handlers. We’ll learn about level 2 and 3 event handlers later on in this course.

12. The tag script : this tag holds your JavaScript program.... your JavaScript program This tag goes inside of … …

13. HTML5 document with My HTML5 document Hello World!

14. Home of JavaScript! From here on out, unless we’re specifically talking about a tag we’re talking about the content of the script tag. This stuff… Because this is JavaScript!

15. Functions What’s a function? – You can “run” a function – A function “does stuff” Functions are the basic building blocks of all computer programs We’re going to learn a LOT more about function throughout this course, but almost nothing today

16. My first function function myFirstFunction(){ alert(“Hello World!”); }

17. body onload=“myFirstFunction();” Running your function … … Refresh your browser

18. alert(“blah”), global scope There are a lot of functions that are “just there”, alert() is one of these “always there” functions. They exist in what’s called the “Global Scope” we’ll talk more about global scope later. alert(“some message I want to have pop up and annoy users”); Alert is “modal”

19. DOM API Document Object Model Application Programming Interface Document Object Model (DOM) API is a JavaScript representation of the within your HTML document. DOM API allows JavaScript to create and manipulate elements and even the browser itself. This gives us the power to RULE THE WORLD (wide web) !

20. window, document, document.body Everything is in the window The document is what we see The body is inside of the document This is an object hierarchy We traverse into the object hierarchies with “.” E.g.: window.document.body We never have to include the window object, it is assumed E.g: document.body is the same as window.document body

21. document.body.innerHTML function myFirstFunction(){ document.body.innerHTML = “Hello World!”; } “Hello World!” can contain tags, e.g.: “ Hello World! ” You can use “ or ‘ as quotes.

22. Next Module Syntax, comments, naming conventions, making variables, strings and numbers, concatenation and addition, flow control statements, truthyness, falseyness, if, else, else if, ==, !=, ===, !==, for, for in, while, break, continue, try/catch

23. Client Side JS Programming Group @ M-GO Sponsored By www.mgo.com Contact Me: Tony Germaneri EmailTony.Germaneri@mgo.comTony.Germaneri@mgo.com HangoutsTonyGermaneri@gmail.comTonyGermaneri@gmail.com Skypetony.germaneri.mobile