JavaScript Basics with baby steps

JavaScript,
INTRODUCTIONTOJS.
DATA TYPESIN JS
VARIABLEDECLARATION
ARITHMATICOPERATORS
CONDITIONALSTATEMENTS
DATA TYPECONVERSIONS

Web Server Database ServerTime
Apache
PHP
MySql
Browser
JavaScri
pt
D
O
M Parse
Respons
e
ind.php P
D
O
Send
Request
http://www.wa4e.com/code/rrc/

About JavaScript
• IntroducedinNetscape in1995
• Developed by BrandonEich
• Named tomake use ofJava marketbuzz
• Standardizedtodayas ECMAScript

<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>One Paragraph</p>
<script type="text/javascript">
document.write("<p>Hello World</p>")
</script>
<noscript>
Your browser doesn't support or has disabled JavaScript.
</noscript>
<p>Second Paragraph</p>
</body>
</html>

Low-Level Debugging
• When indoubt,youcan alwaysaddanalert() toyourJavaScript.
• The alert() functiontakes astringas a parameterandpauses theJavaScriptexecution
untilyoupress “OK”.

<html>
<head>
</head>
<body>
alert("Here I am");
document.write("<p>Hello World</p>")
</script>
<noscript>
Your browser doesn't support or has disabled JavaScript.
</noscript>
</body>
</html>

IncludingJavaScript
Three Patterns:
• Inlinewithin thedocument
• As partofan event inanHTML tag
• Froma file

<html>
<head>
</head>
<body>
<p><a href="js-01.htm"
onclick="alert('Hi'); return false;">Click Me</a></p>
<p>Third Paragraph</p>
</body>
</html>
JavaScriptonatag

<html>
<head>
</head>
<body>
<script type="text/javascript" src="script.js">
</script>
<p>Third Paragraph</p>
</body>
</html>
script.js:
document.write("<p>Hello World</p>");
JavaScriptina separatefile

Syntax Errors
• As in anylanguage,wecan makesyntaxerrors
• Bydefault,browserssilently eat anykindofJavaScript error
• Butthe code stopsrunningin thatfileorscript section

alert("I am broken');
alert("I am good");
</script>
<p>Two Paragraph</p>
alert("Second time");
</script>
<p>Three Paragraph</p>

Seeing the Error
• Since theenduser really cannottakeanyactionto fixtheJavaScriptcoming as partofa
webpage,thebrowsereats theerrors.
• As developers, weneed tolook forthe errors -sometimes it takesa minute toeven
remember tocheck fora JSerror.

ConsoleLogging
• Debuggingusingalert() can get tiring- sometimes youwantto recordwhathappensin
casesomething goes wrong
• console.log("String") - andmanymorefunctions
Note: Requires recent browsers

console.log("First log");
alert("YO");
</script>
<p>Two Paragraph</p>
console.log("Second log");
</script>
<p>Three Paragraph</p>

Console is Not AlwaysThere
Some browsers onlydefine theconsole if adebuggeris running.
window.console && console.log(...)
if (typeof console == "undefined") {
this.console = {log: function() {} }
}
http://stackoverflow.com/questions/3326650/console-is-undefined-error-for-internet-explorer

Using the Debugger (Chrome)
• Get intoa source view.
• Click ona line ofJavaScriptto set a breakpoint.
• Reload thepage.

Comments in JavaScript = Awesome
// This is a comment
/* This is a section of
multiline comments that will
not be interpreted */

Statements
• White spaceandnewlines donot matter.
• Statementsendwith a semicolon ;
• There arecases whereyoucan leave the semicolon off,butdon’tbotherexploiting this
feature- just addsemicolons like inC,Java, PHP,C++,etc.

x = 3 +
5 * 4; console.log(
x);
</script>

Variable Names
• ValidCharacters: a-z, A-Z, 0-9, _ and$
• Mustnot startwith anumber
• Names are case sensitive
• Startingwitha dollarsign is considered“tacky”

String Constants
• DoubleorSingleQuotes -Singlequotes areused typicallyinJavaScript andwelet
HTML usedoublequotes tokeep ourminds alittlesane.
• Escaping- doneusingthe backslashcharacter
alert('One linenTwoLine');
</script>

Numeric Constants
As youwouldexpect…

Assignment (side effect) Operators

String Concatenation
• JavaScriptstringconcatenationis like PythonandJava anduses “+”,versus PHP
which uses “.”
• Like thePHP“.”operator,it automaticallyconverts non-stringvalues tostringsas
needed.

Variable Typing
JavaScriptis aloosely typedlanguageanddoes automatictypeconversion when evaluating
expressions.

Variable Conversion
Ifastringcannotbeconverted toanumber,youendupwith“Not aNumber” or“NaN”. Itis a
value,butit is sticky -all operationswithNaN asa operandendupwithNaN.

Determining Type
JavaScriptprovides aunary typeofoperatorthatreturnsthe type ofa variableorconstantas a
string.

Functions
• Functions use atypicalsyntaxandare indicatedusingthe functionkeyword.
• The returnkeywordfunctions asexpected.
function product(a,b) {
value = a + b;
return value;
}
console.log("Prod = "+product(4,5));
</script>

Scope - Global (default)
• Variablesdefinedoutsidea functionthatare referenced inside of afunctionhave
globalscope.
• This isa littledifferentthanwhatweexpect.
gl = 123;
function check() {
gl = 456;
}
check();
window.console && console.log("GL = "+gl);
</script>

Making a Variable Local
Ina function,theparameters(formalarguments) arelocalandanyvariables we markwith
thevarkeywordarelocal too.
gl = 123;
function check() {
var gl = 456;
}
check();
window.console && console.log("GL = "+gl);
</script>

Arrays in JavaScript
JavaScriptsupportsbothlinear arraysand
associativestructures, butthe associative
structuresare actuallyobjects.

Control Structures
• Weuse curlybracesforcontrolstructure.
• Whitespace / line ends donot matter.
• if statements arelike PHP.
• while loops arelike PHP.
• Countedforloopsare like PHP– for( ; ; ) ...
• Inloops,breakandcontinue arelike PHP.

Definite Loops (for)
balls = {"golf": "Golf balls",
"tennis": "Tennis balls",
"ping": "Ping Pong balls"};
for (ball in balls) {
console.log(ball+' = '+balls[ball]);
}
js-12.htm

Document Object Model
• JavaScriptcan manipulatethe current HTML document.
• The “Document Object Model” tells us the syntaxtouse toaccess various “bits”of
the current screen toreadand/ormanipulate.
• You caneven findpieces ofthe model byidattributeandchangethem.
• Wecan read andwritetheDOM fromJavaScript.
http://en.wikipedia.org/wiki/Document_Object_Model

DOMs are Not Identical
• Not allbrowsers represent theirpageexactly thesame way.
• This makes it achallenge to keepallofyourJavaScript workingonallbrowsers.
• Italso means youneed totest yourcodeover andover on each browser.
• Aargh..

Using getElementById()
Inordernotto havetotraverse each uniqueDOM, weuse afunctioncall thatallbrowsers
support.This allows us tobypassthe DOM structureandjumpto aparticulartagwithin the
DOM andmanipulatethattag.

<p>
Hello <b><span id="person">Chuck</span></b> there.
</p>
console.dir(document.getElementById('person'));
st = document.getElementById('person').innerHTML;
console.log("ST = "+st);
alert('Hi there ' + st);
document.getElementById('person').innerHTML = 'Joseph';
</script>
js-13.htm

console.dir(document.getElementById('person'));

Updating the Browser Document
<a href="#"
onclick="document.getElementById('stuff').innerHTML='BACK';return false;">
Back</a>
<a href="#"
onclick="document.getElementById('stuff').innerHTML='FORTH';return false;">
Forth</a>
</p>
<p>
Hello <b><span id="stuff">Stuff</span></b> there.
This is one reason whyyoucan only have
one id per document.

<p>
<a href="#" onclick="add();return false;">More</a>
</p>
<ul id="the-list">
<li>First Item</li>
</ul>
<script>
counter = 1;
console.log(document.getElementById('the-list'))
function add() {
var x = document.createElement('li');
x.className = "list-item";
x.innerHTML = "The counter is "+counter;
document.getElementById('the-list').appendChild(x);
counter++;
}
</script>
js-15.htm

JQuery tothe Rescue
• While the DOMs arenotparticularlyportable, and direct DOM manipulationis alittleclunky,
therearea number of JavaScriptframeworks thathandle themyriad of subtlediffereces
between browsers.
• WithJQuery, insteadof manipulatingtheDOM, we useJQuery functions andeverything works
much better...
http://jquery.org

Summary
• UsingJavaScript
• Syntaxerrors
• Debugging
• Languagefeatures
• Globalandlocal scope
• Arrays
• Controlstructures
• Document Object Model
• JQuery

Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Severance
(www.dr-chuck.com) as part of www.wa4e.com and made
available under a Creative Commons Attribution 4.0 License.
Please maintain this last slide in all copies of the document to
comply with the attribution requirements of the license. If you
make a change, feel free to add your name and organization
to the list of contributors on this page as you republish the
materials.
Initial Development: Charles Severance, University of
Michigan School of Information
Insert new Contributors and Translators here including names
and dates
ContinuenewContributorsandTranslatorshere

JavaScript Basics with baby steps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScript Basics with baby steps

Similar to JavaScript Basics with baby steps (20)

Recently uploaded

Recently uploaded (20)

JavaScript Basics with baby steps

Editor's Notes