JavaScript
InformationTechnology
introduction
JavaScript is the world's most popular programming language
JavaScript is the programming language of the Web.
JavaScript is easy to learn
Examples are better than 1000 words. Examples are often easier to understand than
text explanations.
JavaScript is one of the 3 languages all web developers must learn:
The only way to become a clever programmer is to: Practice. Practice. Practice. Code.
Code. Code
JavaScript is already running in your browser on your computer, on your tablet, and on
your smart-phone
JavaScript is free to use for everyone
What javaScript can do?
[Link]/information_technology3
1
JavaScript Where To
1-The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in
both
2-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
External scripts cannot contain <script> tags
3-HTML inline
[Link]/information_technology3
2
JavaScript Output
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using [Link]().
Writing into an alert box, using [Link]().
Writing into the browser console, using [Link]()
1-Using innerHTML
2-Using [Link]()
Using [Link]() after an HTML document is loaded, will delete all existing HTML
The [Link]() method should only be used for testing
[Link]/information_technology3
3
3-Using [Link]()
In JavaScript, the window object is the global scope object, that means that variables,
properties, and methods by default belong to the window object. This also means that
specifying the window keyword is optional
4-Using [Link]()
[Link]/information_technology3
4
JavaScript Syntax
1- Semicolons separate JavaScript statements.
2- JavaScript ignores multiple spaces. You can add white space to your script to make it
more readable.
3- The following lines are equivalent:
4- If a JavaScript statement does not fit on one line, the best place to break it:
5- JavaScript statements can be grouped together in code blocks, inside curly brackets
{...}
The purpose of code blocks is to define statements to be executed together.
6-Here is a list of some of the keywords you will learn about in this tutorial
[Link]/information_technology3
5
6- Numbers are written with or without decimals
7- Strings are text, written within double or single quotes
8-Code after double slashes // or between /* and */ is treated as a comment.
9- The variables lastName and lastname, are two different variables
10-Hyphens are not allowed in JavaScript. They are reserved for subtractions
[Link]/information_technology3
6
JavaScript Variables
Ways to Declare a JavaScript Variable:
Using var
Using let
Using const (These are constant values and cannot be changed)
The main difference is scoping rules. Variables declared by var keyword are scoped to the immediate
function body (hence the function scope) while let variables are scoped to the immediate enclosing block
denoted by { }
[Link]/information_technology3
7
JavaScript Identifiers
All JavaScript variables must be identified with unique names
the general rules for constructing names for variables (unique identifiers) are:
o Names can contain letters, digits, underscores, and dollar signs.
o Names must begin with a letter
o Names can also begin with $ and _
o Names are case sensitive (y and Y are different variables)
o Reserved words (like JavaScript keywords) cannot be used as names
Example:
In the example below, we create a variable called carName and assign the value "Volvo" to it
A variable declared without a value will have the value undefined
[Link]/information_technology3
8
Operators
x ** y produces the same result as [Link](x,y)
[Link]/information_technology3
9
JavaScript String Operators
[Link]/information_technology3
10
Used To Combine Comparison Operators
[Link]/information_technology3
11
Conditional Statements(if)
Use if to specify a block of code to be executed, if a specified condition is true
Use else if to specify a new condition to test, if the first condition is false
Use else to specify a block of code to be executed, if all the conditions is false
[Link]/information_technology3
12
[Link]/information_technology3
13
JavaScript Loops
Example:
[Link]/information_technology3
14
Use While Loop When Number of Iterations is not Known
Use For Loop When Number of Iterations is Known
[Link]/information_technology3
15
Code Flow
The break statement in JavaScript is used to terminate or end the execution
of the loop depending upon some condition and the flow of control passes to
the statement
The continue statement in JavaScript is used to skip the execution of
statements of the loop for the current iteration and continue with the next
iteration of the loop
[Link]/information_technology3
16
Functions
A JavaScript function is a block of code designed to perform a particular task
You can reuse code: Define the code once, and use it many timesSyntax:
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
The code to be executed, by the function, is placed inside curly brackets: {}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked
Inside the function, the arguments (the parameters) behave as local variables.
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after the
invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":
[Link]/information_technology3
17
Events
HTML events are "things" that happen to HTML elements
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
JavaScript lets you execute code when events are detect
HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements
JavaScript code is often several lines long. It is more common to see event attributes calling
functions:
[Link]/information_technology3
18
Common HTML Events
onload script Fires after the page is finished loading
onunload script Fires once a page has unloaded (or the browser window has
been closed)
onresize script Fires when the browser window is resized
onblur script Fires the moment that the element loses focus
onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
onmousedown script Fires when a mouse button is pressed down on an element
onmouseup script Fires when a mouse button is released over an element
onmouseover script Fires when the mouse pointer moves over an element
onmouseout script Fires when the mouse pointer moves out of an element
onfocus script Fires the moment when the element gets focus
onreset script Fires when the Reset button in a form is clicked
onsubmit script Fires when a form is submitted
onchange script Fires the moment when the value of the element is changed
[Link]/information_technology3
19
JavaScript HTML Elements
Often, with JavaScript, you want to manipulate HTML elements.
To do so, you have to find the elements first. There are several ways to do this:
Finding HTML elements by id
Finding HTML elements by tag name
[Link]/information_technology3
20
Finding HTML elements by class name
Finding HTML elements by CSS selectors
[Link]/information_technology3
21
Changing HTML Style
[Link]/information_technology3
22
Objects
In JavaScript, objects are king. If you understand objects, you understand JavaScript.
Objects are variables too. But objects can contain many values.
Object values are written as name : value pairs (name and value separated by a colon).
JavaScript Objects
[Link]/information_technology3
23
Window Object Properties
closed Returns a boolean true if a window is closed.
innerHeight Returns the height of the window's content area (viewport) including scrollbars
innerWidth Returns the width of a window's content area (viewport) including scrollbars
Window Object Methods
close() Closes the current window
open() Opens a new browser window
prompt() Displays a dialog box that prompts the visitor for input
confirm() Displays a dialog box with a message and an OK and a Cancel button
alert() Displays an alert box with a message and an OK button
Document Object Attributes
[Link] Returns the <title> element 1
[Link] Returns the complete URL of the document
[Link] Returns all <form> elements 1
[Link] Returns all <img> elements 1
Example:
[Link]/information_technology3
24
[Link]/information_technology3
25
Example:
[Link]/information_technology3
26
Example:
[Link]/information_technology3
27
Document Object: Elements data
Get element inner html
What is this?
In JavaScript, the this keyword refers to current object
Example:
[Link]/information_technology3
28
JavaScript String Methods
replace() returns a string where the values are replaced
toLowerCase() Returns a string converted to lowercase letters
toUpperCase() Returns a string converted to uppercase letters
trim() Returns a string with removed whitespaces
charAt() Returns the character at a specified index (position)
JavaScript String Attributes
length Returns the length of a string
Examples
1-Replace
[Link]/information_technology3
29
2-ToLowerCase
3-ToUpperCase
4-Trim
[Link]/information_technology3
30
5- .length attribute
[Link]/information_technology3
31
TS2 Web Development
Telegram: [Link]
[Link]/information_technology3
32