getting started with java script

M2 – Getting Started with JavaScript
School of Media, Art, & Design
CWMD2601 –
Scripting for Design
4/3/2020 M2 – Getting Started with JavaScript 1

4/3/2020 M2 - Getting Started With JavaScript 2
functionsreuse
decisionscondition
loops
repeat
arrays and
objects
variables
values
expressions
key elements
Programming
process
M3 – week 3
M4 – week 4 and 5
M5 – week 6, 8 and 9
(week 7 –mid term)
M6 – week 10 and 11
M7 – week 12 and 13
(week 14 – final)
Course Learning Path – 7 Modules
enhance
JavaScript
programming
M1 – week 1
M2 – week 2

4/3/2020 3
Algorithms
Pseudo code & Flow
Chart
Statements
HTML, CSS, JavaScript
What=I&D Web Page
DESIGN & WRITE
CODES
Interpret
Browser
Refresh -M1 Takeaways
For Human
For Computer
The IPO statements
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
IPO
M2 – Getting Started
INPUT prompt, confirm
OUTPUT alert, console.log
DECLARATION var, let, const, function
EXPRESSION assignment, operators
DECISION if, switch
LOOP while, for

4/3/2020 4
M2 Getting Started – Objectives
Getting started with JavaScript
 Adding JavaScript to Web pages
 Writing basic code
 Events and the Document Object
Model (DOM)
 Using Developer Tools

4/3/2020 5
M2 Getting Started – Activities (WK2)
 Describe JavaScript's origins, editions, and features
 Show how to link JavaScript to an HTML file
 Write simple programs using input, output,
declaration, and assignment statements
 Experiment with basic DOM scripting statements,
e.g. getElementID and getElementsByName
 Add comments to JavaScript code
 Introduce browser developer tools and define debugging
 Describe some basic concepts behind object oriented
programming and client side scripting
 Introduce course coding conventions

4/3/2020 M1 - The Process of Programming 6
M2 Getting Started – Topics
 JavaScript concepts
 Debug and Console
 Statement types/syntax
 Where to insert JS
 Comments
 Input/output/DOM
 Events
 Best practices

4/3/2020 7
JavaScript Concepts – Web Development
 Web Authoring - page contents
• Creation and assembly of the tags, attributes, data
making up a web page, e.g. HTML
 Web Design – page designs
• Visual design and creation of documents appearing on
the World Wide Web, e.g. CSS
 Web Programming – page dynamics
• Design of applications for a website, e.g. JavaScript
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
DOM - Link together thru Document Object
Model, for Interactive & Dynamic Web Page DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

JavaScript Concepts – ECMA and Client/Server
 ECMA-262 - JavaScript , based on a language standard called
ECMAScript (aka ECMA-262) , major release was the 6th
edition, aka ES6, developments overseen by W3C org.
 Cross-platform - By and large core, JavaScript is cross-platform
and runs similarly across all browsers (so should your in-class codes
and assignment!)
 3 -Tier System - Client, processing and data tier
 Client Side Scripting – Unlike Java, JavaScript is client tier only

JavaScript Concepts – History
 1962: memos by J. C. R. Licklider
 1960s: ARPANET, first internet implementation
 1990 and 1991: World Wide Web (web), created by Tim
Berners-Lee
 1993: Mosaic, created at the University of Illinois
 1994: Netscape, WWW Consortium (W3C) established
 1995: Microsoft Internet Explorer, adopted for DHTML
 Now: IE, Mozilla Firefox, Google Chrome, Safari….etc.
JavaScript –
client side
scripting

A URL is a type of _________.
A. web page
B. URI (Uniform Resource Identifier)
C. link
D. network

What organization oversees the development
of web technology standards?
A. U.S Department of Defense
B. World Wide Web Consortium (W3C)
C. Stanford University
D. United Nations

The markup language originally developed to
create web pages and still in use today is called
__________.
A. HTML
B. SGML
C. XML
D. CSS

__________ is a separate, complementary
language to HTML that was developed for
specifying the appearance of web page elements.
A. XHTML
B. SGML
C. XML
D. CSS

What is usually the primary role of a client?
A. locating records that match a
request
B. heavy processing, such as
calculations
C. data storage
D. the presentation of an
interface to the user

Which of the following describes JavaScript?
A. Strongly typed
B. Statically typed
C. Loosely typed (don’t have to
specify in advance the type of
info to be stored)
D. Untyped

JavaScript is ______ Side Scripting Language.
A. Browser or Client
B. None of These
C. Server
D. ISP
JavaScript

Which of the following is an advantage of
using JavaScript?
A. Less server interaction
B. Immediate feedback to the
visitors
C. Increased interactivity
D. All of the above.
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

____ refers to the creation and assembly of the
tags, attributes, and data that make up a web
page i.e. the structure of the web page
A. Web page authoring or Web authoring
B. Web page design or Web design
C. Web development or Web programming
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

____ refers to the visual design and creation of
the documents that appear on the World Wide
Web, i.e. the presentation of the web page.
A. Web page design or Web design
B. Web page authoring or Web authoring
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

____ refers to the design of software applications
for a website, i.e. the behavior of the web page.
A. Web page design or Web design
B. Web page authoring or Web authoring
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

The JavaScript international standard is
called?
A. ECMA-262 Standard
B. JavaScript 1.3 Standard
C. ISO-262 Standard

Debug – console.log
 Debugger
windows
 Debug – Doing the right things is only half, finding out and
correcting what the wrong things you/someone did is another half
 console.log() is your debugger! NOT your professor!
 Errors - syntax, run-time and logic
 Use other online tester tools such as http://validator.w3.org

Debug – Sample tools
 Brackets: http://brackets.io/
 Visual Studio Basic (VS Code):
https://code.visualstudio.com/Download
 JSBin (online): https://jsbin.com/?html,output

Debug - Brackets
Steps:
1. Click this icon
2. Go to your “Hello World!” browser
page

Debug – VS Code
Make sure you have “Open in
browser ..” extension installed
1. Right click your mouse button
2. Select “Open…”
3. Go to your “Hello World!” Page

Debug – Console
Steps:
1. In your “Hello World!” browser,
right click your mouse button,
then select Inspect
2. Click Console

Debug – Position your Editor and Page side by side
For Brackets:

For VS Code:

For jsbin: https://jsbin.com/?html,js,console,output
Select HTML, JavaScript, Console and Output

Debug – Blank page with Console
about:blank

Debug –Try a few JS statements in Console
1. alert('Hello World');
2. alert(new Date());
3. 3 + 10*5;
4. let x='Hello World’;
console.log(x);
5. Math.floor(10 * Math.random()) + 1;
6. 100 < 99;
7. document.body.style.textAlign = 'right';
8. document.body.style.backgroundColor = 'yellow';
9. document.body.innerHTML = '<p>All gone!</p>';
10. let userName = prompt('What is your name?');
alert('Welcome ' + userName + '!');
I&DWP
Algorithms
(PC & FC)
Statements
Interpreter
IPO

JS Statement Types/Syntax
 JavaScript Syntax: The set of rules that define a correctly
structured JavaScript program
 Basic Rules:
 JavaScript is case sensitive
 Not necessary but each
statement should end with
semi-colon a “;”
 Comments are ignored by the
browser (the interpreter)

Where to Insert JavaScript in HTML?
 Inline: Using onclick =“….” attribute
 In HTML, insert JavaScript statements as the value
of an HTML attribute
 Embedded: Using <script> HTML tag
 In HTML, insert JavaScript statements between
<script> and </script>
 External: Using <script src=…> attribute
 In an .js file
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

Inline
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
<a href="#" onclick="alert('Inline, in HTML');"
> Click Me</a>
Insert the following JS statements below “Hello
World”
<button onclick="let a=2; alert('Hi');
console.log(a*5);"> Click Me</button>
 Inline: Using HTML onclick =“….” attribute
Note: Inline can have multiple JS statements

Embedded
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter Write a new HTML page with the following:
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("Hello World");
console.log("Hello Console");
}
</script>
</body>
</html>

External js file
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
 Try this: in HTML
function myFunction() {
alert(“Hello - JavaScript in JS file");
console.log(“Hello console”);
}
<!DOCTYPE html>
<html>
<body>
<h1>The onclick Event</h1>
<button onclick="myFunction()">Click me</button>
<script src="myScript.js"></script>
</body>
</html>
 Try this: in myScript.js

Exercise – Where to Insert JavaScript in HTML?
 Prepare your exercise templates:
CWMD2601Tester.html
CWMD2601Tester.js

JS Comments
 Comments
 Nonprinting lines placed in code
containing various types of remarks
 Line comment
 Hides a single line of code
 Add two slashes // before the comment
text
 Block comments
 Hide multiple lines of code
 Add /* before the first character included
in the block and */ after the last
character in the block

Is JavaScript case-sensitive?
A. Yes
B. No
C. Yes but not on Windows platform
D. Yes but not on Linux platform

Where in the following is the correct place to
insert a JavaScript?
A. Only in the <head> section
B. Only in the <body> section
C. Both the <head> section and
the <body> section are
correct
<html>
<head> <body>
element element element element

External JavaScript scripts can be linked into
more than one page like the followings.
A. True
B. False
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

A JavaScript statement should end with
what?
A. comma
B. semicolon
C. colon
D. bracket
, let
, console.log
IPO statements and examples

Inside which HTML element do we put the
JavaScript?
A. <script>
B. <javascript>
C. <scripting>
D. <js>
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)

How can you add an one-line comment in
JavaScript?
A. 
B. This is a comment
C. //This is a comment
, let
, console.log
IPO statements and examples

What is the correct JavaScript syntax to insert
multiple-lines comment?
A. // This comment has mor
than one line *//
B. / This comment has more
than one line /
C. // This comment has more
than one line //
D. /* This comment has more
than one line */

Let’s Start JavaScript Programming !

4/3/2020 47
Algorithms
Pseudo code & Flow
Chart
Statements
HTML, CSS, JavaScript
What=I&D Web Page
DESIGN & WRITE
CODES
Interpret
Browser
JavaScript Statement Deep Dive
Start with Input/Output
For Human
For Computer
, let, const, function
, console.log
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
IPO
Deep Dive
Essential Statements and samples

HTML, CSS and JavaScript - Common Approach
Standard
Language
Common
Approach
ECMA-262
DOM
HTML
(structure)
CSS
(presentation)
JavaScript
(behavior)
Object Oriented

Common Approach
X
Document
Page
Browser Window
(aka window, bowser window object, root object)
(aka HTML document, page, document object)
Header: CWMD2601
Hello World!
HTML Elements
(aka components,
element objects)Input Your Name:
Greeting Display:

Input/Output – 3 different ways
1. HTML Tags: <input></input> , <output></output>
2. Browser Functions: e.g. prompt(), alert() ,
console.log()
3. Document Functions: document.write(), DOM
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
DOM
HTML
page structure, the “look”
CSS
page presentation, the “feel”
JavaScript
page behavior, the “act”
Definition: A unit of JS
statements – for a
specific purpose
(aka subprograms,
methods)
1
2
3

Input/Output/DOM – Exercises
 Try the followings with your CWMD2601Test.js:
Input:
Output:
I&DWP
Algorithms
(PC & FC)
Statements
(HTML,CSS, JS)
Interpreter
Browser
Functions
Document
Functions

4/3/2020
52
Input/Output/DOM – Document Object Model
DOM
HTML
(the structure, the “look”)
CSS
(the presentation, the “feel”)
JavaScript
(the behavior, the “act”)
 DOM - Manipulates the browser page with IPO
 OOP – Object Oriented Programming, an
approach to construct IPO statements, from
“objects”
Properties
e.g. knowledge
Methods
e.g. research
Events
e.g. unclear
Object
e.g. student
Input Output
Process
•Storages
•Computing
•Decisions
•Loops
 Object - groups and share properties, their methods
(functions/actions) and events together

Sample Objects
Properties Methods EventsObject

DOM Objects – JS, an OOP Languages
DOM object : document page
 Object: document
 Properties: document.title
 Method: document.write()
 Event handlers: event.altKey
BOM object (not covered in this course)
 Object: window (browser object)
 Method: write.alert() or alert()
DOM object : document.element
 Object: <p id="demo">CSS</p>
 Properties: document.getElementById(“demo”).textContent
document.getElementById(“demo”).style.color
 Method: document.getElementById(“demo”)
 Event handlers: document.getElementById("demo").onclick = function() {myFunction()};
DOM
HTML
CSS JS
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
IMPORTANT !!

DOM Objects – Common Events
HTML ATTRIBUTE EVENT HANDLED
onload page has completed loading
onclick user clicks on a document element
onmouseover mouse moves over an element
onchange a form field has been changed
onsubmit a form has been submitted
onunload user leaves a page
properties methods events
Object
e.g. DOM element

Back to your CWMD2601Tester
 Insert the following statement after <h1> in CWMD2601Tester.html

 In CMD2601Tester.js, replace myFunction() with the followings:
Try the following in your console, note the DOM object and property
Exercise – DOM, element object

M2Demo.html
Exercise – DOM, including event handlers
M2Demo.js

In your exercise, what is output after “click”?
A.
. .
. .
. .
. .
.
.
B. .

In your exercise, which of the following is your
object?
A. document
B. myFunction()
C. document.getElementById("innerHTMLdemo").
innerHTML
D. document.getElementById("textContentdemo")
.textContent
E. document.getElementById("demo").onclick
4/3/2020
59
properties methods eventsobject
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object

In your exercise, what are the object properties?
A. document
B. myFunction()
C. document.getElementById("innerHTMLdemo")
.innerHTML
D. document.getElementById("textContentdemo")
.textContent
E. document.getElementById("demo").onclick
4/3/2020 60
4/3/2020 properties methods eventsobject
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object

In your exercise, what is the object method?
A. window/browser (BOM)
B. document (DOM)
C. myFunction()
D. document.getElementById("demo").onclick
4/3/2020 614/3/2020
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object

In your exercise, what is the object event handlers?
62
A. myFunction()
B. document.getElementById("innerHTMLdemo")
.innerHTML
C. document.getElementById("textContentdemo")
.textContent
D. document.getElementById("demo").onclick
4/3/20204/3/2020
X
Header: CWMD2601
Hello World!
Input Your Name:
Greeting Display:
window
object
document
object elements
object

63
Best Practices
index.html
style.css
script.js
M2-100123456.zip
Following principles of modern Web design and development, place code
for the 3 kinds of languages into their own files. Link the CSS and JS files into
the HTML using the appropriate elements. For each exercise or assignment
place all related files in the same folder.
When submitting work for evaluation, compress or "zip" the folder and
upload the compressed folder. Do not submit individual files. Failure to do
so will result in a penalty.
zip files
DC Connect or FTP dca.durhamcollege.ca
module # & student#

 In industry, a program is not usually created and
maintained for its whole life by one programmer
 As a developer, your code could be analyzed, modified, or
reviewed by any or all of:
 other developers
 testers and reviewers
 supervisors (and instructors)
 clients
 Code conventions help one to understand a program more
easily, whether it’s new or old , "readable" !
Best Practices – code conventions
4/3/2020 M2 – Getting Started with JavaScript
https://www.w3schools.com/js/js_best_practices.asp
https://www.w3.org/wiki/JavaScript_best_practices
References:

 In this course, program documentation will consist of
these 5 elements:
1. JavaScript comments (not an HTML comment) to identify the
programmer e.g. name and student number (1)
2. JavaScript comments (not an HTML comment) to describe
overall purpose and structure of a program (1)
3. Descriptive variable and function names (2)
4. Descriptive comments BEFORE each function (3)
5. Descriptive comments BEFORE each decision and loop (3)
T2 – Getting Started
Best Practices – documentation (10%)
 All of the assignments, test, and projects must follow
these conventions for full marks. See course intro
(function – 80%, documentation and style – 10% each)

At the very start of a .js file (not the .html file) containing your program, include a
comment with IDENTIFICATION INFORMATION including:
 your last name (first name is optional)
 your student number
Worth 1 out of the 10 program documentation marks.
/*
Joan Jett – 100123456
*/
Best Practices –documentation #1

Immediately following the identification section (not the .html file) add a comment
that explains or describes the PURPOSE of the program. The comment doesn't
have to be lengthy, but it does have to accurately summarize what the program
does.
/*
Joan Jett – 100123456
This program inputs the user's name
and outputs it to the browser window
as part of a personalized greeting.
*/

Use meaningful, DESCRIPTIVE names for variables, functions, objects, properties
and methods that convey their usage. Use camel casing. Do not use underscores.
Other than loop counters, avoid single character names. Start variable and
function names with a lower case letter.
let playerName;
let currentGameLevel = 1;
function setUpGameLevel(levelNum) {
let x;
let current_Game_Level = 1;
function SetUpGameLevel(Level_Num) {



Add EXPLANATORY comments to your program to describe what the functions,
decisions, and loops do. Place comments before the relevant code and always align
comments with the code they’re explaining. Do not place code and comments on
the same line.
// creates a personalized greeting
document.getElementById('greet').onclick = function () {
. . .
// if they said yes to changing the color
if (changeColor) {
. . .
// keep asking for a name if they don't enter one
while (userName === "") {
Best Practices –documentation #4 & 5

 In this course, “good programming style” will consist of
these 5 elements:
1. Variables are declared at the start of script or function (1)
2. White space separates program blocks (1)
3. Statements inside blocks are always indented (2)
4. The brace that ends a block is aligned with start of block (1)
5. The HTML page that loads the JavaScript code is valid (5)
 All code submitted for marking must follow these
conventions for full marks. See course intro.
(function – 80%, documentation and style – 10% each)
Best Practices – Programming Style (10%)

To make it easier to read a script, declare all variables together and before any
code. Global variables are declared at the start of a .js file and if a function uses
(local) variables the declarations will be the first statements in it. Exceptions will be
noted as needed.
Worth 1 out of the 10 program style marks.
As a general rule you should also place one statement per line and terminate each
statement with a semi-colon.
let firstVar;
let secondVar, thirdVar; 
let firstVar
let secondVar; let thirdVar; 
Best Practices – Style #1

Use a blank line to
separate statements that
form a “unit” from other
statements.
Use a blank line to
separate functions from
each other and from
variable declarations.
Worth 1 out of the 10 program
style marks.
/*
ID and purpose comments
*/
// variable declarations
let variableOne = 1;
let variableTwo = "string";
… other code …
// function declarations
function aFunction() {
… function code …
}
line of white space as separator
line of white space as separator

/*
ID and purpose comments
*/
// variable declarations
let variableOne = 1;
let variableTwo = "string";
… other code …
// function declarations
}
Indent the statements in the
program block that contains
them.
Right now that means
functions, but later it will
include decision and
repetition statements.
Worth 2 out of the 10
program style marks.
indent

… other code …
// function declaration
}
// another one
function anotherOne() {
}
// one more
function oneMore()
{
}
Place the left or opening brace as
the last character on the line that
starts the block or as the only thing
on the line just below it and align it
with the word that starts the block.
Place the right or closing brace as
the only thing on the line, and align
it with the word that starts the
block.
Worth 1 out of the 10 program
style marks.

4/3/2020 75
Summary -M1 & M2 Takeaways
M1 -The Programming
Process
1. INPUT
2. OUTPUT
3. DECLARATION
4. EXPRESSION
5. DECISION
6. LOOP
properties methods eventsObject
e.g. DOM
START
input
Task(s)
STOP
Decision
output
Task(s)Task(s)
output
M2 – Getting Started with
JavaScript
Algorithms
PC, FC
Statements
IPO
Interactive &
Dynamic Web Page
DESIGN & WRITE
CODES
Browser
DOM
HTML
CSS JS
structure, “look”
• insert JS
• input/output
• events
presentation, “feel” behaviour, “act”
• I/O statements
• comments
• debug, best
practices

In-class coding - DOM
 Using the following sample files to write a greeting program with results in the next slide:
 Create your own external css
Note: In your console, move the “src=…” statement to above <button id…>, what happen?
(no need to include this in your submissions)
<!DOCTYPE html>
<html lang = "en">
<head>
<title>CWMD2601 – Scripting</title>
<meta charset = "utf-8" />
<!—enter your title info-->
</head>
<link rel="stylesheet" href="M2 Exercise.css" />
<h1>Module 2 Assignment0 -Extended Greeting</h1>
<body>
<label for = "name">NAME:</label>
<input type="text" id="name" size="15">
<label for = "program">PROGRAM:</label>
<input type="text" id="program" size="30" >
<p id = "greeting">Your personal greeting will display here</p>
<button id = "greet">
Display Greeting
</button>
<script src=“script.js"></script>
</body>
</html>
// creates a personalized greeting
document.getElementById('greet').onclick = function () {
// get user's name from the text field
var userName = document.getElementById('name').value;
// get user's name from the text field
var programName = document.getElementById('program').v
alue;
// greet user by name in the document
document.getElementById('greeting').textContent
= 'Hello ' + userName + '. Hope you are enjoying the
' + programName + ' program!';
document.getElementById('greeting').style.color = 'red
';
document.getElementById('greeting').style.backgroundCo
lor = 'yellow';
};
index.html
script.js

In-class coding – Sample results
Display
Result

Code that tells a browser what to do in
response to a specific event on a specific
HTML element is called a(n) __________.
A. method
B. event handlers
C. response
D. procedure
properties methods event handlers
Object
e.g. DOM
HINT
DOM
HTML
(structure, “look”)
CSS
(presentation, “feel")
JS
(behavior, “act”)

Which method displays a dialog box with an
OK button?
A. document.write()
B. document.writeln()
C. alert()
D. popup()
DOM
HTML
CSS
JS
Object
e.g. DOM
HINT

Which of the following is a valid
JavaScript DOM statement?
A. document.write(‘This course is called ‘CWMD2601.'')
B. document.write("This course is called "CWMD2601.” ")
C. document.write("This course is called ‘CWMD2601.“ ‘)
D. document.write("This course is called ‘CWMD2601.’ ")
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

What type of error occurs when the
interpreter fails to recognize code?
A. Debugging
B. Syntax
C. Run-time
D. Logic
Algorithms
(PC, FC)
Statements
(HTML,CSS, JS)
DEFINE GOALS
DESIGN & WRITE
CODES
Interpreter
(Browser)
The Process of
Programming
HINT
×

When a JavaScript interpreter encounters a
problem while a program is executing, that
problem is called a(n) ___ error.
A. application
B. syntax
C. logic
D. run-time
HINT
Algorithms
(PC, FC)
Statements
(HTML,CSS, JS)
DEFINE GOALS
DESIGN & WRITE
CODES
Interpreter
(Browser)×

______ errors are problems in the design of a
program that prevent it from running as you
anticipate.
A. Application
B. Syntax
C. Logic
D. Run-time
HINT
Algorithms
(PC, FC)
Statements
(HTML,CSS, JS)
DEFINE GOALS
DESIGN & WRITE
CODES
Interpreter
(Browser)
×

Which of the following IPO statements writes the
value of the selection variable to the console?
A. console.log("selection");
B. document.console("selection");
C. console.alert(selection);
D. console.log(selection);
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

What do you assign to the value property of a
text input box to remove its content?
A. FALSE
B. TRUE
C. ""
D. null
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

What will be the Output of the following
Code ?
A. Will not print anything
B. None of These
C. Will Throw Error
D. Hello

What is the correct JavaScript syntax to
write "Hello World“ to the HTML page?
A. System.out.println("Hello World")
B. println ("Hello World")
C. document.write("Hello World")
D. response.write("Hello World")
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

In the following codes, which is a DOM
statement?
A. function myFunction() {
B. <p id=“demo”>Header</p>
C. document.getElementById("demo").innerHTML = "new header";
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

document.getElementById() is a DOM method and to
return the object which has id = “demo”.
A. True
B. False
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

The highlighted statement is a DOM property which sets
the HTML content of the “demo” element
A. True
B. False
Object
e.g. DOM

The DOM statement will replace “Header” with
“new header”.
A. True
B. False

How many buttons are there in a JavaScript
alert box?
A. One
B. Two
C. None
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

Most browser support DOM getElementById
and getElementsByName methods
A. True
B. False
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

What is the correct JavaScript syntax to change
the content of the HTML element below?
A. document.getElementByName("p").innerHTML =
"Hellow World!";
B. document.getElementById(“demo").innerHTML =
"Hellow World!";
C. document.getElement("p").innerHTML = "Hellow
World!";
D. #demo.innerHTML = "Hello World!";
HINT
DOM
HTML
CSS
JS
Object
e.g. DOM

What is the correct JavaScript syntax to refer
to an external script file called "xxx.js"?
A. <script href="xxx.js">
B. <script src="xxx.js">
C. <script name="xxx.js">
DOM
HTML
CSS
JS
HINT
Object
e.g. DOM

With JavaScript, how do you write "Hello
World" in an alert box?
A. msgBox("Hello World");
B. alertBox"Hello World";
C. alert("Hello World");
D. alertBox("Hello World");
DOM
HTML
CSS
JS
HINT
Object
e.g. DOM

Actions that can be detected by JavaScript are
called?
A. Arrays
B. Events
C. Cookies
DOM
HTML
CSS
JS
HINT
Object
e.g. DOM

In the following statement, which is the DOM
event?
A. Arrays
B. Events
C. Cookies
DOM
HTML
CSS
JS
HINT
Object
e.g. DOM

In DOM, the ____ method returns a node list or
HTML collection of elements with a name
attribute that matches a specified value.
A. getElementsByName()
B. getElementById()
DOM
HTML
CSS
JS
HINT
Object
e.g. DOM

In DOM, the ____ method returns the first
element in a document with a matching id
attribute.
A. getElementsByName()
B. getElementById()
DOM
HTML
CSS
JS
HINT
Object
e.g. DOM

getting started with java script

More Related Content

Similar to getting started with java script (20)

More from Kopi Maheswaran (20)

Recently uploaded (20)

getting started with java script

Editor's Notes