[go: up one dir, main page]

0% found this document useful (0 votes)
25 views26 pages

Lecture 14

This document provides an introduction to JavaScript and its basic concepts. It discusses how JavaScript can be added to HTML documents, variable declaration and data types in JavaScript including numbers, strings, booleans, objects and arrays. It also covers JavaScript functions and operators. Key array methods like map, filter, reduce, find and indexOf are explained. The document is intended as an introductory lecture on JavaScript.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views26 pages

Lecture 14

This document provides an introduction to JavaScript and its basic concepts. It discusses how JavaScript can be added to HTML documents, variable declaration and data types in JavaScript including numbers, strings, booleans, objects and arrays. It also covers JavaScript functions and operators. Key array methods like map, filter, reduce, find and indexOf are explained. The document is intended as an introductory lecture on JavaScript.

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

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>
Adding JavaScript to HTML
Adding JavaScript to HTML
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.
<p id="demo"></p><script>
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.
<p id="demo"></p><script>
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.
<p id="demo"></p><script>
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.
<p id="demo"></p><script>
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

You might also like