[go: up one dir, main page]
Scribd
Upload
8 views48 pages

Lecture_8

i want to download this book

Uploaded by

jibransarwari2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views48 pages

Lecture_8

i want to download this book

Uploaded by

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

Introduction

Mozamel Jawad December, 2022


Introduction

 JavaScript is the world's most popular programming language.

 JavaScript is the programming language of the Web.

 JavaScript is easy to learn.


Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages


2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().


• The example below "finds" an HTML element (with id="demo"), and
changes the element content (innerHTML) to "Hello JavaScript":

JavaScript accepts both double and single quotes:


JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source)


attribute of an <img> tag:
JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an


HTML attribute:

JavaScript Can Hide and Show HTML Elements


Hiding HTML elements can be done by changing the display style:
JavaScript Where To

The <script> Tag


In HTML, JavaScript code is inserted between <script> and </script>
tags.
JavaScript in <head> or <body>

• You can place any number of scripts in an HTML document.

• Scripts can be placed in the <body>, or in the <head> section of an


HTML page, or in both.
JavaScript in <head>

• In this example, a JavaScript function is placed in the <head> section


of an HTML page.

The function is invoked (called)


when a button is clicked:
JavaScript in <body>

• In this example, a JavaScript function is placed in the <body> section


of an HTML page.

The function is invoked (called)


when a button is clicked:
External JavaScript
• External scripts are practical when the same code is used in many
different web pages.
• JavaScript files have the file extension .js.
• To use an external script, put the name of the script file in the src
(source) attribute of a <script> tag:
JavaScript Output

JavaScript Display Possibilities

JavaScript can "display" data in different ways:


• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().
Using innerHTML
• To access an HTML element, JavaScript can use the
document.getElementById(id) method.
• The id attribute defines the HTML element. The innerHTML property
defines the HTML content:
Using document.write()
• For testing purposes, it is convenient to use document.write():
Using window.alert()
• You can use an alert box to display data:

You can skip the window keyword.


Using console.log()
• For debugging purposes, you can call the console.log() method in the
browser to display data.
JavaScript Print
• JavaScript does not have any print object or print methods.
• You cannot access output devices from JavaScript.
• The only exception is that you can call the window.print() method in
the browser to print the content of the current window.
JavaScript Programs
• A computer program is a list of "instructions" to be "executed" by a
computer.
• In a programming language, these programming instructions are
called statements.
• A JavaScript program is a list of programming statements.

• In HTML, JavaScript programs are executed by the web browser.


JavaScript Statements
• JavaScript statements are composed of:
• Values, Operators, Expressions, Keywords, and Comments.
• This statement tells the browser to write "Hello Dolly." inside an
HTML element with id="demo":
JavaScript Syntax
JavaScript Values
• The JavaScript syntax defines two types of values:
• Fixed values
• Variable values
• Fixed values are called Literals.
• Variable values are called Variables.
JavaScript Literals
The two most important syntax rules for fixed values are:
1. Numbers are written with or without decimals:
E.g. ( 10, 10.5)

2. Strings are text, written within double or single quotes:


E.g: "John Doe" or 'John Doe'
JavaScript Variable
• In a programming language, variables are used to store data values.
• JavaScript uses the keywords var, let and const to declare variables.
• An equal sign is used to assign values to variables.
• In this example, x is defined as a variable. Then, x is assigned (given)
the value 6:

let x;
x = 6;
JavaScript Operators
• JavaScript uses arithmetic operators ( + - * / ) to compute values:

• JavaScript uses an assignment operator ( = ) to assign values to


variables:
JavaScript Expressions
• An expression is a combination of values, variables, and operators,
which computes to a value.
• The computation is called an evaluation.
• For example, 5 * 10 evaluates to 50:

• The values can be of various types, such as numbers and strings.


• For example, "John" + " " + "Doe", evaluates to "John Doe":
JavaScript Comments
• Not all JavaScript statements are "executed".

• Single line Comment: double slashes //


• Multi Line Comment: between /* and */

• Comments are ignored, and will not be executed:


JavaScript Variables
4 Ways to Declare a JavaScript Variable:

1. Using var
2. Using let
3. Using const
4. Using nothing
What are Variables?
• Variables are containers for storing data (storing data values).
• In this example, x, y, and z, are variables, declared with the var
keyword:
In this example, x , y , and z , are variables, declared with the let keyword:

• In this example, x , y , and z , are undeclared variables


JavaScript Let
• The let keyword was introduced in ES6 (2015).
• Variables defined with let cannot be Redeclared.
• Variables defined with let must be Declared before use.
• Variables defined with let have Block Scope.
JavaScript Const
• The const keyword was introduced in ES6 (2015).
• Variables defined with const cannot be Redeclared.
• Variables defined with const cannot be Reassigned.
• Variables defined with const have Block Scope.
JavaScript Operators

• Types of JavaScript Operators


• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• Logical Operators
• Conditional Operators
JavaScript Arithmetic Operators
Arithmetic Operators are used to perform arithmetic on numbers:

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
JavaScript Assignment Operators

• Assignment operators assign values to JavaScript variables.


The Addition Assignment Operator ( += ) adds a value to a variable.

Operator Example Same As


= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
JavaScript Comparison Operators

Operator Description
== 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
? ternary operator
JavaScript Logical Operators

Operator Description

&& logical and

|| logical or

! logical not
JavaScript Functions
• A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
JavaScript Function Syntax
• A JavaScript function is defined with the function keyword, followed by a
name, followed by parentheses ().
• Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).
• The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
Why Functions?
• You can reuse code: Define the code once, and use it many times.
• You can use the same code many times with different arguments, to
produce different results.
JavaScript Events

• HTML events are "things" that happen to HTML elements.


When JavaScript is used in HTML pages, JavaScript can "react" on
these events.
• Here are some examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
• Often, when events happen, you may want to do something.
• JavaScript lets you execute code when events are detected.
Common HTML Events

Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page


Conditional Statements
• Very often when you write code, you want to perform different
actions for different decisions.
• You can use conditional statements in your code to do this.
• In JavaScript we have the following conditional statements:

• Use if to specify a block of code to be executed, if a specified condition is true


• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition
is true.
JavaScript Switch Statement
• The switch statement is used to perform different actions based on different conditions.
JavaScript Loops
• Loops are handy, if you want to run the same code over and over
again, each time with a different value.
JavaScript While Loop
• Loops can execute a block of code as long as a specified condition is true.
The Do While Loop
• The do while loop is a variant of the while loop. This loop will execute the code block
once, before checking if the condition is true, then it will repeat the loop as long as the
condition is true.
Finding HTML Elements

Method Description

document.getElementById(id) Find an element by element id

document.getElementsByTagName(name) Find elements by tag name

document.getElementsByClassName(name) Find elements by class name

You might also like