CDEV
DBAV
Introduction to JavaScript I
Week 03.
SOFTWARE CLUSTER
[ CDEV • Coding and Development Project ] [ DBAV • Database Applicati on Development ] 1
Objectives
• Describe the basic syntax of JavaScript;
• Describe the data types, conditional statements, and loops in
JavaScript;
• Demonstrate how to write scripts in web page using JavaScript.
TEMASEK POLYTECHNIC I School of Informati cs & IT 2
Tools Required
• Visual Studio Code
• [Link]
• Browser
• Google Chrome (recommended)
• Mozilla Firefox
TEMASEK POLYTECHNIC I School of Informati cs & IT 3
JAVASCRIPT (JS)
4
A Brief History of JavaScript
• 1995: At Netscape, Brendan Eich created "LiveScript", which gets
renamed to "JavaScript".
• 1996: Microsoft releases "JScript", a port, for IE3.
• 1997: JavaScript was standardized in the "ECMAScript" spec.
• 2005: "AJAX" was coined, and the web 2.0 age begins.
• 2006: jQuery 1.0 was released.
• 2010: [Link] was released.
• 2012: ECMAScript Harmony spec nearly finalized.
TEMASEK POLYTECHNIC I School of Informati cs & IT 5
What can JavaScript do?
• Image switchers and lightboxes
• Full featured web applications
• Keep track of users with cookies
• Interactive elements like tabs,
sliders and accordions
• Drawing and animation
• Mind blowing awesomeness like
this
TEMASEK POLYTECHNIC I School of Informati cs & IT 6
Browsers + JavaScript Consoles
• Google Chrome
• Console
• Chrome Canary: Developer version of Chrome
• Firefox
• Firebug (Add-on)
• Safari
• Console: Web Inspector (need to enable Developer mode in Preferences -> Advanced)
• Webkit Nightly: Developer version
• Internet Explorer
• F12 Developer Tools
TEMASEK POLYTECHNIC I School of Informati cs & IT 7
JavaScript Console (Chrome)
You will use a browser built-in tool called JavaScript Console to help you learn JavaScript.
Mac OS X Windows
TEMASEK POLYTECHNIC I School of Informati cs & IT 8
JavaScript Console (Chrome)
TEMASEK POLYTECHNIC I School of Informati cs & IT 9
JavaScript Console (Chrome)
• You can also write functions in
the console.
Type Shift-Enter to
go to new line.
TEMASEK POLYTECHNIC I School of Informati cs & IT 10
How to Use JavaScript?
In Script Tag Within
Head/Body Tag Link to External File
TEMASEK POLYTECHNIC I School of Informati cs & IT 11
JavaScript References
• W3Schools
• [Link]
• Mozilla Developer Network
• [Link]
• JavaScript: The Good Parts by Douglas Crockford
• Google: Chrome Developer Tools
• [Link]
• Firefox: Firebug Wiki
• [Link]
TEMASEK POLYTECHNIC I School of Informati cs & IT 12
VARIABLES AND FUNCTIONS
13
Variables
• JavaScript is similar to Java in
syntax
• JavaScript is loosely typed i.e.
no need to declare variable
type
Use “var” to create and Use “[Link]()” to output to
declare variables. the console.
TEMASEK POLYTECHNIC I School of Informati cs & IT 14
Primitive Data Types
• string: an immutable string of characters
• number: whole or decimal point
• boolean: represents logical values true or false
• undefined: represents a value that has not been
defined
• null: represents an explicitly empty value
TEMASEK POLYTECHNIC I School of Informati cs & IT 15
Other Data Types
• array: a collection of items
• object: represents custom built
objects or built-in objects such
as windows, document, etc…
TEMASEK POLYTECHNIC I School of Informati cs & IT 16
Try It Out! (Part 1)
• Create a new HTML file in Visual Studio Code or any other editor.
• Write a small script in the HTML file to calculate the circumference ()
and area () of a circle.
• Create a variable to store the radius
• Calculate the circumference based on the radius and output “The
circumference is ??”
• Calculate the area based on the radius and output “The area is ??”
• Hint: You can use a built-in JavaScript constant [Link] to get the value of .
• Load the HTML file and see your output in the JavaScript Console.
TEMASEK POLYTECHNIC I School of Informati cs & IT 17
Try It Out! (Part 2)
• Create a new JavaScript file in Visual Studio Code or any other editor.
The file must end with “.js” extension. E.g. [Link]
• Copy the script that you wrote previously to your JavaScript file.
• In the previous HTML file, remove the JavaScript source codes and
replace with a link to your JavaScript file in the script tag.
• Load the HTML file in the browser and see your output in the
JavaScript Console.
TEMASEK POLYTECHNIC I School of Informati cs & IT 18
Comments
TEMASEK POLYTECHNIC I School of Informati cs & IT 19
Functions
• Methods are called Functions
in JavaScript.
• A function is created using the
keyword “function”.
• After the function is created,
you use it by calling its name.
TEMASEK POLYTECHNIC I School of Informati cs & IT 20
Functions: Arguments
• Functions can accept any
number of named arguments.
TEMASEK POLYTECHNIC I School of Informati cs & IT 21
Functions: Variable Passing
• You can also pass variables
into functions.
TEMASEK POLYTECHNIC I School of Informati cs & IT 22
Functions: Return Values
• The return keyword returns a value of
the function (and exits the function).
• You can use function calls in
expressions.
• You can even call functions inside
function calls.
TEMASEK POLYTECHNIC I School of Informati cs & IT 23
Variable Scope
• JS Variables have "function
scope". They are visible in the
function where they're defined.
• A variable with local scope.
• A variable with global scope.
TEMASEK POLYTECHNIC I School of Informati cs & IT 24
Try It Out!
• In the JavaScript file that you created previously, write two
functions:
• one to calculate the circumference of a circle;
• and another to calculate the area of a circle.
• Each of your functions should output the result to the console in a
proper sentence.
• Reload your HTML file to see the result.
TEMASEK POLYTECHNIC I School of Informati cs & IT 25
CONTROL STATEMENTS
26
Conditions: if Statement
TEMASEK POLYTECHNIC I School of Informati cs & IT 27
Conditions: switch Block
The “default” case
does not have to be
the last case in a
switch block.
TEMASEK POLYTECHNIC I School of Informati cs & IT 28
Loops: while
TEMASEK POLYTECHNIC I School of Informati cs & IT 29
Loops: for
Use “break” to exit a loop.
TEMASEK POLYTECHNIC I School of Informati cs & IT 30
The End
31
