Scribd
Upload
36 views

05 Handout 1

JavaScript is a scripting language used to manipulate web page content. It can update HTML and CSS dynamically. JavaScript code can be included inline, internally via <script> tags, or externally in .js files. Variables in JavaScript are dynamically typed and do not require data type declarations. Common data types include strings, numbers, booleans, null, and undefined. JavaScript provides various methods to output content to the browser window, such as innerHTML, document.write(), window.alert(), and console.log(). Control flow statements like if/else and try/catch allow JavaScript code to handle different program paths. Operators allow assigning values, comparing values, and performing math operations.

Uploaded by

John
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

05 Handout 1

JavaScript is a scripting language used to manipulate web page content. It can update HTML and CSS dynamically. JavaScript code can be included inline, internally via <script> tags, or externally in .js files. Variables in JavaScript are dynamically typed and do not require data type declarations. Common data types include strings, numbers, booleans, null, and undefined. JavaScript provides various methods to output content to the browser window, such as innerHTML, document.write(), window.alert(), and console.log(). Control flow statements like if/else and try/catch allow JavaScript code to handle different program paths. Operators allow assigning values, comparing values, and performing math operations.

Uploaded by

John
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

IT1804

JavaScript Basics
JavaScript
- It is a scripting language used to manipulate the contents of a Web page. It can be both HTML and CSS.
- Using JavaScript, it can animate, move, transition, and hide HTML elements.
- JavaScript is different from Java. Java is a compiled, object-oriented programming language known for its ability to
run on any platform with a Java Virtual Machine installed, while JavaScript only runs in a browser.
- JavaScript's file extension is .js
Comment
- The comment in JavaScript prevents the execution of the program or explain the JavaScript Code.
- There are two (2) styles of comment:
o The single line or end-of-line comment starts with two (2) forward slashes //.
o The block or multi-line comment begins with /* and ends with */.
Locations
- JavaScript can be linked in a number of ways in an HTML file. It can be inline, embedded (internal), and external
JavaScript.
- Inline JavaScript
o The inline JavaScript refers to including or placing the JavaScript code directly within certain attributes of an
HTML.

- Embedded (Internal) JavaScript


o This refers to including or placing the JavaScript code inside the <script> element.

- External JavaScript
o This refers to the external file of a JavaScript that is placed within the <head> element, similar to the case
of external CSS files. It is also possible to include this external file inside the <body> element, and it is
recommended to place it at the bottom.

Variables
- Variables in JavaScript are dynamically typed. It means that the variable can be a string, an integer, and then later an
object.
- In declaring a variable, the var keyword is usually followed by the desired variable name and a semicolon. It simplifies
the variable declarations, and it doesn't need or require the common data types, such as int, char, double or float,
and string, once the value is set as a string (var str = "hello world!";). It is already set as a string variable,
and if the value is a number (var num = 5;), then it is set as an integer.

05 Handout 1 *Property of STI


[email protected] Page 1 of 8
IT1804
Data Type
- In JavaScript, data type specifies which type of value a variable contains.
- There are six (6) primitive data types that are supported in JavaScript:
o String – The string data type represents textual data.
o Boolean – The Boolean data type contains a logical entity that may return a value of TRUE or FALSE.
o Number – The number data type can be an integer or a decimal.
o Null – This data type represents an unknown or missing value.
o Undefined – It refers to a variable that has no value. The undefined keyword can be set in the variable.
JavaScript Output
- In JavaScript, there are different ways to display the data in the browser:
o innerHTML
▪ The innerHTML is used to display the output in an HTML element.

o document.write();
▪ This syntax is used to display the data in the HTML document.

o window.alert();
▪ The alert function shows a pop-up message to the browser.

o console.log();
▪ This function displays the output in a console. The console for JavaScript can be seen in the developer
tools of a Web browser.
▪ The console object refers to the console of developer tools in a Web browser, while the log
method prints the data.

Control Flow
Control Flow Statement
- The control flow statement refers to the decisions or conditions that the executed program may depend on its
output.
- This control statement contains the following:
o if – the if statement returns true if the specified condition is true.

05 Handout 1 *Property of STI


[email protected] Page 2 of 8
IT1804
o if-else – the if-else statement returns true if the condition is true; otherwise, it returns false.

o else if – the else if statement is used if the first condition is false; otherwise, the second condition is
true and so on.

o switch – The switch statement is the same as the if-else statement. It evaluates an expression and
matches the expression's value but in the case label.

05 Handout 1 *Property of STI


[email protected] Page 3 of 8
IT1804
o try…catch – The try…catch statement is used to block a statement(s) to try and respond with an
exception.
▪ This statement consists of the following:
• try – The try block contains one (1) or more statements.
• catch – The catch block contains a statement of what to do when the try block throws an
exception.

Operator
- It is used to assign values in a variable.
- The following types are operators in JavaScript:
o Assignment operator
▪ The assignment operator is used to assign the value to its left operand or variable.
▪ The following are the common assignment operators in JavaScript:
• =
o Assigns the value to a variable
• +=
o Adds the value to a variable
• -=
o Subtracts the value from a variable
• *=
o Multiplies the value by a variable
• /=
o Divides the value by a variable
o Comparison operators
▪ The comparison operator compares the two (2) variables or operands.
▪ The following comparison operators are:
• ==
o Equal to the value of the variable or operand.
• ===
o Equal value and equal type
• < , >
o Less than and greater than
• <= , >=
o Less than or equal to and greater than or equal to
• !=
o Not equal to the value of the variable or operand.
o Arithmetic operators
▪ The arithmetic operator performs addition, subtraction, multiplication, and division.
▪ The following arithmetic operators are:
• Addition ( + )
o This arithmetic operator adds two (2) operands or two (2) variables that contain
number values.
• Subtraction ( - )
o This arithmetic operator subtracts two (2) operands or two (2) variables that
contain number values.
• Multiplication ( * )
o This arithmetic operator multiplies two (2)operands or two (2) variables that contain
number values.

05 Handout 1 *Property of STI


[email protected] Page 4 of 8
IT1804
• Division ( / )
o This arithmetic operator divides two (2) operands or two (2) variables that contain
number values.
• Modulus ( % )
o The modulus operator gets the remainder of the division of the two (2) numbers.
• Increment ( ++ )
o This operator adds one (1) in the operand.
• Decrement ( -- )
o This operator subtracts one (1) from the operand.
o Logical operators
▪ The logical operator uses Boolean values.
▪ There are three (3) logical operators, and they are the following:
• AND ( && )
o The AND operator returns true if both values are true.
• OR ( || )
o The OR operator returns true if either expression1 or expression2 is true.
• NOT ( ! )
o The NOT operator will return true if the expression1 is false.
o Ternary operator
▪ The ternary operator is the same as the if-else statement that if the condition is true, then
execute the statement; otherwise, return false.

Loops and Iterations


for Loop
- A for loop specifies the number of loops of an object.
- The for loop contains three (3) expressions:
o Initialization
▪ The first expression is known as the counter of the for loop.
o Condition
▪ The second expression is condition; it will check if the condition will return true or false.
o Increment/Decrement
▪ The third expression specifies the number of loops based on the condition; it may increment or
decrement this loop.

05 Handout 1 *Property of STI


[email protected] Page 5 of 8
IT1804

for in
- It is used to loop the properties of an object or an array.

do-while
- It is used to loop the statement until it evaluates to false.
- The do-while will execute the block of code first before checking if the condition will evaluate to true.

while
- The while loop is the most basic loop. It only uses a condition. The while loop is like an if statement that
repeatedly runs until a condition is satisfied.

05 Handout 1 *Property of STI


[email protected] Page 6 of 8
IT1804

label
- The label statement identifies a statement and uses a break or continue statement to indicate whether the
executed code will interrupt a loop or continue its execution.

break
- The break statement is used to terminate a loop, switch, and a labeled statement.

05 Handout 1 *Property of STI


[email protected] Page 7 of 8
IT1804
continue
- The continue statement is used to repeat a loop, condition, or a labeled statement.

Functions
Functions
- A function is a block of code or modular code in JavaScript that performs a specific task. The function is defined in
the
function keyword followed by the function name and parameters enclosed in parentheses.
- Parameters in a function are accessible within the body of the function.

- The function may also return a value once you declare the parameters.

REFERENCES:
1. Connolly, R. & Hoar, R. (2015). Fundamentals of web development. New Jersey: Pearson Education, Inc.
2. Lemay, L., Colburn, R., & Kyrnin, J. (2016). Sams teach yourself html, CSS and JavaScript web publishing in one hour a day (7th Ed.).
New Jersey: Pearson Education, Inc.
3. Krause, J. (2016). Introducing web development. California: Apress Media, LLC.

05 Handout 1 *Property of STI


[email protected] Page 8 of 8

You might also like