Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

TT284: block 2 - Web Architectures > Part 2 - Client side JavaScript and the DOM > Flashcards

Part 2 - Client side JavaScript and the DOM Flashcards

(98 cards)

Start Studying
1
Q

gives access to all the images in a document.

A

describe the following
window.document.images

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

describe the following
window.location.pathname

A

will return the path of the current page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

the javascript is:

document.getElementById("tt284").innerHTML = "<h2>Hello World</h2>"

A

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”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

insert a javascript alert using an HTML script element

A

code:

<script>
alert("JavaScript is working in your browser");
</script>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

describe the
window.location
object

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

give 2 benefits of a
thick client

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

describe the dom method
querySelectorAll()

A

Accesses all child elements matching a CSS selector

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Accesses all child elements matching a CSS selector

A

describe the dom method
querySelectorAll()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

this is a structure built by web browser from a given HTML document.

it is how the browser views and represent a page

A

what is the
document object model (DOM)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

write the code that will import a javascript file

A

code:

<script src="path/to/file.js"></script>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

what is the js code that
create a new HTML element and hold it inside a variable

A

the code is:
var buttonElement = document.createElement("button");

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

converts a value to a number.
If the value cannot be converted,NaNis returned.

A

describe the javascript method
number()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

give two drawbacks of javascripts
innerHTML

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

give 3 examples of adding functionality to a web browser

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

describe the following
window.document.forms

A

gives access to all the forms in a document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

describe the javascript method
toFixed()

A

method converts a number to a string and rounds the string to a specified number of decimals.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

describe the
window.navigator
object

A

this is an object that will hold details of the users browser

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

software will use these so that they can access, read and modify there nodes

this means that dynamic content can be created

A

how does software take advantage of the:

Document Object Model (DOM)
and
Browser Object Model (BOM)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Accesses all child elements with a specified tagname

A

describe the dom method
getElementsByTagName()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

describe the following
window.document.characterSet

A

this will access and return the character encoding for the document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

this object contains the browsers history

A

describe the
window.history
object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

code:

<script>
alert("JavaScript is working in your browser");
</script>
A

insert a javascript alert using an HTML script element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

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

A

what is the
Browser Object Model (BOM)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

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

A

give two drawbacks of javascripts
innerHTML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
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
26
write the code that will create a javascript alert when a hyperlink is clicked
code: `link`
27
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
28
method converts a number to a string and rounds the string to a specified number of decimals.
describe the javascript method **toFixed()**
29
describe the following terms related to the **Document Object Model (DOM)** : 1. node 2. root 3. parent 4. child 5. sibling 6. object
1. node - is a single element of the Document Object Model (DOM) 2. root - is the starting point of the DOM, which is the document node 3. parent - a node that has children (nested nodes) 4. child - a node that belongs to a parent (is nested within a node) 5. sibling - nodes that share the same parent 6. object - is a node plus all of its children and descendents
30
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
31
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**
32
these include: * plug-ins * add ons * extensions
what 3 things do most web browsers support that give them additional functionality
33
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.
34
describe the **window.document** object
this is the HTML document that has been turned into an object with methods and properties by the browser
35
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
36
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**
37
describe the following **window.navigator.appVersion**
this will retrieves the browser version
38
**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**
39
describe the dom method **querySelector() **
Accesses the first child element matching a CSS selector
40
from the **Browser Object Model (BOM)** below what does the following represent 1. windows 2. document and its children
1. **windows** - this represents the root of the Browser Object Model (BOM) 2. **document and its children** - this represents the Document Object Model (DOM)
41
how does a **thin client** operate
typically this will only display the information that is given to it by a server
42
write the code that will create a javascript alert on a button click event
code: ``` ```
43
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
44
gives access to all the forms in a document.
describe the following **window.document.forms**
45
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)
46
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
47
describe the dom method **getElementById()**
Accesses the first element with the specified id
48
behaves as follows: 1. For booleans, Number() returns 0 or 1. 2. For dates, Number() returns milliseconds since January 1, 1970 00:00:00. 3. For strings, Number() returns a number or NaN.
describe the behaviour of the javascript method **number()** when supplying a boolean, date or string as an argument
49
Accesses the first child element matching a CSS selector
describe the dom method **querySelector() **
50
what are the 5 steps taken by a web browser to produce a web page from HTML, javascript and CSS
51
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()**
52
describe the dom method **getElementsByTagName()**
Accesses all child elements with a specified tagname
53
what are the 5 steps taken by a web browser to produce a web page from HTML, javascript and CSS
54
Accesses all child elements with a specified name
describe the dom method **getElementsByName() **
55
this is the HTML document that has been turned into an object with methods and properties by the browser
describe the **window.document** object
56
describe the javascript method **number()**
converts a value to a number. If the value cannot be converted, NaN is returned.
57
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
58
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
59
this is an object that will hold details of the users browser
describe the **window.navigator** object
60
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
61
describe the following **window.document.images**
gives access to all the images in a document.
62
If html must be rendered first then place the javascript at the end of the document just before the closing body tage 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
63
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 = "

Hello World

"`
64
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
65
code: ``` ```
write the code that will create a javascript alert on a button click event
66
code: `link`
write the code that will create a javascript alert when a hyperlink is clicked
67
will return the path of the current page
describe the following **window.location.pathname**
68
what is the code for the steps below: 1.Retrieves the element with id tt284 2.Sets its innerHTML property to the string "

Hello World

" 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 = "

Hello World

"`
69
describe the dom method **getElementsByName() **
Accesses all child elements with a specified name
70
**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**
71
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)**
72
what 3 things do most web browsers support that give them additional functionality
these include: * plug-ins * add ons * extensions
73
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
74
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. buttonElement.appendChild(textElement); // Add the button to the end of the document body // i.e. before the tag document.body.appendChild(buttonElement); ```
75
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
76
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
77
gives access to the body of the document, i.e. the tag and its children.
describe the following **window.document.body**
78
code: ``
write the code that will import a javascript file
79
syntax: `number.toFixed(x)` @param x optional number of decimals default is 0
what is the syntax and parameters of the javascript method **toFixed()**
80
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. buttonElement.appendChild(textElement); // Add the button to the end of the document body // i.e. before the tag document.body.appendChild(buttonElement); ```
what is the js code that **creates a button with text inside and appends it to a html document**
81
this will retrieves the browser version
describe the following **window.navigator.appVersion**
82
1. node - is a single element of the Document Object Model (DOM) 2. root - is the starting point of the DOM, which is the document node 3. parent - a node that has children (nested nodes) 4. child - a node that belongs to a parent (is nested within a node) 5. sibling - nodes that share the same parent 6. 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
83
describe the **window.history** object
this object contains the browsers history
84
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
85
typically this will only display the information that is given to it by a server
how does a **thin client** operate
86
describe the behaviour of the javascript method **number()** when supplying a boolean, date or string as an argument
behaves as follows: 1. For booleans, Number() returns 0 or 1. 2. For dates, Number() returns milliseconds since January 1, 1970 00:00:00. 3. For strings, Number() returns a number or NaN.
87
what is the outcome of the javascript `object.value` where object is any javascript object
this will return the value an object holds
88
Accesses the first element with the specified id
describe the dom method **getElementById()**
89
what is the syntax and parameters of the javascript method **toFixed()**
syntax: `number.toFixed(x)` @param x optional number of decimals default is 0
90
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
91
this will return the value an object holds
what is the outcome of the javascript `object.value` where object is any javascript object
92
1. **windows** - this represents the root of the Browser Object Model (BOM) 2. **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
93
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 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
94
explain the 6 steps of this javascript: `document.getElementById("tt284").innerHTML = "

Hello World

"`
what is the code for the steps below: 1.Retrieves the element with id tt284 2.Sets its innerHTML property to the string "

Hello World

" 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
95
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
96
describe the following **window.document.body**
gives access to the body of the document, i.e. the tag and its children.
97
this will access and return the character encoding for the document
describe the following **window.document.characterSet**
98
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");`

TT284: block 2 - Web Architectures (5 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions