27-Jan-20
Wollo University
Outline
Kombolcha Institute of Technology
College of Informatics 2
Department of Information System Introduction
Client-Side Scripting Using JavaScript
Introduction to Internet Programming
Introduction to JavaScript
Chapter 5 JavaScript Basics
Client-Side Scripting Language Variables ,Expression ,Control Structure
,Array , Functions
(JavaScript) Handling Events and Exception Handling
User Inputs : Form Processing
Instructor: Habtamu Abate (M.Sc.)
Java script Functions
Email:
[email protected] Cookies and Hidden Fields
1
Client Side Scripting Why use client-side programming?
3 4
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
CS380 CS380
1
27-Jan-20
Why use client-side programming? What is Javascript?
5 6
server-side programming (PHP) benefits: a lightweight programming language ("scripting
security:has access to server's private data; client can't language")
see source code used to make web pages interactive
compatibility: not subject to browser compatibility insert dynamic text into HTML (ex: user name)
issues react to events (ex: page load user click)
power: can write files, open connections to servers,
get information about a user's computer (ex: browser
connect to databases, ... type)
perform calculations on user's computer (ex: form
validation)
CS380 CS380
What is Javascript? Javascript vs Java
7 8
a web standard (but not supported identically by interpreted, not compiled
all browsers) more relaxed syntax and rules
NOT related to Java other than by name and some fewer and "looser" data types
syntactic similarities 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
CS380 CS380
2
27-Jan-20
Javascript vs Java JavaScript vs. PHP
9 10
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
CS380 CS380
Linking to a JavaScript file:
JavaScript vs. PHP script
11 12
differences: <script src="filename" type="text/javascript"></script>
HTML
JS is more object-oriented: noun.verb(), less
procedural: verb(noun) script tag should be placed in HTML page's head
JS focuses on user interfaces and interacting with a script code is stored in a separate .js file
document; PHP is geared toward HTML output and JS code can be placed directly in the HTML file's
file/form processing body or head (like CSS)
JS code runs on the client's browser; PHP code runs but this is bad style (should separate content,
on the web server presentation, and behavior
JS <3
CS380 CS380
3
27-Jan-20
Event-driven programming A JavaScript statement: alert
13 14
alert("IE6 detected. Suck-mode enabled.");
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 a JS command that pops up a dialog box with a
delimiter between them message
CS380 CS380
Event-driven programming Buttons
15 16
<button>Click me!</button> HTML
you are used to programs start with a main method
(or implicit main like in PHP) button's text appears inside tag; can also contain
images
JavaScript programs instead wait for user actions
called events and respond to them To make a responsive button or other UI control:
1. choose the control (e.g. button) and event (e.g. mouse
event-driven programming: writing programs driven
1. click) of interest
by user events
2. write a JavaScript function to run when the event
Let's write a page with a clickable button that pops occurs
up a "Hello, World" window... 3. attach the function to the event on the control
CS380 CS380
4
27-Jan-20
JavaScript functions Event handlers
17 18
function name() { <element attributes onclick="function();">...
statement ; HTML
statement ;
... <button onclick="myFunction();">Click me!</button>
statement ; HTML
} JS
JavaScript functions can be set as event handlers
function myFunction() {
alert("Hello!"); when you interact with the element, the function will execute
alert("How are you?");
} JS
onclick is just one of many event HTML attributes we'll
the above could be the contents of example.js use
linked to our HTML page but popping up an alert window is disruptive and
annoying
statements placed into functions can be evaluated in
response to user events A better user experience would be to have the message
CS380 CS380 appear on the page...
Document Object Model (DOM) DOM element objects
19 20
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
5
27-Jan-20
Accessing elements: Accessing elements:
document.getElementById document.getElementById
21 22
var name = document.getElementById("id");
JS document.getElementById returns the DOM object
<button onclick="changeText();">Click me!</button> for an element with a given id
<span id="output">replace me</span>
<input id="textbox" type="text" /> HTML can change the text inside most elements by setting
function changeText() { the innerHTML property
var span = document.getElementById("output");
var textBox = document.getElementById("textbox"); can change the text in form controls by setting the
textbox.style.color = "red";
value property
} JS
CS380 CS380
Changing element style: Preetify
element.style
23 24
function changeText() {
//grab or initialize text here
Attribute Property or style object
// font styles added by JS:
color color text.style.fontSize = "13pt";
text.style.fontFamily = "Comic Sans MS";
padding padding text.style.color = "red"; // or pink?
} JS
background-color backgroundColor
border-top-width borderTopWidth
Font size fontSize
Font famiy fontFamily
CS380 CS380
6
27-Jan-20
Variables Number type
25 26
var name = expression; JS var enrollment = 99;
var medianGrade = 2.8;
var clientName = "Connie Client"; var credits = 5 + 4 + (2 * 3);
var age = 32; JS
var weight = 127.4; JS
variables are declared with the var keyword (case integers and real numbers are the same type (no int
sensitive) vs. double)
types are not specified, but JS does have types same operators: + - * / % ++ -- = += -= *= /=
("loosely typed") %=
Number, Boolean, String, Array, Object, similar precedence to Java
Function, Null, Undefined many operators auto-convert types: "2" * 3 is 6
can find out a variable's type by calling typeof
CS380 CS380
Comments (same as Java) Math object
27 28
// single-line comment var rand1to10 = Math.floor(Math.random() * 10 + 1);
/* multi-line comment */ var three = Math.floor(Math.PI);
JS JS
identical to Java's comment syntax methods: abs, ceil, cos, floor, log,
max, min, pow, random, round, sin,
recall: 4 comment syntaxes
sqrt, tan
HTML: <!-- comment -->
properties: E, PI
CSS/JS/PHP: /* comment */
Java/JS/PHP: // comment
PHP: # comment
CS380 CS380
7
27-Jan-20
Special values: null and undefined Logical operators
29 30
var ned = null;
var benson = 9; > < >= <= && || ! == != === !==
// at this point in the code,
// ned is null most logical operators automatically convert types:
// benson's 9
// caroline is undefined 5 < "7" is true
JS
42 == 42.0 is true
undefined : has not been declared, does not "5.0" == 5 is true
exist === and !== are strict equality tests; checks both
null : exists, but was specifically assigned an type and value
empty or null value "5.0" === 5 is false
Why does JavaScript have both of these?
CS380 CS380
if/else statement (same as Java) Boolean type
31 32
if (condition) { var iLike190M = true;
statements; var ieIsGood = "IE6" > 0; // false
} else if (condition) { if ("web devevelopment is great") { /* true */ }
statements; if (0) { /* false */ }
} else { JS
statements;
} any value can be used as a Boolean
JS
"falsey" values: 0, 0.0, NaN, "", null, and undefined
identical structure to Java's if/else statement
"truthy" values: anything else
JavaScript allows almost anything as a condition
converting a value into a Boolean explicitly:
var boolValue = Boolean(otherValue);
var boolValue = !!(otherValue);
CS380 CS380
8
27-Jan-20
for loop (same as Java) while loops (same as Java)
33 34
var sum = 0; while (condition) {
for (var i = 0; i < 100; i++) { statements;
sum = sum + i; } JS
} JS
var s1 = "hello"; do {
var s2 = ""; statements;
for (var i = 0; i < s.length; i++) { } while (condition);
s2 += s1.charAt(i) + s1.charAt(i); JS
}
// s2 stores "hheelllloo" JS break and continue keywords also behave as in
Java
CS380 CS380
Popup boxes Arrays
35 36
alert("message"); // message var name = []; // empty array
confirm("message"); // returns true or false var name = [value, value, ..., value]; // pre-filled
prompt("message"); // returns user input string name[index] = value; // store element
JS JS
var ducks = ["Huey", "Dewey", "Louie"];
var stooges = []; // stooges.length is 0
stooges[0] = "Larry"; // stooges.length is 1
stooges[1] = "Moe"; // stooges.length is 2
stooges[4] = "Curly"; // stooges.length is 5
stooges[4] = "Shemp"; // stooges.length is 5
JS
CS380 CS380
9
27-Jan-20
Array methods String type
37 38
var a = ["Stef", "Jason"]; // Stef, Jason var s = "Connie Client";
a.push("Brian"); // Stef, Jason, Brian var fName = s.substring(0, s.indexOf(" ")); // "Connie"
a.unshift("Kelly"); // Kelly, Stef, Jason, Brian var len = s.length; // 13
a.pop(); // Kelly, Stef, Jason var s2 = 'Melvin Merchant';
a.shift(); // Stef, Jason JS
a.sort(); // Jason, Stef
JS methods: charAt, charCodeAt, fromCharCode,
array serves as many data structures: list, queue, indexOf, lastIndexOf, replace, split,
stack, ... substring, toLowerCase, toUpperCase
methods: concat, join, pop, push, reverse, shift, charAt returns a one-letter String (there is no char type)
slice, sort, splice, toString, unshift length property (not a method as in Java)
push and pop add / remove from back
Strings can be specified with "" or ''
unshift and shift add / remove from front
shift and pop return the element that is removed
concatenation with + :
1 + 1 is 2, but "1" + 1 is "11"
More about String Splitting strings: split and join
39 40
escape sequences behave as in Java: \' \" \& \n \t 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"
converting between numbers and Strings: JS
var count = 10;
var s1 = "" + count; // "10"
var s2 = count + " bananas, ah ah ah!"; // "10 bananas, ah split breaks apart a string into an array using a
ah ah!"
var n1 = parseInt("42 is the answer"); // 42 delimiter
var n2 = parseFloat("booyah"); // NaN JS
can also be used with regular expressions (seen later)
accessing the letters of a String: join merges an array into a single string, placing a
var firstLetter = s[0]; // fails in IE
var firstLetter = s.charAt(0); // does work in IE
delimiter between them
var lastLetter = s.charAt(s.length - 1); JS
CS380
10
27-Jan-20
41 The End !!!
Question???
CS380
11
