3. 3
Why use client-side programming?
PHP already allows us to create dynamic web pages.
Why also use client-side scripting?
client-side scripting (JavaScript) benefits:
usability: can modify a page without having to post
back to the server (faster UI)
efficiency: can make small, quick changes to page
without waiting for server
event-driven: can respond to user actions like clicks
and key presses
4. 4
Why use client-side programming?
server-side programming (PHP) benefits:
security: has access to server's private data; client can't
see source code
compatibility: not subject to browser compatibility
issues
power: can write files, open connections to servers,
connect to databases, ...
5. 5
What is Javascript?
a lightweight programming language ("scripting
language")
used to make web pages interactive
insert dynamic text into HTML (ex: user name)
react to events (ex: page load user click)
get information about a user's computer (ex: browser
type)
perform calculations on user's computer (ex: form
validation)
6. 6
What is Javascript?
a web standard (but not supported identically by
all browsers)
NOT related to Java other than by name and some
syntactic similarities
7. 7
Javascript vs Java
interpreted, not compiled
more relaxed syntax and rules
fewer and "looser" data types
variables don't need to be declared
errors often silent (few exceptions)
key construct is the function rather than the class
"first-class" functions are used in many situations
contained within a web page and integrates with its
HTML/CSS content
8. 8
JavaScript vs. PHP
similarities:
both are interpreted, not compiled
both are relaxed about syntax, rules, and types
both are case-sensitive
both have built-in regular expressions for powerful
text processing
9. 9
JavaScript vs. PHP
differences:
JS is more object-oriented: noun.verb(), less
procedural: verb(noun)
JS focuses on user interfaces and interacting with a
document; PHP is geared toward HTML output and
file/form processing
JS code runs on the client's browser; PHP code runs
on the web server
JS <3
10. 10
Linking to a JavaScript file:
script
script tag should be placed in HTML page's head
script code is stored in a separate .js file
JS code can be placed directly in the HTML file's
body or head (like CSS)
but this is bad style (should separate content,
presentation, and behavior
<script src="filename" type="text/javascript"></script>
HTML
11. 11
Event-driven programming
split breaks apart a string into an array using a
delimiter
can also be used with regular expressions (seen later)
join merges an array into a single string, placing a
delimiter between them
12. 12
Event-driven programming
you are used to programs start with a main method
(or implicit main like in PHP)
JavaScript programs instead wait for user actions
called events and respond to them
event-driven programming: writing programs driven
by user events
Let's write a page with a clickable button that pops
up a "Hello, World" window...
13. 13
Buttons
button's text appears inside tag; can also contain
images
To make a responsive button or other UI control:
1. choose the control (e.g. button) and event (e.g. mouse
1. click) of interest
2. write a JavaScript function to run when the event
occurs
3. attach the function to the event on the control
<button>Click me!</button> HTML
14. 14
JavaScript functions
function name() {
statement ;
statement ;
...
statement ;
} JS
the above could be the contents of example.js
linked to our HTML page
statements placed into functions can be evaluated in
response to user events
function myFunction() {
alert("Hello!");
alert("How are you?");
} JS
15. 15
Event handlers
JavaScript functions can be set as event handlers
when you interact with the element, the function will execute
onclick is just one of many event HTML attributes we'll
use
but popping up an alert window is disruptive and
annoying
A better user experience would be to have the message
appear on the page...
<element attributes onclick="function();">...
HTML
<button onclick="myFunction();">Click me!</button>
HTML
16. 16
Document Object Model (DOM)
most JS code manipulates
elements on an HTML page
we can examine elements'
state
e.g. see whether a box is
checked
we can change state
e.g. insert some new text into
a div
we can change styles
e.g. make a paragraph red
20. 20
Changing element style:
element.style
Attribute Property or style object
color color
padding padding
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily
22. 22
Variables
variables are declared with the var keyword (case
sensitive)
types are not specified, but JS does have types
("loosely typed")
Number, Boolean, String, Array, Object,
Function, Null, Undefined
can find out a variable's type by calling typeof
var name = expression; JS
var clientName = "Connie Client";
var age = 32;
var weight = 127.4; JS
23. 23
Number type
integers and real numbers are the same type (no int
vs. double)
same operators: + - * / % ++ -- = += -= *= /=
%=
similar precedence to Java
many operators auto-convert types: "2" * 3 is 6
var enrollment = 99;
var medianGrade = 2.8;
var credits = 5 + 4 + (2 * 3);
JS
25. 25
Math object
var rand1to10 = Math.floor(Math.random() * 10 + 1);
var three = Math.floor(Math.PI);
JS
methods: abs, ceil, cos, floor, log,
max, min, pow, random, round, sin,
sqrt, tan
properties: E, PI
26. 26
Special values: null and undefined
var ned = null;
var benson = 9;
// at this point in the code,
// ned is null
// benson's 9
// caroline is undefined
JS
undefined : has not been declared, does not
exist
null : exists, but was specifically assigned an
empty or null value
Why does JavaScript have both of these?
27. 27
Logical operators
> < >= <= && || ! == != === !==
most logical operators automatically convert types:
5 < "7" is true
42 == 42.0 is true
"5.0" == 5 is true
=== and !== are strict equality tests; checks both
type and value
"5.0" === 5 is false
28. 28
if/else statement (same as Java)
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS
identical structure to Java's if/else statement
JavaScript allows almost anything as a condition
29. 29
Boolean type
var iLike190M = true;
var ieIsGood = "IE6" > 0; // false
if ("web devevelopment is great") { /* true */ }
if (0) { /* false */ }
JS
any value can be used as a Boolean
"falsey" values: 0, 0.0, NaN, "", null, and undefined
"truthy" values: anything else
converting a value into a Boolean explicitly:
var boolValue = Boolean(otherValue);
var boolValue = !!(otherValue);
30. 30
for loop (same as Java)
var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i;
}
JS
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"
JS
31. 31
while loops (same as Java)
while (condition) {
statements;
} JS
break and continue keywords also behave as in
Java
do {
statements;
} while (condition);
JS
33. 33
JavaScript Arrays
An array is a special variable, which can hold more than
one value:
const cars = ["Saab", "Volvo", "BMW"];
Why Use Arrays?
If you have a list of items (a list of car names, for
example), storing the cars in single variables could look like
this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
34. 34
However, what if you want to loop through the cars
and find a specific one? And what if you had not 3
cars, but 300?
The solution is an array!
An array can hold many values under a single
name, and you can access the values by referring to
an index number.
35. 35
Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
const array_name = [item1, item2, ...];
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body></html>
37. 37
You can also create an array, and then provide the
elements:
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
38. 38
Using the JavaScript Keyword new
The following example also creates an Array, and
assigns values to it:
<script>
const cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>
39. 39
Accessing Array Elements
You access an array element by referring to the index number:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from
0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body></html>
41. 41
Changing an Array Element
This statement changes the value of the first element in
cars:
cars[0] = "Opel";
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>
42. 42
Access the Full Array
With JavaScript, the full array can be accessed by referring to the
array name:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body></html>
44. 44
Arrays are Objects
Arrays are a special type of objects. The typeof
operator in JavaScript returns "object" for arrays.
But, JavaScript arrays are best described as
arrays.
Arrays use numbers to access its "elements". In this
example,
Person[0] returns John
46. 46
JavaScript Arrays
Arrays use numbers to access its elements.
John
Objects use names to access its "members". In this
example, person.firstName returns John:
47. 47
Array Properties and Methods
The real strength of JavaScript arrays are the built-in
array properties and methods:
cars.length // Returns the number of elements
cars.sort() // Sorts the array.
Array methods are covered in the next chapters.
The length Property
The Length property of an array returns the length of an
array (the number of array elements).
50. 50
Looping Array Elements
One way to loop through an array, is using a for loop:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The best way to loop through an array is using a standard for
loop:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
51. 51
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body></html>
57. 57
Adding Array Elements
The easiest way to add a new element to an array is
using the push() method.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The push method appends a new element to an
array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
59. 59
JavaScript Arrays
The push method appends a new element to an array.
Banana,Orange,Apple,Lemon
JavaScript Arrays
The push method appends a new element to an array.
Banana,Orange,Apple
Try It
60. 60
New element can also be added to an array using
the length property.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The length property provides an easy way to
append new elements to an array without using the
push() method.</p>
62. 62
JavaScript Arrays
The length property provides an easy way to append new elements to an array without using the push() method.
Banana,Orange,Apple Try It
63. 63
How to Recognize an Array
A common question is: How do I know if a variable
is an array?
The problem is that the JavaScript operator
Typeof returns “object”
66. 66
JavaScript Arrays
The typeof operator, when used on an array,
returns object:
object
The typeof operator returns object because a
JavaScript array is an object.
69. 69
String type
methods: charAt, charCodeAt, fromCharCode,
indexOf, lastIndexOf, replace, split,
substring, toLowerCase, toUpperCase
charAt returns a one-letter String (there is no char
type)
length property (not a method as in Java)
Strings can be specified with "" or ''
concatenation with + :
var s = "Connie Client";
var fName = s.substring(0, s.indexOf(" ")); // "Connie"
var len = s.length; // 13
var s2 = 'Melvin Merchant';
JS
70. 70
More about String
accessing the letters of a String:
var count = 10;
var s1 = "" + count; // "10"
var s2 = count + " bananas, ah ah ah!"; // "10 bananas, ah
ah ah!"
var n1 = parseInt("42 is the answer"); // 42
var n2 = parseFloat("booyah"); // NaN JS
escape sequences behave as in Java: ' " & n t
converting between numbers and Strings:
var firstLetter = s[0]; // fails in IE
var firstLetter = s.charAt(0); // does work in IE
var lastLetter = s.charAt(s.length - 1);
JS
71. 71
Splitting strings: split and join
var s = "the quick brown fox";
var a = s.split(" "); // ["the", "quick", "brown", "fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"
JS
split breaks apart a string into an array using a
delimiter
can also be used with regular expressions (seen later)
join merges an array into a single string, placing a
delimiter between them
72. 72
JavaScript Example
Javascript example is easy to code. JavaScript provides 3 places to
put the JavaScript code: within body tag, within head tag and
external JavaScript file.
Let’s create the first JavaScript example.
<script type="text/javascript">
document.write("JavaScript is a simple language for javatpoint learners");
</script>
The script tag specifies that we are using JavaScript.
The text/javascript is the content type that provides information to
the browser about the data.
73. 73
The document.write() function is used to display
dynamic content through JavaScript. We will learn
about document object in detail later.
3 Places to put JavaScript code
Between the body tag of html
Between the head tag of html
In .js file (external javaScript)
74. 74
1) JavaScript Example : code between the body
tag
In the above example, we have displayed the
dynamic content using JavaScript. Let’s see the
simple example of JavaScript that displays alert
dialog box.
<script type="text/javascript">
alert("Hello Javatpoint");
</script>
75. 75
2) JavaScript Example : code between the head
tag
<html>
<head>
<script type="text/javascript">
function msg(){
alert("Hello Javatpoint");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
76. 76
External JavaScript file
We can create external JavaScript file and embed it in many html
page.
It provides code re usability because single JavaScript file can be
used in several html pages.
An external JavaScript file must be saved by .js extension. It is
recommended to embed all JavaScript files into a single file. It
increases the speed of the webpage.
Let's create an external JavaScript file that prints Hello Javatpoint in
a alert dialog box.
77. 77
message.js
function msg(){
alert("Hello Javatpoint");
}
Let's include the JavaScript file into html page. It calls the
JavaScript function on button click.
<html>
<head>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form> </body> </html>
78. 78
Advantages of External JavaScript
There will be following benefits if a user creates an external javascript:
It helps in the reusability of code in more than one HTML file.
It allows easy code readability.
It is time-efficient as web browsers cache the external js files, which further
reduces the page loading time.
It enables both web designers and coders to work with html and js files parallelly
and separately, i.e., without facing any code conflictions.
The length of the code reduces as only we need to specify the location of the js
file.
79. 79
Disadvantages of External JavaScript
There are the following disadvantages of external files:
The stealer may download the coder's code using the url of the js
file.
If two js files are dependent on one another, then a failure in one
file may affect the execution of the other dependent file.
The web browser needs to make an additional http request to get
the js code.
A tiny to a large change in the js code may cause unexpected results
in all its dependent files.
We need to check each file that depends on the commonly created
external javascript file.
If it is a few lines of code, then better to implement the internal
javascript code.
Editor's Notes
#2:client-side script: code runs in browser after page is sent back from server
often this code manipulates the page or responds to user actions
![33
JavaScript Arrays
An array is a special variable, which can hold more than
one value:
const cars = ["Saab", "Volvo", "BMW"];
Why Use Arrays?
If you have a list of items (a list of car names, for
example), storing the cars in single variables could look like
this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-33-320.jpg)
![35
Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
const array_name = [item1, item2, ...];
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-35-320.jpg)
![36
JavaScript Arrays
Saab,Volvo,BMW
Spaces and line breaks are not important. A declaration
can span multiple lines:
const cars = [
"Saab",
"Volvo",
"BMW"
];](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-36-320.jpg)
![37
You can also create an array, and then provide the
elements:
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-37-320.jpg)
![39
Accessing Array Elements
You access an array element by referring to the index number:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accessed using numeric indexes (starting from
0).</p>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-39-320.jpg)
![41
Changing an Array Element
This statement changes the value of the first element in
cars:
cars[0] = "Opel";
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
<script>
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-41-320.jpg)
![42
Access the Full Array
With JavaScript, the full array can be accessed by referring to the
array name:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-42-320.jpg)
![44
Arrays are Objects
Arrays are a special type of objects. The typeof
operator in JavaScript returns "object" for arrays.
But, JavaScript arrays are best described as
arrays.
Arrays use numbers to access its "elements". In this
example,
Person[0] returns John](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-44-320.jpg)
![45
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Arrays use numbers to access its elements.</p>
<p id="demo"></p>
<script>
const person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>
</body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-45-320.jpg)
![48
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The length property returns the length of an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.length;
</script></body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-48-320.jpg)
![50
Looping Array Elements
One way to loop through an array, is using a for loop:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The best way to loop through an array is using a standard for
loop:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-50-320.jpg)
![51
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-51-320.jpg)
![55
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function myFunction(value) {
text += "<li>" + value + "</li>";
}
</script>
</body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-55-320.jpg)
![58
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Lemon");
document.getElementById("demo").innerHTML =
fruits;
}
</script>
</body></html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-58-320.jpg)
![61
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Lemon";
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-61-320.jpg)
![65
<script>
const fruits = ["Banana", "Orange", "Apple",
"Mango"];
document.getElementById("demo").innerHTML =
typeof fruits;
</script>
</body>
</html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-65-320.jpg)
![67
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML =
Array.isArray(fruits);
</script>
</body>
</html>](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-67-320.jpg)
![70
More about String
accessing the letters of a String:
var count = 10;
var s1 = "" + count; // "10"
var s2 = count + " bananas, ah ah ah!"; // "10 bananas, ah
ah ah!"
var n1 = parseInt("42 is the answer"); // 42
var n2 = parseFloat("booyah"); // NaN JS
escape sequences behave as in Java: ' " & n t
converting between numbers and Strings:
var firstLetter = s[0]; // fails in IE
var firstLetter = s.charAt(0); // does work in IE
var lastLetter = s.charAt(s.length - 1);
JS](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-70-320.jpg)
![71
Splitting strings: split and join
var s = "the quick brown fox";
var a = s.split(" "); // ["the", "quick", "brown", "fox"]
a.reverse(); // ["fox", "brown", "quick", "the"]
s = a.join("!"); // "fox!brown!quick!the"
JS
split breaks apart a string into an array using a
delimiter
can also be used with regular expressions (seen later)
join merges an array into a single string, placing a
delimiter between them](https://image.slidesharecdn.com/introjavascript-250218045757-f742006a/85/IntroJavascript-pptx-cjfjgjggkgutufjf7fjvit8t-71-320.jpg)
