Скачать презентацию Java Script What is Java Script a
798637f658804ff8e260fec1c451c4d2.ppt
- Количество слайдов: 31
Java. Script
What is Java. Script? a. Client side interpreted embedded programming language used to enhance websites a. ECMAScript language standard implementation b. ECMA-262 • No relation to Java • Can manipulate HTML • Event driven
To use or not to use a. Helpful for: a. Dynamic content b. Adding logic to HTML c. Make changes without refreshing the page d. Form validation e. Ease processing on server • Not helpful for: o Accessing resources o Do anything that requires privacy § Java. Script is shown publicly
\code • External:" src="https://present5.com/presentation/798637f658804ff8e260fec1c451c4d2/image-4.jpg" alt="Adding Java. Script to HTML a. Inline: a. • External:" />
Adding Java. Script to HTML a. Inline: a. • External: o • Typically this is placed in between the
Variables are untyped a. No need to declare type (int, bool, etc) b. Doesn't care about type until called • Example: o var name = "Andrew"; o var num = 24; o var name = num; o name will now return 24
Arrays a. Strings are arrays a. var x = "Andrew"; x[3] returns "r" b. Array is also it's own data structure and doesn't require all items to be of the same type. a. var x = new Array(); a. x[0] = "Rawr"; b. x[1] = 9001; b. var x = new Array("Rawr", 9001); c. var x = ["Rawr", 9001]; c. Arrays have a length: a. x. length
If. . Else / Switch a. Similar to what you'd expect a. if (
Loops a. For: a. for (; ) { \code } • While: o while (
Functions a. Similar to any other languages' functions and methods • Can have nested functions o Variables have scope similar to nested loops • Used by events o Runs only when called • Example: o function
Popups a. Used for displaying information to the user outside of the page. a. Typically as a warning or when an error has occured b. Ask user for additional information c. Confirmation • alert(
Try it Create your own html file and using a text editor create. a. Create an Array • Create a function that: o Use a for loop to loop through the array o Print the contents of each element using document. write(); o Use a prompt() to ask for a username o Using an if statement, take the input and if it is 4 characters long, print "Yes", else print "No". • Use
Exceptions and Try/Catch a. Exceptions are easily thrown in a function by adding the following line. This will exit the function, returning the exception text. a. throw
Document Object Model (DOM) a. Standard way to access/manipulate HTML documents • Hierarchy of objects in HTML • Examples of objects: o window, location, document, anchors, body o images, forms, elements, tables • Code example: o document. write("This is displayed. ");
Cookies a. Stored in text file on client b. Can store multiple values ("; " delimited) c. Limited a. 300 per browser b. 20 per web server c. 4 KB per cookie d. Default: Read only by originating webpage a. Can be read by others using: a. path - multiple sites b. domain - multiple servers e. Remove by setting the expiration to current time or a past time.
Cookies (cont) Example: document. cookie("username=Andrew; expires=2011 -01 -11"); var a. Cookie = document. cookie; var items = a. Cookie. split("; "); var expires = items[1]. split("=")[1]; a. The use of split returns an array of substrings • After the first go we have "username=Andrew" and "expires=201101 -11" • After the second go we have "expires" and "2011 -01 -11" • The variable "expires" now equals "2011 -01 -11"
Date() a. Date (); returns the current date. b. Date(
Try it Goto: http: //www. w 3 schools. com/js/tryit. asp? filename=tryjs_coo kie_username a. Look at the code to create a cookie. • In your browser go to where your cookies are stored. • Find the "username" cookie for www. w 3 schools. com • Notice the fields and when it expires. • Try running the code again o The cookie hasn't expired yet!
Math a. Java. Script has it's own math functions built in a. abs(x), random(x), round(x), sin(x), etc • Also has constants defined o PI, E, LN 2, LOG 10 E, SQRT 2 • To access these, just call Math then the function/constant directly o Math. abs(x) o Math. PI
Stand back. . . I know Reg. Ex a. Java. Script also has an easy way of doing regular expressions b. There is the functional way: a. var pattern = new Reg. Ex(
Objects a. Similar to classes in other languages a. Can have variables and methods • var my. Object = new Object(); o my. Object. name = "Andrew"; o my. Object. number = 42; • var my. Object = {name: "Andrew", number: 42}; o my. Object. tired = "Yes"
Objects - Functions a. Functions can create objects, effectively being constructors. function dude (name, age) { this. name = name; this. age = age; } dude. set. Age = function (x) { this. age = x; }; var guy = new dude("Andrew", 24); guy. set. Age(42)
Objects - Singletons If an object will only exist in a single instance, you can do the following: var my. Object = {firstmethod: function (x, y) { \code} }; my. Object. firstmethod(5, "A");
Try it In an HTML file: a. Create an object with a few variables o one contains a string o one contains a number o one contains a function • In the function, use alert(); to display the object's string • Using the "for. . . in" loop, print each of the object's variable name, alongside with the value. o for (x in obj) { print x : obj[x] } //Pseudo code • Call the object's function
Asynchronous Java. Script and XML a. Fast and Dynamic web pages • Perform behind the scenes to update portions of a webpage without having to reload the whole page. • Based on: o XMLHttp. Request object - communicate with server o Java. Script/DOM - display/manipulate information o CSS - Style it to make it look nice o XML - Format data for transfering
AJAX - XMLHttp. Request a. Create object a. var xmlrequest = new XMLHttp. Request(); b. Send a request a. open(http. Method, target. URL, async); a. xmlrequest. open("GET", "example. asp", true); b. send(); a. xmlrequest. send();
XMLHttp. Request - GET a. Simple, fast, good for cached data. b. Simple: a. open("GET", "demo. asp", true) b. Can return cached data c. Fresh: a. open("GET", "demo. asp? t="+Math. random(), true) b. Unique id prevents cached data from appearing d. Send information: a. open("GET", "demo. asp? username=Andrew&age=24", true)
XMLHttp. Request - POST a. For database accessing, sending large amounts of data, can't work with caching, need for security/robust transfer b. Simple: a. open("POST", "demo. asp", true) c. Send form information: a. open("POST", "demo. asp", true) b. set. Request. Header("Content-type", "application/xwww-form-urlencoded") c. send("name=Andrew&age=24");
XMLHttp. Request - Server Response a. If response is not XML a. request. response. Text b. Returns the text from the server b. If it is XML a. request. response. XML b. Returns an XML file from the server c. Probably will need to be parsed and then use
AJAX - ready. State a. Holds the status of the XMLHttp. Request object • Perform actions based on the ready. State • onreadystatechange even is triggered when ready. State changes • onreadystatechange stores a defined function to occur and process the ready. State upon change
AJAX - ready. State (cont) a. ready. State statuses: a. 0: request not initialized b. 1: server connection established c. 2: request received d. 3: processing request e. 4: request finished and response is ready • status: o 200 = "OK" o 404 = Page not found
The End