Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

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

Part 2 - Client side JavaScript and the DOM Flashcards

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
Q

how does software take advantage of the:

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

A

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

this means that dynamic content can be created

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

write the code that will create a javascript alert when a hyperlink is clicked

A

code:

<a href="javascript:alert('JavaScript is working in your browser');">link</a>

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

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

A

give 3 methods that belong to the
window.history object

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

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

A

describe the javascript method
toFixed()

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

describe the following terms related to the Document Object Model (DOM) :
1. node
2. root
3. parent
4. child
5. sibling
6. object

A
  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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

how does a
thick client
operate

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

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

A

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

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

these include:
* plug-ins
* add ons
* extensions

A

what 3 things do most web browsers support that give them additional functionality

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

give 4 points that contribute to javascript being so dominant

A

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.

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

describe the
window.document
object

A

this is the HTML document that has been turned into an object with methods and properties by the browser

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

give a benefit and disadvantage of a
thin client

A

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

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

the code is:
var textElement = document.createTextNode("My new TT284 button");

A

what is the js code to
create a text node and hold it in a variable

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

describe the following
window.navigator.appVersion

A

this will retrieves the browser version

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

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

A

give a benefit and disadvantage of a
thin client

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

describe the dom method
**querySelector() **

A

Accesses the first child element matching a CSS selector

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

from the
Browser Object Model (BOM)
below what does the following represent
1. windows
2. document and its children

A
  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
Q

how does a
thin client
operate

A

typically this will only display the information that is given to it by a server

42
Q

write the code that will create a javascript alert on a button click event

A

code:

<button onclick="alertFunction()">Test it</button>
<script>
function alertFunction() {
alert("Example alert box!");
}
</script>
43
Q

what is the syntax and parameters of
number()

A

syntax:

number(value)

@param value a boolean date or string value to be converted to a number

44
Q

gives access to all the forms in a document.

A

describe the following
window.document.forms

45
Q

how does the web browser build a
Document Object Model (DOM)

A

a browser builds this by reading the html and its tags into a tree of html elements (nodes)

46
Q

name 4 ways of inserting javascript into a web page

A

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
Q

describe the dom method
getElementById()

A

Accesses the first element with the specified id

48
Q

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.

A

describe the behaviour of the javascript method
number()

when supplying a boolean, date or string as an argument

49
Q

Accesses the first child element matching a CSS selector

A

describe the dom method
**querySelector() **

50
Q

what are the 5 steps taken by a web browser to produce a web page from HTML, javascript and CSS

A
51
Q

syntax:

number(value)

@param value a boolean date or string value to be converted to a number

A

what is the syntax and parameters of
number()

52
Q

describe the dom method
getElementsByTagName()

A

Accesses all child elements with a specified tagname

53
Q
A

what are the 5 steps taken by a web browser to produce a web page from HTML, javascript and CSS

54
Q

Accesses all child elements with a specified name

A

describe the dom method
**getElementsByName() **

55
Q

this is the HTML document that has been turned into an object with methods and properties by the browser

A

describe the
window.document
object

56
Q

describe the javascript method
number()

A

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

57
Q

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

A

describe the
window.location
object

58
Q

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

A

in a nutshell how does a web browser client produce a displayed page

59
Q

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

A

describe the
window.navigator
object

60
Q

give 3 methods that belong to the
window.history object

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

61
Q

describe the following
window.document.images

A

gives access to all the images in a document.

62
Q

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

A

give 5 variations of where javascript should be placed

63
Q

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”

A

the javascript is:

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

64
Q

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.

A

give 4 points that contribute to javascript being so dominant

65
Q

code:

<button onclick="alertFunction()">Test it</button>
<script>
function alertFunction() {
alert("Example alert box!");
}
</script>
A

write the code that will create a javascript alert on a button click event

66
Q

code:

<a href="javascript:alert('JavaScript is working in your browser');">link</a>

A

write the code that will create a javascript alert when a hyperlink is clicked

67
Q

will return the path of the current page

A

describe the following
window.location.pathname

68
Q

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

A

explain the 6 steps of this javascript:

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

69
Q

describe the dom method
**getElementsByName() **

A

Accesses all child elements with a specified name

70
Q

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

A

give 2 benefits of a
thick client

71
Q

a browser builds this by reading the html and its tags into a tree of html elements (nodes)

A

how does the web browser build a
Document Object Model (DOM)

72
Q

what 3 things do most web browsers support that give them additional functionality

A

these include:
* plug-ins
* add ons
* extensions

73
Q

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

A

name 4 ways of inserting javascript into a web page

74
Q

what is the js code that
creates a button with text inside and appends it to a html document

A

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);
75
Q

what is the
Browser Object Model (BOM)

A

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
Q

give 3 examples of adding functionality to a web browser

A

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
Q

gives access to the body of the document, i.e. the <body> tag and its children.

A

describe the following
window.document.body

78
Q

code:

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

A

write the code that will import a javascript file

79
Q

syntax:

number.toFixed(x)

@param x optional number of decimals default is 0

A

what is the syntax and parameters of the javascript method
toFixed()

80
Q

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);
A

what is the js code that
creates a button with text inside and appends it to a html document

81
Q

this will retrieves the browser version

A

describe the following
window.navigator.appVersion

82
Q
  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
A

describe the following terms related to the Document Object Model (DOM) :
1. node
2. root
3. parent
4. child
5. sibling
6. object

83
Q

describe the
window.history
object

A

this object contains the browsers history

84
Q

in a nutshell how does a web browser client produce a displayed page

A

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
Q

typically this will only display the information that is given to it by a server

A

how does a
thin client
operate

86
Q

describe the behaviour of the javascript method
number()

when supplying a boolean, date or string as an argument

A

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.

87
Q

what is the outcome of the javascript

object.value

where object is any javascript object

A

this will return the value an object holds

88
Q

Accesses the first element with the specified id

A

describe the dom method
getElementById()

89
Q

what is the syntax and parameters of the javascript method
toFixed()

A

syntax:

number.toFixed(x)

@param x optional number of decimals default is 0

90
Q

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

A

how does a
thick client
operate

91
Q

this will return the value an object holds

A

what is the outcome of the javascript

object.value

where object is any javascript object

92
Q
  1. windows - this represents the root of the Browser Object Model (BOM)
  2. document and its children - this represents the Document Object Model (DOM)
A

from the
Browser Object Model (BOM)
below what does the following represent
1. windows
2. document and its children

93
Q

give 5 variations of where javascript should be placed

A

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

94
Q

explain the 6 steps of this javascript:

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

A

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

95
Q

what is the
document object model (DOM)

A

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

it is how the browser views and represent a page

96
Q

describe the following
window.document.body

A

gives access to the body of the document, i.e. the <body> tag and its children.

97
Q

this will access and return the character encoding for the document

A

describe the following
window.document.characterSet

98
Q

what is the js code to
create a text node and hold it in a variable

A

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.
© 2024 Bold Learning Solutions. Terms and Conditions