Date post: | 31-Dec-2015 |
Category: |
Documents |
Upload: | austin-kelley |
View: | 215 times |
Download: | 0 times |
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
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
6
Scripts intially had a bad reputation from abuse of their capabilities Annoying pop-up ads
Malware/Spyware
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
8
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
10
Implementation and activation varies by browser
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
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”
SE-2840 Dr. Mark L. Hornick
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!
SE-2840 Dr. Mark L. Hornick
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!
SE-2840 Dr. Mark L. Hornick
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!
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
22
Using a JavaScript constructor to create objects
var x = new MyObject(“arg1”, “arg2”);
x.setXXX(“arg1b”);
var y = x.getXXX();
SE-2840 Dr. Mark L. Hornick
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
SE-2840 Dr. Mark L. Hornick
25