Scribd
Upload
36 views47 pages

Web2 Lec3

The document provides an overview of JavaScript and jQuery, outlining what JavaScript is, how it is used to dynamically change HTML content and styles, and its advantages over server-side scripting like allowing for user interaction and running scripts on the client-side. It also discusses jQuery, JavaScript variables, data types, operators, arrays, functions, conditions, loops, and objects.

Uploaded by

rafeak rafeak
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
36 views47 pages

Web2 Lec3

The document provides an overview of JavaScript and jQuery, outlining what JavaScript is, how it is used to dynamically change HTML content and styles, and its advantages over server-side scripting like allowing for user interaction and running scripts on the client-side. It also discusses jQuery, JavaScript variables, data types, operators, arrays, functions, conditions, loops, and objects.

Uploaded by

rafeak rafeak
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/ 47

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().
• document.getElementById("demo").innerHTML = "
Hello JavaScript";
• document.getElementById("demo").style.fontSize = "
35px";
• Hide HTML Elements
– document.getElementById("demo").style.display
= "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="myScript.js"></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 :
– document.getElementById("demo").
innerHTML = cars;

16
JavaScript Array Methods
• toString()
– converts an array to a string of (comma separated)
array values.
– document.getElementById("demo").innerHTML =
array.toString();

• 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
– arr1.concat(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
} document.write("addition is :"+z);
</script> }
</HEAD> </script>
<BODY> </HEAD>
<script> <BODY> to call function:
var r=add(30,60) <input type="button" value="click hare"
document.write("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
• objectName.propertyName

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=message.length;

23
Accessing Objects Methods
• Methods are the actions that can be performed
on objects.

• You can call a method with the following syntax


– objectName.methodName()

• This example uses the toUpperCase() method of


the String object, to convert a text to uppercase.
– var message="Hello world!";
– var x=message.toUpperCase();

24
JS Objects

25
JS Objects Constructor

26
Document Object in JS
• JavaScript Can Change HTML Content:
– document.getElementById("demo").innerHTML
= "Hello JavaScript";

• JavaScript Can Change HTML Styles(CSS):


– document.getElementById("demo").style.
fontSize = "35px";

• JavaScript Can Hide HTML Elements:


– document.getElementById("demo").style.display
= "none";
Document.bgcolor=#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 person.age;

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=Math.PI;
– var y=Math.sqrt(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( )
{
document.write("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


– jQuery.com
• Include jQuery from a CDN (Content
Delivery Network)
– Ex: Google.
<head>
<head>
<script src="https://ajax.
<script src="
googleapis.com/ajax/
jquery-3.6.0.min.js">
libs/jquery/3.6.0/jquery.
</script>
min.js"></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(){ $("p.intro")
$("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

• https://jquery.com/
– 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

You might also like