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(“
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
–
– 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