Part 2 - Client side JavaScript and the DOM Flashcards
gives access to all the images in a document.
describe the following
window.document.images
describe the following
window.location.pathname
will return the path of the current page
the javascript is:
document.getElementById("tt284").innerHTML = "<h2>Hello World</h2>"
write the javascript that will:
get the element with id “tt284” and then replace its nested content with a h2 header that says “hello world”
insert a javascript alert using an HTML script element
code:
<script>
alert("JavaScript is working in your browser");
</script>
describe the
window.location
object
this is an object that has properties and methods that can display addrees, protocol and port information of the page and even redirect a page
give 2 benefits of a
thick client
Benefits:
* Operations no longer require a HTTP request to the server giving speed improvements and less waiting for the user
* Easier to deliver an application via a thick client than developing for different machines with different environments
describe the dom method
querySelectorAll()
Accesses all child elements matching a CSS selector
Accesses all child elements matching a CSS selector
describe the dom method
querySelectorAll()
this is a structure built by web browser from a given HTML document.
it is how the browser views and represent a page
what is the
document object model (DOM)
write the code that will import a javascript file
code:
<script src="path/to/file.js"></script>
what is the js code that
create a new HTML element and hold it inside a variable
the code is:var buttonElement = document.createElement("button");
converts a value to a number.
If the value cannot be converted,NaNis returned.
describe the javascript method
number()
give two drawbacks of javascripts
innerHTML
drawbacks include:
1.Screen readers may not be aware of the new content
2.Care must be taken when adding untrusted data in case it is malicious
these include:
1. Ad blockers - used to block ads
2. Reference management tools - which help collect and mange reference material for research
3. Bookmarking - allowing users to collect and annotate content
give 3 examples of adding functionality to a web browser
describe the following
window.document.forms
gives access to all the forms in a document.
describe the javascript method
toFixed()
method converts a number to a string and rounds the string to a specified number of decimals.
describe the
window.navigator
object
this is an object that will hold details of the users browser
software will use these so that they can access, read and modify there nodes
this means that dynamic content can be created
how does software take advantage of the:
Document Object Model (DOM)
and
Browser Object Model (BOM)
Accesses all child elements with a specified tagname
describe the dom method
getElementsByTagName()
describe the following
window.document.characterSet
this will access and return the character encoding for the document
this object contains the browsers history
describe the
window.history
object
code:
<script>
alert("JavaScript is working in your browser");
</script>
insert a javascript alert using an HTML script element
this is similar to the Document Object Model (DOM) in that it is a structure that is built by the browser.
however this will instead expose parts of the web browser instead of the HTML document
what is the
Browser Object Model (BOM)
drawbacks include:
1.Screen readers may not be aware of the new content
2.Care must be taken when adding untrusted data in case it is malicious
give two drawbacks of javascripts
innerHTML
how does software take advantage of the:
Document Object Model (DOM)
and
Browser Object Model (BOM)
software will use these so that they can access, read and modify there nodes
this means that dynamic content can be created
write the code that will create a javascript alert when a hyperlink is clicked
code:
<a href="javascript:alert('JavaScript is working in your browser');">link</a>
these include:
* .length - returns the number of URLs in the history list.
* .back() - mimics clicking back in the browser
* .forward() - mimics clicking forward in the browser
give 3 methods that belong to the
window.history object
method converts a number to a string and rounds the string to a specified number of decimals.
describe the javascript method
toFixed()
describe the following terms related to the Document Object Model (DOM) :
1. node
2. root
3. parent
4. child
5. sibling
6. object
- node - is a single element of the Document Object Model (DOM)
- root - is the starting point of the DOM, which is the document node
- parent - a node that has children (nested nodes)
- child - a node that belongs to a parent (is nested within a node)
- sibling - nodes that share the same parent
- object - is a node plus all of its children and descendents
how does a
thick client
operate
this will take on many processing tasks and will most likely be relieveing those tasks from the server.
however initial data may be required from the server so that it can perform operations on that data
the code is:var buttonElement = document.createElement("button");
what is the js code that
create a new HTML element and hold it inside a variable
these include:
* plug-ins
* add ons
* extensions
what 3 things do most web browsers support that give them additional functionality
give 4 points that contribute to javascript being so dominant
these include:
1. JavaScript can be embedded in any HTML page.
2. JavaScript can be natively interpreted by all modern browsers, without the use of any extensions or plug-ins.
3. Computations and actions can be executed on the client side, and there are situations in which this is preferred, for example to provide immediate responsiveness in a web page.
4. JavaScript is ‘mainstream’, meaning that it is recognised as a useful language with many practitioners. It is recognised as an evolving standard known as ECMAScript and as having some longevity.
describe the
window.document
object
this is the HTML document that has been turned into an object with methods and properties by the browser
give a benefit and disadvantage of a
thin client
Benefit - the software and hardware can be relatively simple as little work is needed
Disadvantage - Because these do no processing operations may take longer as HTTP request must be made to the server and there is also the processing time of the server
the code is:var textElement = document.createTextNode("My new TT284 button");
what is the js code to
create a text node and hold it in a variable
describe the following
window.navigator.appVersion
this will retrieves the browser version
Benefit - the software and hardware can be relatively simple as little work is needed
Disadvantage - Because these do no processing operations may take longer as HTTP request must be made to the server and there is also the processing time of the server
give a benefit and disadvantage of a
thin client
describe the dom method
**querySelector() **
Accesses the first child element matching a CSS selector
from the
Browser Object Model (BOM)
below what does the following represent
1. windows
2. document and its children
- windows - this represents the root of the Browser Object Model (BOM)
- document and its children - this represents the Document Object Model (DOM)
how does a
thin client
operate
typically this will only display the information that is given to it by a server
write the code that will create a javascript alert on a button click event
code:
<button onclick="alertFunction()">Test it</button>
<script>
function alertFunction() {
alert("Example alert box!");
}
</script>
what is the syntax and parameters of
number()
syntax:
number(value)
@param value a boolean date or string value to be converted to a number
gives access to all the forms in a document.
describe the following
window.document.forms
how does the web browser build a
Document Object Model (DOM)
a browser builds this by reading the html and its tags into a tree of html elements (nodes)
name 4 ways of inserting javascript into a web page
this can be inserted by:
1. Inside an HTML script element
2. Importing a javascript file
3. As a value of an event
4. As hyperlink attributes
describe the dom method
getElementById()
Accesses the first element with the specified id
behaves as follows:
1. Forbooleans, Number() returns 0 or 1.
2. Fordates, Number() returns milliseconds since January 1, 1970 00:00:00.
3. Forstrings, Number() returns a number or NaN.
describe the behaviour of the javascript method
number()
when supplying a boolean, date or string as an argument
Accesses the first child element matching a CSS selector
describe the dom method
**querySelector() **
what are the 5 steps taken by a web browser to produce a web page from HTML, javascript and CSS
syntax:
number(value)
@param value a boolean date or string value to be converted to a number
what is the syntax and parameters of
number()
describe the dom method
getElementsByTagName()
Accesses all child elements with a specified tagname
what are the 5 steps taken by a web browser to produce a web page from HTML, javascript and CSS
Accesses all child elements with a specified name
describe the dom method
**getElementsByName() **
this is the HTML document that has been turned into an object with methods and properties by the browser
describe the
window.document
object
describe the javascript method
number()
converts a value to a number.
If the value cannot be converted,NaNis returned.
this is an object that has properties and methods that can display addrees, protocol and port information of the page and even redirect a page
describe the
window.location
object
this will collect all the:
* information
* resources
* instructions
that make up a web page and then uses them to produce a web page that is presented to the user
in a nutshell how does a web browser client produce a displayed page
this is an object that will hold details of the users browser
describe the
window.navigator
object
give 3 methods that belong to the
window.history object
these include:
* .length - returns the number of URLs in the history list.
* .back() - mimics clicking back in the browser
* .forward() - mimics clicking forward in the browser
describe the following
window.document.images
gives access to all the images in a document.
If html must be rendered first then place the javascript at the end of the document just before the closing body tage </body>
If javascript is needed to help create the display then place it at the start of the document inside the head
If javascript is part of a library of code or used on more than one page then it should be in a separate .js file
If javascript code is being repeated it should be in a .js file
If javascript is used once on a single page then it can be placed within the html document
give 5 variations of where javascript should be placed
write the javascript that will:
get the element with id “tt284” and then replace its nested content with a h2 header that says “hello world”
the javascript is:
document.getElementById("tt284").innerHTML = "<h2>Hello World</h2>"
these include:
1. JavaScript can be embedded in any HTML page.
2. JavaScript can be natively interpreted by all modern browsers, without the use of any extensions or plug-ins.
3. Computations and actions can be executed on the client side, and there are situations in which this is preferred, for example to provide immediate responsiveness in a web page.
4. JavaScript is ‘mainstream’, meaning that it is recognised as a useful language with many practitioners. It is recognised as an evolving standard known as ECMAScript and as having some longevity.
give 4 points that contribute to javascript being so dominant
code:
<button onclick="alertFunction()">Test it</button>
<script>
function alertFunction() {
alert("Example alert box!");
}
</script>
write the code that will create a javascript alert on a button click event
code:
<a href="javascript:alert('JavaScript is working in your browser');">link</a>
write the code that will create a javascript alert when a hyperlink is clicked
will return the path of the current page
describe the following
window.location.pathname
what is the code for the steps below:
1.Retrieves the element with id tt284
2.Sets its innerHTML property to the string “<h2>Hello World</h2>”
3.The browser then creates a H2 tag for us
4.Creates a text node for us
5.Creates the element
6.Replaces the current children of retrived element with the new element
explain the 6 steps of this javascript:
document.getElementById("tt284").innerHTML = "<h2>Hello World</h2>"
describe the dom method
**getElementsByName() **
Accesses all child elements with a specified name
Benefits:
* Operations no longer require a HTTP request to the server giving speed improvements and less waiting for the user
* Easier to deliver an application via a thick client than developing for different machines with different environments
give 2 benefits of a
thick client
a browser builds this by reading the html and its tags into a tree of html elements (nodes)
how does the web browser build a
Document Object Model (DOM)
what 3 things do most web browsers support that give them additional functionality
these include:
* plug-ins
* add ons
* extensions
this can be inserted by:
1. Inside an HTML script element
2. Importing a javascript file
3. As a value of an event
4. As hyperlink attributes
name 4 ways of inserting javascript into a web page
what is the js code that
creates a button with text inside and appends it to a html document
the code is:
// create HTML button
var buttonElement = document.createElement("button");
// create text node
var textElement = document.createTextNode("My new TT284 button");
// Set the text of the button by nesting the text element inside it
// i.e. <button>My new TT284 button</button>
buttonElement.appendChild(textElement);
// Add the button to the end of the document body
// i.e. before the </body> tag
document.body.appendChild(buttonElement);
what is the
Browser Object Model (BOM)
this is similar to the Document Object Model (DOM) in that it is a structure that is built by the browser.
however this will instead expose parts of the web browser instead of the HTML document
give 3 examples of adding functionality to a web browser
these include:
1. Ad blockers - used to block ads
2. Reference management tools - which help collect and mange reference material for research
3. Bookmarking - allowing users to collect and annotate content
gives access to the body of the document, i.e. the <body> tag and its children.
describe the following
window.document.body
code:
<script src="path/to/file.js"></script>
write the code that will import a javascript file
syntax:
number.toFixed(x)
@param x optional number of decimals default is 0
what is the syntax and parameters of the javascript method
toFixed()
the code is:
// create HTML button
var buttonElement = document.createElement("button");
// create text node
var textElement = document.createTextNode("My new TT284 button");
// Set the text of the button by nesting the text element inside it
// i.e. <button>My new TT284 button</button>
buttonElement.appendChild(textElement);
// Add the button to the end of the document body
// i.e. before the </body> tag
document.body.appendChild(buttonElement);
what is the js code that
creates a button with text inside and appends it to a html document
this will retrieves the browser version
describe the following
window.navigator.appVersion
- node - is a single element of the Document Object Model (DOM)
- root - is the starting point of the DOM, which is the document node
- parent - a node that has children (nested nodes)
- child - a node that belongs to a parent (is nested within a node)
- sibling - nodes that share the same parent
- object - is a node plus all of its children and descendents
describe the following terms related to the Document Object Model (DOM) :
1. node
2. root
3. parent
4. child
5. sibling
6. object
describe the
window.history
object
this object contains the browsers history
in a nutshell how does a web browser client produce a displayed page
this will collect all the:
* information
* resources
* instructions
that make up a web page and then uses them to produce a web page that is presented to the user
typically this will only display the information that is given to it by a server
how does a
thin client
operate
describe the behaviour of the javascript method
number()
when supplying a boolean, date or string as an argument
behaves as follows:
1. Forbooleans, Number() returns 0 or 1.
2. Fordates, Number() returns milliseconds since January 1, 1970 00:00:00.
3. Forstrings, Number() returns a number or NaN.
what is the outcome of the javascript
object.value
where object is any javascript object
this will return the value an object holds
Accesses the first element with the specified id
describe the dom method
getElementById()
what is the syntax and parameters of the javascript method
toFixed()
syntax:
number.toFixed(x)
@param x optional number of decimals default is 0
this will take on many processing tasks and will most likely be relieveing those tasks from the server.
however initial data may be required from the server so that it can perform operations on that data
how does a
thick client
operate
this will return the value an object holds
what is the outcome of the javascript
object.value
where object is any javascript object
- windows - this represents the root of the Browser Object Model (BOM)
- document and its children - this represents the Document Object Model (DOM)
from the
Browser Object Model (BOM)
below what does the following represent
1. windows
2. document and its children
give 5 variations of where javascript should be placed
If html must be rendered first then place the javascript at the end of the document just before the closing body tage </body>
If javascript is needed to help create the display then place it at the start of the document inside the head
If javascript is part of a library of code or used on more than one page then it should be in a separate .js file
If javascript code is being repeated it should be in a .js file
If javascript is used once on a single page then it can be placed within the html document
explain the 6 steps of this javascript:
document.getElementById("tt284").innerHTML = "<h2>Hello World</h2>"
what is the code for the steps below:
1.Retrieves the element with id tt284
2.Sets its innerHTML property to the string “<h2>Hello World</h2>”
3.The browser then creates a H2 tag for us
4.Creates a text node for us
5.Creates the element
6.Replaces the current children of retrived element with the new element
what is the
document object model (DOM)
this is a structure built by web browser from a given HTML document.
it is how the browser views and represent a page
describe the following
window.document.body
gives access to the body of the document, i.e. the <body> tag and its children.
this will access and return the character encoding for the document
describe the following
window.document.characterSet
what is the js code to
create a text node and hold it in a variable
the code is:var textElement = document.createTextNode("My new TT284 button");
