WEB TECHNOLOGIES 2
JavaScript & Jquery
Lec3
Mohammed 1
Outlines
• JavaScript
• Jquery
2
What is JavaScript?
• HTML and CSS concentrate on a static rendering of
a page; things do not change on the page over time,
or because of events.
• To do these things, we use scripting languages,
which allow content to change dynamically.
• Not only this, but it is possible to interact with the
user beyond what is possible with HTML.
• Scripts are programs just like any other
programming language; they can execute on the
client side or the server.
3
What is JavaScript?
• it is mainly used for gives client side
validation, but it have lot of features which
are given below;
4
JavaScript
• In HTML, JavaScript code is inserted
between <script> and </script> tags.
• The script is containing 2 attributes :
– Language attribute
• <script language= "JavaScrip" >
– Type attribute :
• It indicates MIME (multi purpose internet mail extension)
type of scripting code. It sets to an alpha-numeric MIME
type of code.
– <script type="text/javascript ">
5
Benefits
• JavaScript Can Change HTML Content and
css
– One of many JavaScript HTML methods is
getElementById().
• [Link]("demo").innerHTML = "
Hello JavaScript";
• [Link]("demo").[Link] = "
35px";
• Hide HTML Elements
– [Link]("demo").[Link]
= "none";
JavaScript and Java are completely different
languages, both in concept and design. 6
Advantages of client side scripting
• The web browser uses its own resources,
and eases the burden on the server.
• It has fewer features than server side
scripting.
• It saves network bandwidth
7
Disadvantages of client side
scripting
• Code is usually visible.
• Code is probably modifiable.
• Local files and databases cannot be
accessed.
• User is able to disable client side scripting.
8
Methods of using JS
• Embedded JavaScript
– JavaScript can be embedded in an HTML document.
– To embed it in HTML you must write:
• <script type=”text/javascript”></script>
– The JavaScript can be placed in the head section of
your HTML or the body.
• Placing scripts at the bottom of the <body>
element improves the display speed, because
script interpretation slows down the display.
9
Methods of using JavaScript
• External JavaScript
– If you want to use the same script on several
pages it could be a good idea to place the code
in a separate file, rather than writing it on each.
– That way if you want to update the code, or
change it, you only need to do it once.
– Simply take the code you want in a separate file
out of your program and save it with the
extension .js.
10
External JavaScript
<html>
<body>
<script src="[Link]"></script>
</body>
</html>
• It makes HTML and JavaScript easier to read
and maintain
• Cached JavaScript files can speed up page
loads
11
JavaScript Variables
• 4 Ways to Declare a JavaScript Variable:
– Using var
– Using let
– Using const
– Using nothing
– Examples :
– Var x = 5; //for older versions of JS to 2015
– let y = 6; //the declaration after 2015
– const body_temp=37; // for not change values
–x = x + 5
the equal sign (=) is an "assignment" operator,
not an "equal to" operator
12
JavaScript naming and Comments
• A JavaScript name must begin with:
– A letter (A-Z or a-z)
– A dollar sign ($)
– Or an underscore (_)
• Comments :
– Code after double slashes // or between /* and */ is treated as a
comment.
– Comments are ignored, and will not be executed
• let x = 5; // I will be executed
• JavaScript is Case Sensitive
– The variables lastName and lastname, are two different variables
13
JavaScript Operators
let x = 5;
• JavaScript Arithmetic Operators: let y = 2;
– + Addition // let z = x + y;
– - Subtraction
– * Multiplication //let z = x * y;
– ** Exponentiation (ES2016)
– / Division
– % Modulus (Division Remainder)
– ++ Increment
– -- Decrement
14
JavaScript Array
• An array is a special variable, which can hold more
than one value.
• Syntax
– const array_name = [item1, item2, ...];
– By using new Array()
• const cars = new Array("Volvo", "BMW");
const cars = [
"Volvo",
"BMW"
];
15
Accessing Array Elements
• const cars = [ "Volvo", "BMW"];
• cars[0] = "Opel";
• To get all elements of the array :
– [Link]("demo").
innerHTML = cars;
16
JavaScript Array Methods
• toString()
– converts an array to a string of (comma separated)
array values.
– [Link]("demo").innerHTML =
[Link]();
• pop() : delete from the end
• push() : add at the end
• shift() :removeing the first element
• length : number of elements in array
• concat() :merge two arrays
– [Link](arr2, arr3);
17
JavaScript Functions
• in javascript functions are created with the
keyword function as show nbelow:
function funname( )
{
Your code here.......
}
• There are two ways to call the function.
• direct call function
• Events handlers to call the function dynamically
18
Calling functions example
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE> Function direct call</TITLE> <TITLE> Function dynamically</TITLE>
<script language="JavaScript"> <script language="JavaScript">
function add(x,y) function add( )
{ {
x=20
z=x+y
y=30
return z
z=x+y
} [Link]("addition is :"+z);
</script> }
</HEAD> </script>
<BODY> </HEAD>
<script> <BODY> to call function:
var r=add(30,60) <input type="button" value="click hare"
[Link]("addition is :"+r); onclick="add( )">
</script> </script>
</BODY> </BODY>
</HTML> </HTML>
19
JavaScript Conditions
• If and else if
if (condition1) {
code to be executed if condition1 is true
}
else if (condition2) {
code to be executed if condition2 is true
}
else {
code to be executed if neither condition1 nor
condition2 is true
}
20
JavaScript Loops
• JavaScript supports different kinds of loops:
– for - loops through a block of code a number of times
– for/in- loops through the properties of an object
– while - loops through a block of code while a specified
condition is true
– do/while - also loops through a block of code while a
specified condition is true
• The JavaScript for/in statement loops through the
properties of an object.
– var person={fname:"mohammed",lname:"ahmed",age:25};
– for (x in person)
–{
– txt=txt + person[x];
–}
21
JavaScript Objects
• JavaScript has several built-in objects, like
String, Date, Array, and more.
• An object is just a special kind of data, with
properties and methods.
• Accessing Object Properties:
– Properties are the values associated with an object.
– The syntax for accessing the property of an object
is below
• [Link]
22
Accessing Object Properties
• This example uses the length property of
the String object to find the length of a
string:
– var message="Hello World!";
– var x=[Link];
23
Accessing Objects Methods
• Methods are the actions that can be performed
on objects.
• You can call a method with the following syntax
– [Link]()
• This example uses the toUpperCase() method of
the String object, to convert a text to uppercase.
– var message="Hello world!";
– var x=[Link]();
24
JS Objects
25
JS Objects Constructor
26
Document Object in JS
• JavaScript Can Change HTML Content:
– [Link]("demo").innerHTML
= "Hello JavaScript";
• JavaScript Can Change HTML Styles(CSS):
– [Link]("demo").style.
fontSize = "35px";
• JavaScript Can Hide HTML Elements:
– [Link]("demo").[Link]
= "none";
[Link]=#126578; 27
Deleting JS Object Properties
• The delete keyword deletes a property
from an object:
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete [Link];
28
Built-in Objects
• JS String
• JS Date
• JS Array
• JS Boolean
• JS Math
• JS RegExp
29
Math Object
• The Math object allows you to perform
mathematical tasks.
• The Math object includes several
mathematical constants and methods.
• Syntax for using properties/methods of Math:
– var x=[Link];
– var y=[Link](16);
30
Math Object
• Math Object Methods:
– sqrt(x)
– abs(x)
– ceil(x)
– floor(x)
– round(x)
– sin(x)
– max(x,y,z,...,n)
– min(x,y,z,...,n)
– pow(x,y)
31
Events handling in JavaScript
• Event handlers are attributes that force an
element to "listen" for a specific event to occur.
• Event handlers all begin with the letters "on".
• Events are not case sensitive.
• There are two types of events in Javascript
– Interactive i.g. onClick
– Non-interactive i.g. onLoad
32
Events
• Attribute The event occurs when…
• onclick mouse click an object
• ondblclick. mouse double clicks
• onmouseover a mouse cursor on touch here
• onmousedown a mouse button ispressed
• onmousemove the mouse is moved
• on mouse out the mouse is moved out anelement
• onmouseup a mouse button isreleased
• onkeydown a keyboard key ispressed
• onkeypress a keyboard key is pressed or held down
• onkeyup a keyboard key isreleased
• onfocus an elements getfocus
• onchange the content of a fieldchange
• onsubmit the submit button isclicked
33
Example
<HTML>
<HEAD>
<script language="JavaScript">
function myf( )
{
[Link]("Hai Mohammed")
}
</script>
</HEAD>
<BODY>
to execute script code:
<input type="button" value="click me" onclick="myf( )">
To execute script code:
<input type="button" value="touch me" onmouseover="myf( )">
</BODY>
</HTML>
34
JavaScript frameworks
• Framework
– A JavaScript framework is a collection of pre-
written code built to support applications.
• Common frameworks:
– Angular
– React
– Vue
– Ember
– Next
– Node
35
A JS library for developing web pages
JQUERY
36
jQuery
• jQuery is a JavaScript Library.
• jQuery is easy to learn.
• The purpose of jQuery is to make it much
easier to use JavaScript on your website.
• jQuery is a lightweight, "write less, do
more", JavaScript library.
• jQuery will run exactly the same in all
major browsers.
37
Why jQuery?
• jQuery is probably the most popular, and also
the most extendable JavaScript library .
• Many of the biggest companies on the Web
use jQuery, such as:
– Google
– Microsoft
– IBM
– Netflix
38
Adding jQuery to Your Web Pages
• Download the jQuery library
– [Link]
• Include jQuery from a CDN (Content
Delivery Network)
– Ex: Google.
<head>
<head>
<script src="[Link]
<script src="
[Link]/ajax/
[Link]">
libs/jquery/3.6.0/jquery.
</script>
[Link]"></script>
</head>
</head> 39
jQuery Syntax
• $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML
elements
• A jQuery action() to be performed on the
element(s)
40
jQuery Syntax
$(document). $(function(){
ready(function(){ // jQuery methods go
// jQuery methods go here...
here... });
});
• This is to prevent any jQuery code from
running before the document is finished
loading (is ready).
41
jQuery Selectors
• jQuery selectors allow you to select and
manipulate HTML element(s).
• Select HTML elements based on their name,
id, classes, types, attributes, values of
attributes and much more.
• All selectors in jQuery start with the dollar
sign and parentheses: $().
42
jQuery Selectors
Element ID selector
$(document). $(document).
.
ready(function(){ ready(function(){
$("button").click(function(){ $("button").
$("p").hide(); click(function(){
});}); $("#test").hide();
});});
Class selector Element Class selector
$(document).
ready(function(){ $("[Link]")
$("button").
click(function(){ Selects all <p>
$(".test").hide(); elements with
});}); class="intro" 43
jQuery Event Methods
• All the different visitors actions that a web page can respond to
are called events.
• Syntax :
$("p").event(function(){
// action goes here!!
}); $("p").on({
• Common events: mouseenter: function(){
• click() $(this).css("background-color"
• dblclick()
• mouseenter()
, "lightgray"); },
• mouseleave() mouseleave: function(){
• hover() $(this).css("background-color"
• focus()
• On() , "lightblue");
},});
44
jQuery Effects
• Syntax :
– $(selector).hide(speed,callback);
• Speed values :"slow", "fast", or milliseconds.
• Callback :function to be executed after the hide() or show() method
completes
• Common jQuery Effects :
– hide() $("p").click(function(){
– show() $(this).hide();
– toggle()
– fadeIn()
});
– fadeOut()
– fadeToggle()
– fadeTo() :opacity value between 0 and 1
– slideDown()
– slideUp() $("input").focus(function(){
– slideToggle()
– focus()
$(this).css("background-color", "
#cccccc");}); 45
Downloading
• [Link]
– Ex: Version 3.6.0
• GTmetrix for website performance
• Lighthouse plug-in for measuring performance in
Chrome
• icomoon instead Awesome icon
46
Any Questions?
47
