Introduction to JavaScript

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

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

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

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

Browser • Chrome • Firefox • Safari • Opera • Internet Explorer • Something else?

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

The basic HTML5 document <!doctype html> <html> <head> <title>My HTML5 document</title> </head> <body> Hello World </body> </html> Dev 4 life yo

<TAGS> • Self closing tags: tags that don’t “contain” anything <br> <hr> <input> <img> • Non self closing: tags that can “contain” things Almost all the other tags! <body></body> <head></head> <a></a> … [ a whole lot more! ]

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: <tag attribute_name=“attribute value”></tag> Examples: <div style=“color:red;”></div> <div id=“myDiv1”></div>

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.

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.

The <script> tag • script : this tag holds your JavaScript program <script type=“text/javascript”> .... your JavaScript program </script> • This tag goes inside of <head></head> … <head> <script type=“text/javascript”> </script> </head> …

HTML5 document with <script> <!doctype html> <html> <head> <title>My HTML5 document</title> <script type=“text/javascript”> </script> </head> <body> Hello World! </body> </html>

<script> 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. <script> This stuff…</script> Because this is JavaScript!

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

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

body onload=“myFirstFunction();” • Running your function … <body onload=“myFirstFunction();”> </body> … • Refresh your browser

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”

DOM API • Document Object Model • Application Programming Interface Document Object Model (DOM) API is a JavaScript representation of the <tags> 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) !

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

document.body.innerHTML function myFirstFunction(){ document.body.innerHTML = “Hello World!”; } • “Hello World!” can contain tags, e.g.: “<h1 style=‘color:red’>Hello World!</h1>” • You can use “ or ‘ as quotes.

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

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

Introduction to JavaScript