JavaScript and Browser Manipulation
Copyright © Ellis Horowitz, 1998-2022 1

Testing the Speed of Your JavaScript (2009)

Copyright By PowCoder代写 加微信 powcoder

Firefox, v 3.0 Safari v 3.2 5103ms 6202ms
I.E. 7.0 45,928ms
Copyright © Ellis Horowitz, 1998-2022

Testing the Speed of Your JavaScript (2010)
Firefox, v 3.6 Safari v 4.0 772 ms 408 ms
Chrome v 4.0 396 ms Chrome v 14.0 214 ms
Copyright © Ellis Horowitz, 1998-2022

Testing the Speed of Your JavaScript (2011)
Firefox, v 3.6.13 798 ms
Firefox, v.6.0.2 187 ms
Safari v 5.0.3 310 ms Safari v. 5.1 198 ms
IE v 9.0 (beta) 476 ms
Copyright © Ellis Horowitz, 1998-2022

Testing the Speed of Your JavaScript (2012)
Firefox 16 166 ms
Chrome 21.0
149 ms 141 ms
Internet Explorer 9.0
Safari 6.0 138 ms
Chrome 214 149
Summary over the years
Firefox Safari
5,103 6,202 45,928 772 408
187 198 314
Copyright © Ellis Horowitz, 1998-2022

Mobile Speed of JavaScript (2012-2014)
Safari, iPhone 5 718ms
Safari, iPhone 6 352ms
Safari, iPhone 5S 416ms
Copyright © Ellis Horowitz, 1998-2022

JetStream (2015-2018) – JetStream2 (2020-2021)
Safari 9, iPhone 6s 111.75 score
Safari 10, iPhone 7 164.79 score
Safari 11, iPhone X 216.74 score
Safari 12, iPhone XS 261.75
Safari 10, OS X 155.76 score Safari 11, OS X 246-255.60 Chrome 45, OS X 151.62 score
browserbench.org
Copyright © Ellis Horowitz, 1998-2022 7
Safari, iPhone 11 , iOS 14, 148.98 score Firefox 81, Mac mini, macOS 10.15, 90 score Safari, iPhone 12 , iOS 14.6, 181.65 score
Safari. iPhone 13 iOS 15.3, 220.41 score

Javascript Object Hierarchy
JavaScript contains a set of built-in objects related to
the browser. Each object includes a set of properties
and methods
http://www.comptechdoc.org/independent/web/cgi/javamanual/javaobjheir.html
Copyright © Ellis Horowitz, 1998-2022

The Window Object
• The window object is the highest level built-in JavaScript object; it corresponds to the browser window
• Some properties of the Window object include:
– window.closed – a boolean indicating if the window is closed or not
– window.history – returns the history object
– window.location – returns the location object
– window.navigator – returns the navigator object
– Window.parent – returns the parent window of the current window
– Window.self – returns the current window
– Window.status – sets the text in the statusbar window
• Some methods of the Window object include:
– open() – opens a new window
– blur () – removes focus from the current window
– close() – closes the current window
– focus() – sets the focus to the current window
– resizeBy () – resizes the window by the specified pixels
• For a complete list see, e.g., http://www.w3schools.com/jsref/obj_window.asp Copyright © Ellis Horowitz, 1998-2022

Examples Using the Window Object
•To create a new window that shows only the toolbar and status bar and is resizable
window.open(“newURL”, “ ”,“toolbar,status,resizable”)
•The height and width defaults are the same as the browser
•The new window is positioned in the upper left-hand corner of the screen
•A call to window.open() returns a value of the new window’s object; this should always be assigned to a variable, e.g.
newWindow = window.open(““,””) if (newWindow != null) {
newWindow.document.write(“ Hello
World”) } Try https://csci571.com/examples/js/js_22_2.html
Copyright © Ellis Horowitz, 1998-2022

Parameters of windows.open()
• The open() method includes three top level parameters: newWin = open(url, name, [features, [replace]]);
– newWin: is a reference to the new window object
– url: a string URL value to be fetched by the new window (can be
– name: this name can be used with the HTML target attribute (do not use spaces in the name)
– features: a string that specifies the desired browser features (syntax: feature=value)
– replace: allows new entries to be made to the browser history
Copyright © Ellis Horowitz, 1998-2022

More on the features argument of the
windows.open method
• The ‘features’ string is a comma separated list of items (original list)
– location
– directories
– scrollbars
– resizable
– width, height
Back, Forward Buttons
the URL input field
What’s New, What’s Cool, etc
browser status line browser menu bar
enables scrollbars when needed
allows the window to be resizable window dimensions in pixels
• When the ‘features’ string is absent, the new browser window has all of the standard controls
• New, much larger set of recent ‘features’ available at: https://developer.mozilla.org/en-US/docs/Web/API/Window/open
• Chrome does not support most of the ‘features’
• Support varies by browser. Width & Height supported by all browsers
Copyright © Ellis Horowitz, 1998-2022

Sample Code to open a window with
attributes:
width=640, height=480, URL bar, browser toolbar, Menus, Directory buttons, Window status bar, window resizable, window scrollable
• Here is the code
• window.open(‘http://www.usc.edu’, ‘Sam’, ‘location=yes,toolbar=yes,menubar=yes,directories=yes,status=yes,resizable=y es,scrollbars=yes,height=480,width=640’, false);
• Three possible ways to invoke the code above:
1. Triggered at page load time
– 2. Triggered by clicking on a hyperlink
– click me to open a new window!
3. Triggered by clicking on a button
– Copyright © Ellis Horowitz, 1998-2022

Determining the Browser
• navigator is a built-in object with properties that describe the browser
– navigator.appName is a string with the browser name
– navigator.appVersion is a string with the version
• to determine the correct version, you may need to convert from string to number; parseFloat returns a number from a string, and ignores any part of the string after the number
– navigator.cookieEnabled determines whether cookies are enabled
– navigator.language returns the language of the browser
– navigator.userAgent returns the user-agent header sent
by the browser
Copyright © Ellis Horowitz, 1998-2022

Determining the Browser Version

Copyright © Ellis Horowitz, 1998-2022 22

Browser Output
Copyright © Ellis Horowitz, 1998-2022 23

Image Object
• Each image in an HTML document has an associated JavaScript object
– the properties of the object include • width and height in pixels
• src, URL of the image file
– Assigning to the src changes the image
• complete, true after an image finishes loading
• alt, text string returned if image is unavailable
• To manipulate an image in JavaScript one can refer to it EITHER by its NAME attribute or by a built-in array of images that is automatically created by JavaScript, e.g.
• document.images.name
• document.images[index] where index is either a number or a string containing the name of the image
• AnimageobjectcanalsobecreatedinJavaScript var myImage = new Image();
– this can be used to load images into a document that are not visible in the displayed document
– pre-fetching to make images appear immediately; coming up is an example
Copyright © Ellis Horowitz, 1998-2022 24

Example Working with Radio Buttons

Choose your favorite Beatle:

John
Paul

George

Ringo

Enter the name of your favorite Beatles song:

See samples under “JavaScript Objects at
http://csci571.com/examples.html#js
Copyright © Ellis Horowitz, 1998-2022 25

Beatle Picking Form
Copyright © Ellis Horowitz, 1998-2022 26

Checking for Empty Form Fields
Copyright © Ellis Horowitz, 1998-2022 27

Form Elements Checking (cont’d)
Copyright © Ellis Horowitz, 1998-2022 28

Form Elements Checking (cont’d)

Explanation: Each field is checked for a missing value, and if empty a boolean variable is set. A string is created of all empty fields and output.

---

First name:
Last name:
Street address:
City name:
Phone number:
Email:

---

Note: HTML5 provides the REQUIRED attribute for many Elements
Use libraries to support older browsers. See:
http://www.useragentman.com/blog/2010/07/27/creating-cross-browser-html5-forms-now- using-modernizr-webforms2-and-html5widgets-2/
Copyright © Ellis Horowitz, 1998-2022 29

Example Selecting Using Selection Lists

Dodgers
Yankees
Angels

Copyright © Ellis Horowitz, 1998-2022 30

Browser Output
Copyright © Ellis Horowitz, 1998-2022 31

Example Selection Using Multi-selection Lists

DodgersYankees Angels

Copyright © Ellis Horowitz, 1998-2022 32

Browser Output
Copyright © Ellis Horowitz, 1998-2022 33

JavaScript: addEventListener
• The addEventListener() method attaches an event handler to the
specified element.
– it does not overwrite existing event handlers.
– You can add many event handlers to one element.
– You can add event listeners to any DOM object not only HTML elements. i.e the window object
• Example: Add an event listener that fires when a user clicks a button: document.getElementById(“myBtn”).addEventListener(“click”, displayDate);
• Example: Use the alert function to print “Hello World!” when the user clicks on an element:
element.addEventListener(“click”, function(){ alert(“Hello World!”); });
• Example: on a click event change the associated text to Hello World; note the
reference to an external function
document.addEventListener(“click”, myFunction); function myFunction() {
document.getElementById(“demo”).innerHTML = “Hello World”; }
Copyright © Ellis Horowitz, 1998-2022 34

Example: Adding 3 Events to a Document

This example uses the addEventListener() method to add many events on the document.

document.addEventListener(“mouseover”, myFunction); document.addEventListener(“click”, mySecondFunction); document.addEventListener(“mouseout”, myThirdFunction); function myFunction() {
document.getElementById(“demo”).innerHTML += “Moused over!
” }
function mySecondFunction() {
document.getElementById(“demo”).innerHTML +=
“Clicked!
” }
function myThirdFunction() {
document.getElementById(“demo”).innerHTML += “Moused out!
” }

See: http://csci571.com/examples/js/Add3Events.html
Copyright © Ellis Horowitz, 1998-2022 35

JavaScript Language Issues
Copyright © Ellis Horowitz, 1998-2022 36

• • • • • • • • •
Functions as first-class objects
Functions as methods
Functions as constructors
Functions have unlimited arguments
By-value vs. By-reference
Data Types
Expressions and Operator Anomalies
Regular Expressions
Copyright © Ellis Horowitz, 1998-2022 37

•Functions are a type of object
function twice(x) { return x * x }
creates an object whose variable name is twice
•Therefore, functions can be treated as an
–assigned to new variables
–stored in arrays
–assigned to properties of objects
–passed as arguments to functions
•Example of function names
var twice_again = twice;
var sum = twice(5) + twice_again(10);
Copyright © Ellis Horowitz, 1998-2022 38

Methods of Functions
•One can associate a function with an object •If func() is a function, and obj is an object,
obj.method = func; assigns the function as an object method
•To invoke the method, do
obj.method()
•the this keyword refers to object obj
function compute_area() { return this.length *
this.width}
var rect = new Object();
rect.length = 10; rect.width = 20;
rect.area = compute_area; //passing the met

程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com