Lecture 2 FS

Full Stack Development
(IT432)
Anju Mishra
Department of Information Technology
1
Module II- Introduction to jQuery
Topic Name- Introduction to jQuery and its installation
Subtopic Name: Definitions, Value & Scope of Full Stack Web Development, Architecture
Learning Objectives: To understand the concept of jQuery
Learning Outcomes: Students will be able to recognizer various technologies in Full stack
2
Outline
 Introduction to jQuery
 Core Features
 Using jQuery
 Local installation
 CDN Based Version
 Syntax
 Document ready Event
 Basic Concept
 Q &A
3
Basic Concepts "This is JavaScript String"
String
'This is JavaScript String’
 A string in JavaScript is an immutable
object that contains none, one or 'This is "really" a JavaScript String’
many characters. Following are the
"This is 'really' a JavaScript String"
valid examples of a JavaScript String:
Numbers 5350
 Numbers in JavaScript are double- 120
precision 64-bit format IEEE 754
values. They are immutable, just as 27
strings. Following are the valid
0.26
examples of a JavaScript Numbers:
4
Basic Concepts true // true
Boolean false // false
0 // false
 A boolean in JavaScript can be either 1 // true
true or false. If a number is zero, it "" // false
defaults to false.
var emp = {
 If there is an empty string, it defaults name: "Zara",
to false.: age: 10 };
emp.name // ==> Zara

Objects emp.age // ==> 10
 JavaScript supports Object concept
very well. You can create an object //Setting object properties
using the object literal: emp.name = "Daisy" // <== Daisy

emp.age = 20 // <== 20
5
Basic Concepts
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":
document.getElementById("demo").innerHTML = "Hello JavaScript";
6
Basic Concepts
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the

light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the

light</button>
</body>
</html> 7
Basic Concepts
https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
8
Basic Concepts
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an

HTML attribute:
document.getElementById("demo").style.fontSize = "35px";
9
Basic Concepts
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an

HTML element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSiz
e='35px'">Click Me!</button>
</body>
</html>
10
Basic Concepts
11
Basic Concepts
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The let keyword tells the browser to create variables:
let x, y;
x = 5 + 6;
y = x * 10;
The var keyword also tells the browser to create variables:

var x, y;
x = 5 + 6;
y = x * 10;
12
Basic Concepts var x = [];
Arrays var y = [1, 2, 3, 4, 5];
 You can define arrays using the array literal
var x = [1, 2, 3, 4, 5];
as shown: for (var i = 0; i < x.length; i++)
{
Functions // Do something with x[i]
}
 A function in JavaScript can be either
named or anonymous. A named function function named()
{ // do some stuff here
can be defined using function keyword as
}
follows:
 An anonymous function can be defined in var handler = function ()
{ // do some stuff here
similar way as a normal function, but it
}
would not have any name. An anonymous
function can be assigned to a variable or
passed to a method as shown. 13
Basic Concepts
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).
14
Basic Concepts
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":
Example
Calculate the product of two numbers, and return the result:
let x = myFunction(4, 3); // Function is called, return value will end up in x
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
The result in x will be:

12
15
Introduction to jQuery
 jQuery is a fast and concise JavaScript
Library created by John Resig in 2006.
 Motto: Write less, do more.
 jQuery simplifies HTML document
traversing, event handling, animating, and
Ajax interactions for rapid web
development.
 jQuery is a JavaScript toolkit
 It is designed to simplify various tasks by
writing less code.
16
Core Features
 DOM manipulation: The jQuery made it easy to select DOM elements, negotiate them
and modifying their content by using cross-browser open source selector engine called
Sizzle.
 Event handling: The jQuery offers an elegant way to capture a wide variety of events,
such as a user clicking on a link, without the need to clutter the HTML code itself with
event handlers.
 AJAX Support: The jQuery helps you a lot to develop a responsive and feature-rich site
using AJAX technology.
 Animations: The jQuery comes with plenty of built-in animation effects which you can
use in your websites.
 Lightweight: The jQuery is very lightweight library - about 19KB in size (Minified and
gzipped).
 Cross Browser Support: The jQuery has cross-browser support, and works well in IE
6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
17
Using jQuery
There are two ways to use jQuery.
 Local Installation − You can download jQuery

library on your local machine and include it in
your HTML code.
 CDN Based Version − You can include jQuery

library into your HTML code directly from
Content Delivery Network (CDN).
18
Local Installation <html>
<head>
 Go to the <title>The jQuery Example</title>
https://jquery.com/download/ <script type="text/javascript" src="/jquery/jquery-
to download the latest 2.1.3.min.js"></script>
version available. <script type="text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
 Now, insert downloaded });
jquery-2.1.3.min.js file in a </script>
</head>
directory of your website, <body>
e.g. /jquery <h1>Hello</h1>
</body>
</html>
19
20
CDN Based Version <html>
<head>
 You can include jQuery <title>The jQuery Example</title>
<script type="text/javascript"
library into your HTML src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/
code directly from Content jquery.min.js">
Delivery Network (CDN). </script>
<script type="text/javascript">
$(document).ready(function(){
 Google and Microsoft document.write("Hello, World!");
});
provides content deliver for </script>
the latest version. </head>
<body>
<h1>Hello</h1>
</body>
</html>
21
jQuery Syntax
The jQuery syntax is tailor-made for Examples:
selecting HTML elements and
performing some action on the
element(s). • $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• Basic syntax is: $(selector).action() • $(".test").hide() - hides all elements with
• A $ sign to define/access jQuery class="test".
• A (selector) to "query (or find)" HTML • $("#test").hide() - hides the element with
elements id="test".
• A jQuery action() to be performed on the
element(s)
22
<html>
Document Ready Event <head>
<title>The jQuery Example</title>
 jQuery reads or manipulates the document <script type="text/javascript"
object model (DOM), we need to make sure src="/jquery/jquery-1.3.2.min.js"></script>
that we start adding events etc. as soon as the
DOM is ready. <script type="text/javascript"
language="javascript">
 If you want an event to work on your page, $(document).ready(function() {
you should call it inside the $ $("div").click(function() {
(document).ready() function. Everything alert("Hello world!");
);
inside it will load as soon as the DOM is
});
loaded and before the page contents are </script>
loaded. </head>
<body>
 This is to prevent any jQuery code from <div id="newdiv">Click on this to see a dialogue
running before the document is finished box.
loading (is ready). </div>
</body>
23
</html>
Q&A
• What is the motto of jQuery?
• Define CDN?
• Which are core features of jQuery?
• What is the role document ready event?
24
Learning Outcome
 At the end of this session, you will be able to
 Understand the basics of Full Stack Development
 Understand the Modern Application Architecture
 Get familiar with Front end and Back end terminologies
 Learn about advantages and disadvantages of being a
Full stack developer
25
References
1. http://singlepageappbook.com/goal.html
2. https://www.peerbits.com/blog/web-application-architecture.html
3. https://www.educative.io/blog/how-to-design-a-web-application-software-archit
ecture-101
4. https://medium.com/ios-expert-series-or-interview-series/software-architectural-
patterns-design-structures-c5692fe8affc
26

Lecture 2 FS

Uploaded by

Copyright:

Available Formats

You might also like

Lecture 2 FS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 2 FS

Uploaded by

Copyright:

Available Formats

Full Stack Development

Topic Name- Introduction to jQuery and its installation

Learning Objectives: To understand the concept of jQuery

emp.name // ==> Zara

using the object literal: emp.name = "Daisy" // <== Daisy

JavaScript Can Change HTML Content

document.getElementById("demo").innerHTML = "Hello JavaScript";

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the

JavaScript Can Change HTML Styles (CSS)

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

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an

The var keyword also tells the browser to create variables:

The result in x will be:

 Local Installation − You can download jQuery

 CDN Based Version − You can include jQuery

• What is the motto of jQuery?

• Which are core features of jQuery?

• What is the role document ready event?

You might also like