introduction to javascript module 1 client side js programming group @ m-go sponsored by
TRANSCRIPT
Introduction to JavaScriptModule 1
Client Side JS Programming Group @ M-GO Sponsored By
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
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)• vi, vim (linux, mac)• emacs (linux, mac)
– Not free• Sublime Text http://www.sublimetext.com/3
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-GOSponsored By
www.mgo.comContact Me: Tony GermaneriEmail [email protected] [email protected] tony.germaneri.mobile