SE-2840 Dr. Mark L. Hornick 1 Modifying webpage behavior using client-side scripting Javascript

SE-2840Dr. Mark L. Hornick

1

Modifying webpage behavior using client-side scripting

Javascript

2007 quote:

“HTML with Javascript is going to become the GUI technology of choice, killing off ‘rich client’ and desktop apps written in languages such as C, C++, Java and C#.”

James Shore, author,

SE-2840 Dr. Mark L. Hornick

2


3

JavaScript affects the behavior of a web page via manipulation of the browser’s Document

Structure: HTML5

Presentation: CSS With JavaScript, you can

modify both structure and presentation after the page is loaded

The browser requests a page.

The browser returns the page.

webpage

The user interacts with the browser

Javascript embedded in the webpage is “executed” by the browser


4

Familiar applications of Javascript Cascading menus Modify images on mouse “rollover” Validate forms before submitting to server

Num of chars, non-blank input, non-alpha numerics, etc

Background (color, music) effects “Simple” applications

Calendars, payment calculators, etc

“Complex” applications Google docs


5

JavaScript is not Java Java is a completely different high-

level language invented by Sun Microsystems

Javascript was created in 1995 by Netscape First called “Livescript” …then “Javascript” as a marketing

strategy Sun was making headlines with Java at the

same time


6

Scripts intially had a bad reputation from abuse of their capabilities Annoying pop-up ads

Malware/Spyware


7

Today’s Javascript is purposely limited

Due to Security issues, JavaScript can't directly interact with private system resources (files) of the computer running the browser• Although HTML5 includes “local storage”

capabilities that can be accessed from JavaScript

Enabling scripting in IE and Firefox


8


9

Embedding Javascript in a web page

<!DOCTYPE html><html> <head> <script type=“text/javascript”>

// Javascript code can be placed in the <head> or <body> // of an HTML document; other locations are not recommended</script>

<charset=“UTF-8" /> <title>Example Javascript</title> </head> <body>

<script type=“text/javascript” src=“demo.js”> /* Javascript can be placed inline or in an external .js file */</script>

</body></html>

The <script>…</script> tags tell the browser that the contained content is not HTML to be displayed, but Javascript to be interpreted.

The Javascript code is not displayed to the user.

Javascript errors are reported via an Error Console when one is enabled


10

Implementation and activation varies by browser


11

Javascript is it’s own complete high-level programming language, with familiar elements

Variables Constants Expressions Conditional control statements (if, else if, switch) Looping and iteration (for, while, do…while) Exception handling (try-catch)

As well as some unfamiliar concepts: No formal classes (instead uses prototypes) Weak typing Functions outside of objects Global variables


12

Javascript is a weakly (dynamically)-typed language, unlike C++ or Java

A variable doesn’t really have a type; rather, a variable is bound to a value of a specific typevar msg = “hello”; // a variable bound to a string

The variable can be dynamically bound to another type over the lifetime of a variable!msg= “hello”; // here it’s bound to a stringmsg = 23; // now it’s bound to an integer

There are three primitive datatypes boolean number string


13

Javascript automatically converts types

var var1 = 4 + 7.0; is converted to a floating-point value

var var2=“100” + 15; 15 is promoted to string; result=“10015”

var var3= 15 +“100”;15 is promoted to string; result=“15100”

Mixing numbers and strings results in strings


14

An explicit conversion is required to turn a string to a number

var1 = parseInt(“10”);

var1 = parseFloat(“3.14”);

The value NaN is assigned when a string cannot be parsed

The opposite conversion from a numeric value to a String is done via:

var1 = 100; // var1 contains numeric value 100var1 = String(100); // var1 contains “100”


15

Aspects of weakly-typed data

Javascript has the following boolean globlal functions that allow you to inquire about a variable’s bound type:

isNaN( var ) // returns true if Not a Number isFinite( var ) // returns true if a finite number

Infinity is +/- infinity (note: capital “I”) undefined indicates an unitialized variable NaN represents a value that is “not a number”

Arrays in Javascript

var myArray; // untyped and undefined

myArray = new Array(); // size not needed

myArray[0] = “Hello”; // array size now 1

myArray[1] = 1; // array size now 2

myArray[2]= new Array(); // array element 3 is another array

If an array size is specified, and the number of elements assigned to the array exceeds the size of the array, the array grows itself!


16

More on arrays

var myArray = [0,1,2,3]; // declared & initialized

myArray[4]= -1; // now [0,1,2,3,-1]

myArray[6]= 8; // now [0,1,2,3,-1, undefined, 8]

myArray[0]= “hello”; // legal!


17

Javascript supports the concept of global functionsfunction myMethod(param1, param2) {

var localVar = param1 + …

return localVar;

} 0 or more formal parameters Formal parameters are not typed Return value of function is not typed return statement is optional

If no return statement, function returns “undefined”

Local variables have function scope and visibility Note: no block { } scope in Javascript!


18

Javascript supports the concept of global variables

var x = “I’m global!”

function myMethod(param1, param2) {

var localVar = …

return localVar + x; // x is visible here

} Global variables are visible everywhere Local variables are only visible in their function

scope This is changing in ECMAScript 6 (2015) with the

introduction of the “let” statement


19

JavaScript supports objects, but without needing formal classes

CS-422Dr. Mark L. Hornick

20

var person = {

firstName: “Roscoe”,

lastName: “Raider”

} This is called an object literal

Object constructors

function MyObject(param1, param2) {

this.property1 = param1;

this.property2 = param2;

this.doSomething = function(…) {

// function body goes here

}

} Looks like a simple function No formal attribute declarations

Use of “this” automatically creates an attribute Be careful; typos may introduce unwanted attributes


21

Method declarations can also be defined outside of the constructor

MyObject.prototype.setXXX=function(param) {

this.property1 = param;

}

MyObject.prototype.getXXX=function() {

return this.property1;

} Note each method is “declared” to be a function


22

Using a JavaScript constructor to create objects

var x = new MyObject(“arg1”, “arg2”);

x.setXXX(“arg1b”);

var y = x.getXXX();


23

JavaScript “core API” defines only a few native objects – the remainder come from the hosting environment (i.e. the browser)

String – similar to the Java String class Array – generic container/collection class Math - like the Java Math class Number, Boolean – wrapper classes similar to Java wrapper

classes (Integer, Double etc) var x = 123; // x is treated as a Number var y = “123”; // y is treated as a String var z = new Number(“123”); // z is a Number

Date – represents dates and times

CS-422Dr. Mark L. Hornick

24

Other Javascript features

Functions are actually objects! Having their own properties and methods

Functions can be passed as arguments to other Functions C/C++ can do this, but Java cannot

Functions can nest other Functions Functions are called methods when they are

defined within an object


25

Documents

SE-2840 Dr. Mark L. Hornick 1 Modifying webpage behavior using client-side scripting Javascript