By the end of this chapter, you should be able to:
| ECMAScript Edition | Date Issued | Features |
|---|---|---|
| 6th Edition (ES6) | June 2015 | Added new syntax for complex applications, included iterators and for . . . of loops, arrow functions, variable declarations using let and const |
| 7th Edition (ES7) | June 2016 | Added block-scoping of variables, exponentiation operator, and support for asynchronous execution |
| 8th Edition (ES8) | June 2017 | Added support for async/await constructions |
| 9th Edition (ES9) | June 2018 | Included rest/spread operators for variables, asynchronous iteration, and additions to regular expressions |
| 10th Edition (ES10) | June 2019 | Added features to object prototypes and changes to Array sorting |
| 11th Edition (ES11) | June 2020 | Added an optional object chaining operator for array and functions |
| DOM | Date | Features |
|---|---|---|
| DOM Level 0 | 1995 | Provided a basic interface to access the contents of a web page using the initial version of JavaScript |
| DOM Level 1 | October 1998 | Added a way of mapping the content of a web page to JavaScript keywords, functions, properties, and methods |
| DOM Level 2 | December 2000 | Added an interface to events occurring within the web page, the contents of CSS style sheets, and the ability to transverse and manipulate the hierarchical structure of the web page content |
| DOM Level 3 | April 2004 | Added support for methods to load and save web documents, validate web forms, and provides the ability to work with keyboard objects and events |
| DOM Level 4 | November 2015 | An ongoing “living standard” that is updated to reflect the events and actions occurring within the document model based on the evolving needs of the market and mobile devices |
How does the Internet affect your daily life? Try to imagine and describe how it would be different if the Internet ceased to be available to you.
js01_txt.html file in your code editor.js01.html.<script>
statements
</script>
document.write(“<p>Plant choices</>”);
<script>
</script>
carLoan object: carLoan.calcPayments(60)interest property of the carLoan object: carLoan.interest = .0349;Document object represents the entire content of the web pageDocument object's write() method writes new content to a web page while it is being loaded
document.write() method:js01.html file in your code editor.<script> tags, add the following statements as shown in Figure 1-9:document.write("<p>Plant choices for ");
document.write("<a href='http://planthardiness.ars.usda.gov'>");
document.write("hardiness zones</a>");
document.write(" 5a - 6b </p>");s01.html file in your web browser. As shown in Figure 1-10, the page should now display the content created by the four document.write() statements.js01.html file in your browser.
document.write() method
document.write() methodDocument.write(“Plant choices”); or document.WRITE(“Plant choices”);, will cause errorslet apple = “Fuji”; // Variable assignment
/*
Here comes a function!
*/
js01.html file in your code editor.<script> tag:/*
Information on available plants
including link to USDA website
*/
document.write() method, and type the following line comment:// hardiness zones for Chicago and surrounding area
js01.html in your web browser. Verify that the JavaScript comments are not displayed in the browser and that the content generated by the document.write() statements has not changed.
myVariableName| abstract | char | double | finally | in | null | super | try |
| arguments | class | else | float | instanceof | package | switch | typeof |
| await | const | enum | for | int | private | synchronized | var |
| boolean | continue | eval | function | interface | protected | this | void |
| break | debugger | export | goto | let | public | throw | volatile |
| byte | default | extends | if | long | return | throws | while |
| case | delete | FALSE | implements | native | short | transient | with |
| catch | do | final | import | new | static | TRUE | yield |
let variable = value;
var variable = value;
const variable = value;
let salesTotal; // Declares only
let curOrder = 47.58; // Declares and initializes
salesTotal = curOrder;
let orderNumber = “R0218”, salesTotal = 47.58, curOrder;
js01.html file in your code editor.//define variables containing plant file names
let blanket = "blanket.jpg";
let bluestem = "bluestem.jpg";
let rugosa = "rugosa.jpg";
let salesTotal = 47.58, shippingCost = 10;
let totalCost = salesTotal + shippingCost;
document.write(“<p> Your total costs is $” + totalCost + “</p>”);
<p>Your total cost is $57.58</p>
5 + “2” returns the text string “52”let totalSales = 0;
let item1Sales = 50, item2Sales = 75, item3Sales = 40;
totalSales = item1Sales + item2Sales + item3Sales;
document.write(“<p>Total sales = $” + totalSales + “</p>”);
<p>Total sales = $165</p> to the web pagecompanionAnimal.fillFoodBowl(“treats”);companionAnimal.name = “Marco”
const accelerationDueToGravity = 9.81;
let ballMass = 3, dropHeight;
dropHeight = landElevation + structureHeight;
document.write(“<p>A “ + ballMass “ kg ball fell “ dropHeight “ m.</p>”);
| Event | Keyboard Trigger | Mouse Trigger | Touchscreen Trigger |
|---|---|---|---|
| blur | An element, such as a radio button, becomes inactive | ||
| change | The value of an element, such as a text box, changes | ||
| click | A user presses a key when an element is selected | A user clicks an element once | A user touches an element and then stops touching it |
| error | An error occurs when a document or image is being loaded | ||
| focus | An element, such as a command button, becomes active | ||
| keydown | A user presses a key | ||
| keyup | A user releases a key | ||
| load | A document or image loads | ||
| mouseout | A user moves the mouse pointer off an element | A user stops touching an element | |
| mouseover | A user moves the mouse pointer over an element | A user touches an element | |
| reset | A form’s fields are reset to its default values | ||
| select | |||
| touchend | A user selects text | ||
| submit | A user submits a form | ||
| touchend | A user removes finger or stylus from the screen | ||
| touchmove | A finger or stylus already touching the screen moves on the screen | ||
| touchstart | A user touches a finger or stylus to the screen | ||
| unload | A document unloads |
click event is available for many elements, including the a element and form controls created with the input elementload and unload events are available for the body element<element onevent=”JavaScript code”>
window.alert() method, which displays the string passed to it in a dialog box with an OK button:<input type=”submit” onclick=”window.alert(‘Thanks for your order! We appreciate your business.')” />
id assigned using the HTML id attributeid value using the getElementById() method of the Document object
input element with the id value firstName:<input type=”text” id=”firstName” />
let fName = document.getElementById(“firstName”);
document.getElementById(“firstName”).value = value;
fName.value = value;
js01.html file in your code editor.aside element, in the opening tag for the first li element, add the following event handler:onclick="document.getElementById('plantImg').src = blanket"li element, add the following event handler:onclick="document.getElementById('plantImg').src = rugosa"li element, add the following event handler:onclick="document.getElementById('plantImg').src = bluestem"
What JavaScript characteristics do you consider most and least helpful to you as a programmer based on what you have learned so far? Explain why. (1.3, 1.4, 1.5)
script element for each code section
script elements can be included in a single HTML filescript elementdocument.write() method where the content is to be writtendocument.getElementById() method can reference page objects only after they are loaded into the DOM<script src=”url”></script>
script element can be used for embedding JavaScript code or referencing a file—not both at onceasync and defer keywords (script element attributes)
script element in the HTML fileasync attribute, the browser parses the HTML and JavaScript code together, only pausing to process the scriptdefer attribute, the browser parses and loads the HTML, then processes the script
js01_txt.html file in your code editor. Enter your name and the date in the head section of the file.</head> tag insert the following <script> tag to connect the page to the js01b.jsfile as shown in Figure 1-22.<script src="js01b.js" defer></script>
js01b.html and close your code editor.js01b.html in your web browser.js01b.html file in your browser and verify that clicking the list of plants on the left margin displays the corresponding plant time.
script element in the head section and using the src attribute to specify the file name