Lecture 14

Web Technologies
Introduction to JavaScript
Today’s Lecture
• JavaScript
– JavaScript Introduction
– Adding JavaScript to HTML
– Variable Declaration
– Data Types
– Operators
JavaScript
• JavaScript was invented by Brendan Eich in 1995.
• JavaScript springs into action when the user asks the page to
perform a task; like a user clicking button.
• JavaScript works with HTML and CSS.
– HTML defines the structure of web page.
– CSS defines the style of web page.
– JavaScript to program defines the action of web page.
JavaScript
JavaScript
• Versions of JavaScript
• Original JavaScript ES1 ES2 ES3 (1997-1999)
• First Main Revision ES5 (2009)
• Second Revision ES6 (2015)
• All Yearly Additions (2016, 2017, 2018, 2019, 2020)
• ES – ECMAScript (European Computer Manufacturers Association Script)
Adding JavaScript to HTML
• Embed <script> tag
– In HTML, JavaScript code must be inserted between <script> and
</script> tags.
<script>
… (JavaScript code goes here) …
</script>
• Scripts can be placed in <head> or <body> section of an HTML
page, or both.
• External JavaScript
– Scripts can also be placed in the external files.
– External scripts are practical when same code is used in many
different web pages.
– JavaScript files have the file extension .js
– To use an external script, put name of the script file in the src
(source) attribute of a <script> tag:
• <script src="myScript.js"></script>
JavaScript Display Properties
 JavaScript can "display" data in different ways:
 Writing into an HTML element, use innerHTML
 Writing into the HTML output use document.write()
 Writing into an alert box, use window.alert()
 Writing into the browser console, use console.log()
Variable Declaration
• Variable is like an information container.
• Give it a name and then assign it a value.
– Value can be a number, text string, or a function.
• General Rules for Constructing Names for Variables:
– Names must begin with a letter, $ (dollar sign) or _ (underscore)
– Names can contain letters, digits, underscores, and dollar signs
– Names are case sensitive (y and Y are different variables)
• Example:
– var name = 5;
– var mytitle = "Professor";
– var carName = "Volvo";
Variable Declaration
Data Types
• JavaScript has dynamic types.
– It means variable (name) can be used to hold different data
types.
• undefined
– If we declare a variable by giving its name without value, that
variable contains a value of “undefined”.
var myName;
alert(myName); //this will open dialog containing undefined
• boolean
– It can only have two values: true or false.
var myOption = true; // variable myOption is true
Data Types
• number
– We can assign variables numeric values.
var myNum = 5;
alert(myNum); // this will open a dialog containing 5
• string
– It’s basically a line of text.
var mySuggestion = "five";
alert( mySuggestion ); // this will alert five
Object
• It’s a complex data type that allow to store collections of data.
• It contains properties, written as name:value (name and value
separated by a colon).
• Property name is always a string, but value can be any data type.
– Like string, number, boolean, or complex data types.
• Example: create an object "person" with their properties:
var person = {firstName:"John", lastName:"Doe", age:30,
eyeColor:"blue"};
– In above example, object "person" has four properties:
firstName, lastName, age, and eyeColor.
• Object Property
– name:value pair in JavaScript object is known as Object
Property.
Object
<!DOCTYPE html>
<html>
<body>
<h3>JavaScript Objects</h3>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:30, eyeColor:"blue"};
document.getElementById("demo").innerHTML = person.firstName + " is " +
person.age + " years old.";
</script>
</body>
</html>
Array
• It’s a group of multiple values (called members) that can be
assigned to a single variable.
– It’s a way to store a list of items, or values.
• Values in an array are said to be indexed.
• First member is given index number 0, second is 1, and so on.
• Example: values in the array ftps can be accessed by referencing
their index number:
– var ftps = ["five", "seven", "nine"];
• alert( ftps[0] ); // alerts "five"
• alert( ftps[2] ); // alerts "nine"
Array
• pop() Method
– It removes elements items out of an array (last element).
<body>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
• push() Method
o It adds new elements items into an array (at the end).
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
</script>
Array
• array.map() Method
– It creates a new array from calling a function for each element in
an array.
<p id="demo"></p>
<script>
var numbers = [4, 16, 25];
document.getElementById("demo").innerHTML = numbers.map(Math.sqrt);
</script>
• array.filter() Method
o It creates a new array with array filled with elements that pass
a test.
<p id="demo"></p>
<script>
var ages = [17, 18, 19, 20, 20, 24];
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
function checkAdult(age) {
return age >= 18;
} </script>
Array
• array.reduce() Method
– Executes to reduce each array element from left to right.
– It returns a single value.
<p id="demo"></p><script>
var numbers = [175, 50, 25];
document.getElementById("demo").innerHTML = numbers.reduce(myFunc);
function myFunc(total, num) {
return total - num;}</script>
• array.reduceRight() Method
o Executes to reduce each array element from right to left.
o It returns a single value.
<p id="demo"></p>
<script>
var numbers = [175, 50, 25];
document.getElementById("demo").innerHTML = numbers.reduceRight(myFunc);
function myFunc(total, num) {
return total - num;}</script>
Array
• array.every() Method
⁻ It executes a function for each array element.
⁻ It returns true; if the function returns true for all elements.
⁻ It returns false; if the function returns false for one element.
var ages = [19, 31, 26, 15, 30];
document.getElementById("demo").innerHTML = ages.every(checkAge);
function checkAge(age) { return age > 18; }</script>
• array.some() Method
₋ It checks if any array elements pass a test.
₋ It returns true; if function returns true for one of array elements.
₋ It returns false; if function returns false for all array elements.
var ages = [19, 31, 26, 15, 30];
document.getElementById("demo").innerHTML = ages.some(checkAge);
function checkAge(age) { return age > 18; }</script>
Array
• array.indexOf() Method
₋ It returns first index (position) of a specified value.
₋ Search starts at the first element and ends at the last.
<p id="demo">
</p><script>
var fruits = ["Banana", "Orange", "Apple", "Mango", "Apple"];
var indexing = fruits.indexOf("Apple");
document.getElementById("demo").innerHTML = indexing;
</script>
• array.lastIndexOf() Method
₋ It returns last index (position) of a specified value.
₋ Search starts at the last element and ends at the first.
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango", "Apple"];
var indexing = fruits.lastIndexOf("Apple");
document.getElementById("demo").innerHTML = indexing;
</script>
Array
• array.find() Method
₋ It returns value of the first element that passes a test.
₋ It executes a function for each array element.
₋ It returns undefined if no elements are found.
var ages = [3, 21, 10, 18, 19, 20];
document.getElementById("demo").innerHTML = ages.find(checkAge);
function checkAge(age) { return age > 18; }
</script>
• array.findIndex() Method
₋ It returns index of the first element that passes a test.
₋ It returns -1 if no match is found.
var ages = [3, 21, 10, 18, 19, 20];
document.getElementById("demo").innerHTML = ages.findIndex(checkAge);
function checkAge(age) { return age > 18; }
</script>
Functions
• It’s a block of code designed to perform a particular task.
• It’s defined with function keyword, followed by a name, and
parentheses ().
• Function names can contain letters, digits, underscores, and dollar
signs.
• Example
function myFunction(a, b)
{return a * b;}
Operators
• Comparison Operator
 By comparing two values, JavaScript evaluates statement and
gives back Boolean value depending on whether statement is
true or false.
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
• Example:
– alert( 5 == “5” ); // this will alert "true"
– alert( 5 != 6 ); // this will alert "true"
– alert( 5 < 1 ); // this will alert “false"
Operators
• Arithmetic Operator
 Arithmetic operators are used to perform arithmetic on numbers.
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus (division remainder)
++ Increment
-- Decrement
Summary of Today’s Lecture
• JavaScript
– JavaScript Introduction
– Adding JavaScript to HTML
– Variable Declaration
– Data Types
– Operators
References
• Chapter 19 and Chapter 20 from Learning Web Design- A Beginner’s
Guide to HTML, CSS, Javascript and Web Graphics By Jennifer
Niederst Robbins (4th Edition)
• Chapter 8 from Web Programming with HTML5, CSS, and JavaScript
By John Dean, Jones and Bartlett Learning 2018
• https://www.w3schools.com/js/
• https://www.w3schools.com/js/js_object_definition.asp
• https://www.w3schools.com/js/js_arrays.asp
• https://www.w3schools.com/js/js_comparisons.asp
• https://www.w3schools.com/js/js_arithmetic.asp

Lecture 14

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 14

Uploaded by

Copyright:

Available Formats

Web Technologies

You might also like