JavaScript
indexed arrays work great with loop because they allow you to use...
a loop counter to loop through array data.
use the if statement to conditionally run...
a single piece of JavaScript code.
there are two methods to access HTML elements...
the getElementById( ) method of the standard document object; it allows you to reach within a page and access a HTML element as long as that element has a unique ID. the getElementByTagName( ) grabs all of the elements on a page of a certain kind, like div or img.
local variables are preferred over global variables because...
their access is more tightly controlled.
the test condition in an if statement must always result in...
true or false.
use the if/else statement to conditionally run one of the...
two different pieces of JavaScript code.
what are the two general types of functions:
user-defined and built-in
what are user-defined functions:
user-defined functions are those that are created by the programmer. example calculateFinalBill
<script type="text/javascript">
javascript functions are placed in a special <script> tag that goes in the <head> of the page. the type attribute of the <script> tag is used to identify the type of the script language, in this case javascript.
the break statement immediately breaks out of a...
loop, skipping any remaining loop code.
what is the difference between the assignment operator (=) and the relational operator (==) ...
make sure that when you intend to compare two values for equality you use ==, not =. otherwise, you'll end up assigning one of the values and potentially creating all kinds of new and unusual bugs.
functions allow you to bundle JavaScript code into...
reusable modules.
Script data can usually be represented by one of the three basic data types...
text, number, or boolean (true/false logic operators).
how is space created on a page through the use of <div>...
the <div> tag has an ID that uniquely identifies the element for holding scene description text.
placement of <script> tag:
the <script> tag can be used in either the <head> or <body> elements of a web page.
what are the three types of conditional executive, selection structures:
if statement, if else statement, switch statement.
the data type of a piece of JavaScript data is established when...
you set the data to a certain value, and for variables the type can change.
select structures are the same thing as...
...conditional executive
repetition structures are the same thing as...
...loops
to modify contents of a page...
...we should use the DOM
multiline comments start with...
/* and end with */
call a function:
<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> <p>By pressing the button above, a function will be called. The function will alert a message.</p> </body> </html>
for loops repeat a piece of...
JavaScript code a specific number of times.
use a compound statement to run multiple pieces of...
JavaScript code in place of a single piece of code.
events are used to respond to web page happenings with...
JavaScript code.
how does JavaScript normally execute:
JavaScript normally executes sequentially, top/down. there are constructs that allow us to modify this flow of execution.
the alert( ); function is used to...
alert the user.
where is an attribute located in the DOM tree...
an attribute of an element, accessible through an element node, but not present directly in the DOM tree.
what is an element...
any HTML element that corresponds to an tag in HTML code.
a node directly relates to...
each element on a page.
don't be afraid to use lots of comments to document your code so that it's ...
easier to understand.
moving script code to an...
external file is a handy way to make the code more reusable and maintainable.
avoid an infinite loop by making sure the test condition is somehow affected by code within the...
while loop.
what is inner HTML...
you can access HTML elements that are capable of holding text content, such as <div> and <p>, by using a property called innerHTML.
what does the assignment operator do...
( = ) assigns a value
one loop cycle consists of 4 different parts:
1. initialization 2. test condition 3. action 4. update 1-2-3-4-2-3-4 numbers 2-3-4 are one loop and then the next set of 2-3-4 are another loop.
even though the onload event applies to the entire page, you can set it as an attribute of the...
<body> tag because the body of a page is the part that is visible in a browser.
changing HTML elements with JavaScript:
<html> <body> <h1>My First Web Page</h1> <p id="demo">This is a paragraph.</p> <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html>
write to the document with JavaScript:
<html> <body> <h1>My First Web Page</h1> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script> </body> </html>
multiple lines comments:
<html> <body> <script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
single line comments:
<html> <body> <script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
JavaScript statements:
<html> <body> <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> </body> </html>
while loop:
<html> <body> <script type="text/javascript"> i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } </script> <p>Explanation:</p> <p><b>i</b> is equal to 0.</p> <p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body> </html>
if statement:
<html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } </script> <p>This example demonstrates the If statement.</p> <p>If the time on your browser is less than 10, you will get a "Good morning" greeting.</p> </body> </html>
if else statement:
<html> <body> <script type="text/javascript"> var d = new Date(); var time = d.getHours(); if (time < 10) { document.write("<b>Good morning</b>"); } else { document.write("<b>Good day</b>"); } </script> <p> This example demonstrates the If...Else statement. </p> <p> If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting. </p> </body> </html>
declare a variable, assign a value to it, and display it:
<html> <body> <script type="text/javascript"> var firstname; firstname="Hege"; document.write(firstname); document.write("<br />"); firstname="Tove"; document.write(firstname); </script> <p>The script above declares a variable, assigns a value to it, displays the value, changes the value, and displays the value again.</p> </body> </html>
for loop:
<html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } </script> <p>Explanation:</p> <p>This for loop starts with i=0.</p> <p>As long as <b>i</b> is less than, or equal to 5, the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.</p> </body> </html>
switch statement:
<html> <body> <script type="text/javascript"> var d=new Date(); var theDay=d.getDay(); switch (theDay) { case 5: document.write("<b>Finally Friday</b>"); break; case 6: document.write("<b>Super Saturday</b>"); break; case 0: document.write("<b>Sleepy Sunday</b>"); break; default: document.write("<b>I'm really looking forward to this weekend!</b>"); } </script> <p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p> </body> </html>
an external JavaScript:
<html> <head> </head> <body> <script type="text/javascript" src="xxx.js"> </script> <p> The actual script is in an external script file called "xxx.js". </p> </body> </html>
onclick event:
<html> <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First Web Page</h1> <p id="demo">This is a paragraph.</p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html>
onmouseover event:
<html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt; } </script> </head> <body> <img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape ="rect" coords ="0,0,82,126" onmouseover="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" onmouseover="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" onmouseover="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" /> </map> <p id="desc">Mouse over the sun and the planets and see the different descriptions.</p> </body> </html>
JavaScript can write HTML formatted text to the document through:
JavaScript statements
ways in which we can comment our JavaScript:
Single line comments and multiple lines comments
use of document.write :
a. document.write statements must be run before the page finishes loading b. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page. c. The document is finished loading once the browser reaches the </html> d. This means, if you were to create a button that, when clicked, uses document.write to output text, a NEW document would be created overwriting the current document!! This is why we need the innerHTML property of the DOM
local variables are created (and destroyed) inside the...
body of code, and can only be accessed within that code.
prompt( ) is a function that causes a...
box to pop up and get a value from the user.
the alert( ) function is a...
built-in JavaScript function that displays a text message in a small pop-up window.
what are built-in functions:
built-in are those that are a part of the core language. these are often built to handle events.
the text content for an element is always stored as a...
child node beneath an element.
onclick event handler is triggered whenever the user...
clicks the mouse on an element on the page, each web page element can have its own unique onclick response code.
comments are a great way to remind yourself of...
code to add later.
some functions require you to pass them information to...
complete their task.
where is the term document placed in a DOM tree...
document is the top node in a DOM tree, representing the document itself, and appearing just above the html element.
your page is a collection of 4 DOM nodes, which are...
document, element, text, attribute
your javascript can live outside your web page when you import...
external script code into a page, all of the javascript code in the script file is inserted inside of the <script> tag in the HTML code, just as you have placed the code directly in your web page.
the onload event is triggered when a page...
finishes loading.
what are the two different types of loops:
for loop, while loop
what are functions:
functions are named blocks of code that can be called to perform something. there are two general types of functions.
Compound statements allow the action parts of if and if/else statements to do...
more than one thing.
create a compound statement by surrounding...
multiple individual statements with {curly braces}.
an array allows you to store...
multiple pieces of data in a single place.
indexed arrays are accessed using...
numeric keys called indexes.
you respond to the onload event by setting the...
onload attribute of the <body> tag.
global variables are created at the script level...
outside of any function or other body of code, and are kept around for the life of the script.
a variable is a...
piece of data that can change over the course of a script. the var keyword is used to create variables.
a constant is a...
piece of information that cannot change. the const keyword is used to create constants.
boolean logic operators allow you to create...
powerful true/false logic for making decisions.
the increment (++) and decrement (--) operators...
provide a handy way to update loop counters.
X = = Y
relational operator equality true if X equal Y, otherwise false.
X > Y
relational operator greater than true if X is greater than Y, otherwise false.
X >= Y
relational operator greater than or equal to true if X is greater than or equal to Y, otherwise false.
X! = Y
relational operator inequality true if X is unequal to Y, otherwise false.
X < Y
relational operator less than true if X is less than Y, otherwise false.
X <= Y
relational operator less than or equal to true if X is less than or equal to Y, otherwise false.
!X
relational operator negation false if X is true, true if X is false.
the while loop runs a piece of code as long as a certain test condition...
remains true.
what are the constructs that allow us to modify the flow of execution:
selection structure and repetition structures.
although an array holds multiple pieces of information, it has a...
single variable name.
use a pair of forward slashes (//) to start a...
single-line comment.
