Scribd
Upload
40 views

Introduction To JavaScript I

The document provides an introduction to JavaScript for a coding and development course. It discusses the objectives of learning the basic syntax, data types, conditional statements, and loops in JavaScript. It also outlines the required tools of Visual Studio Code, Node.js, and browsers like Chrome and Firefox. The document then covers JavaScript history, uses, browsers consoles, variables, functions, data types, control statements like if/else and switch statements, and loops like while and for to program in JavaScript. Students are given examples and exercises to practice these JavaScript concepts.

Uploaded by

Sal N
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
40 views

Introduction To JavaScript I

The document provides an introduction to JavaScript for a coding and development course. It discusses the objectives of learning the basic syntax, data types, conditional statements, and loops in JavaScript. It also outlines the required tools of Visual Studio Code, Node.js, and browsers like Chrome and Firefox. The document then covers JavaScript history, uses, browsers consoles, variables, functions, data types, control statements like if/else and switch statements, and loops like while and for to program in JavaScript. Students are given examples and exercises to practice these JavaScript concepts.

Uploaded by

Sal N
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

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


• Node.js
• 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: Node.JS 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
• http://www.w3schools.com/js/default.asp
• Mozilla Developer Network
• http://developer.mozilla.org/en-US/docs/Web/JavaScript
• JavaScript: The Good Parts by Douglas Crockford
• Google: Chrome Developer Tools
• http://developers.google.com/chrome-developer-tools
• Firefox: Firebug Wiki
• http://getfirebug.com/wiki

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 “console.log()” 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 Math.PI 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. myscript.js
• 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

You might also like