IES: JS-deck 10

Question 1

HTML setInterval

Answer 1

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• Windows object method calls a function at specified intervals (in milliseconds)(1 second = 1000 milliseconds).
• Continues until clearInterval() is called, or window closes.
• Syntax
  setInterval(function, milliseconds, param1, param2, ...)
  Example

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

• (Displays the time like a digital watch)

Question 2

HTML setTimeout

Answer 2

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• Windows Object method calls a function after a number of milliseconds
• executes only once
• clearTimeout() method prevents function from starting
• Syntax
  setTimeout(function, milliseconds, param1, param2, ...)
• Example

let timeout;
function myFunction() {
  timeout = setTimeout(alertFunc, 3000);
}
function alertFunc() {
  alert("Hello!");
}

(Displays an alert box after 3 seconds (3000 milliseconds))

Question 3

HTML status

Answer 3

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• deprecated Windows object: avoid to prevent RUN-TIME ERRORS.
• Syntax
  window.status
• Example
  window.status = "Some text in the status bar!!";
• (Sets the text in the status bar)

Question 4

HTML submit

Answer 4

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• input type defining button submitting form values to form-handler.
• form-handler is typically server page with script processing input data and is specified in form action attribute.
• Syntax
  <input type="submit">
  Example
  <input type="submit">
• (defines a submit button)

Question 5

HTML taint

Answer 5

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• security issue: user-controlled input that can contain HTML is passed into an echo statement (can output multiple, different text strings).
• This can lead to a potential Cross Site Scripting (XSS) vulnerability, which could allow attackers to inject malicious JavaScript and execute any action JavaScript could do
• Example
  Tainted-html-response
  A request with potential user-input goes into an Ok() response. This bypasses any view or template environments, including HTML escaping.

Question 6

HTML text

Answer 6

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• Input type defining a single-line text input field
• default input type
• Syntax
  <input type="text">
• Example

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

• (defines a password field)

Question 7

HTML textarea

Answer 7

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• Tag defines a multi-line text input control often used to collect form comments or reviews.
• Can hold unlimited characters
• Text renders in fixed-width font (usually Courier).
• Always add <label> -best accessibility practices!
• Example

<label for="w3review">Review of W3Schools:</label>
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>

• (A multi-line text input control (text area))

Question 8

HTML top

Answer 8

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• (CSS) property affects vertical position of positioned element: Has no effect on non-positioned elements
  1. absolute or fixed position: sets element top edge of unit above/below the top edge of its nearest positioned ancestor.
  2. relative position: makes the element’s top edge to move above/below its normal position.
  3. sticky position: behaves like its position is relative when inside the viewport and like its position is fixed when outside
  4. static position: has no effect
• Syntax (CSS)
  top: auto|length|initial|inherit;
• Example (CSS)

div {
  position: absolute;
  top: 50px;
  border: 3px solid green;
}

(Sets the top edge of the positioned <div> element 50px down from the top edge of its nearest positioned ancestor)

Question 9

HTML unescape

Answer 9

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• JS Global Method: function is deprecated (no longer recommended)
• function computes new string in which hexadecimal escape sequences replaced with characters they represent
• Syntax
  unescape(str)
• Example

unescape("abc123"); // "abc123"
unescape("%E4%F6%FC"); // "äöü"
unescape("%u0107"); // "ć"

Question 10

HTML untaint

Answer 10

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• (JS) deprecated function: untaint()
• security issue: user-controlled input that can contain HTML is passed into an echo statement (can output multiple, different text strings).
• This can lead to a potential Cross Site Scripting (XSS) vulnerability, which could allow attackers to inject malicious JavaScript and execute any action JavaScript could do
• resource marked taint will be recreated in the next apply,
• untaint removes mark, ensuring resource stays unchanged
• useful when marked by mistake or with operational changes

Question 11

HTML window

Answer 11

• HTML Name, Window Object, or Property
• JS significant: avoid for variable/function names
• window object represents an open window in a browser
• If doc contains frames (<iframe>’s), browser creates one window for HTML doc and one for each frame.

Question 12

HTML onclick

Answer 12

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when the user clicks on an HTML element
• Syntax
  (HTML) <element onclick="myScript">
  (JS) object.onclick = function(){myScript};
  (JS addEventListener() method) object.addEventListener("click", myScript);
• Example
  <button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>
• (Clicks a <button> to display the date)

Question 13

HTML ondblclick

Answer 13

• HTML event attribute
• JS significant: avoid for variable/function names
• The user double-clicks on an element
• Syntax
  (HTML) <element ondblclick="myScript">
  (JS) object.ondblclick = function(){myScript};
  (JS addEventListener() method) object.addEventListener("dblclick", myScript);
• Example
  <p ondblclick="myFunction()">Double-click me</p>
  (Call a function when a <p> element is double-clicked)

Question 14

HTML onfocus

Answer 14

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when an element gets focus.
• often used on input fields.
• Syntax
  (HTML) <element onfocus="myScript">
  (JS) object.onfocus = function(){myScript};
  (JS addEventListener() method) object.addEventListener("focus", myScript);
• Example
  <input type="text" onfocus="this.value=''" value="Blabla">

Question 15

HTML onfocusout

Answer 15

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when an element loses focus.
• often used on input fields.
• often used with form validation
• Syntax
  (HTML) <element onfocusout="myScript">
  (JS) object.onfocusout = function(){myScript};
  (JS addEventListener() method) object.addEventListener("focusout", myScript);
• Example

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
let x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = "";
}
</script>

• (Event delegation: using focusin and focusout events)

Question 16

HTML onkeydown

Answer 16

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when the user presses a key on the keyboard
• Syntax
  (HTML) <element onkeydown="myScript">
  (JS) object.onkeydown = function(){myScript};
  (JS addEventListener() method) object.addEventListener("keydown", myScript);
• Example
  <input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
• (Using “onkeydown” together with the “onkeyup” event)

Question 17

HTML onkeypress

Answer 17

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when the user presses a key on the keyboard
• Deprecated for onkeydown event
• Syntax
  (HTML) <element onkeypress="myScript">
  (JS) object.onkeypress = function(){myScript};
  (JS addEventListener() method) object.addEventListener("keypress", myScript);
• Example
  <input type="text" onkeypress="myFunction()">
• (Call a function when the user presses a key)

Question 18

HTML onkeyup

Answer 18

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when the user releases a key on the keyboard
• Syntax
  (HTML) <element onkeyup="myScript">
  (JS) object.onkeyup = function(){myScript};
  (JS addEventListener() method) object.addEventListener("keyup", myScript);
• Example

Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
  var x = document.getElementById("fname").value;
  document.getElementById("demo").innerHTML = x;
}
</script>

• (Output the actual key that was released inside a text field)

Question 19

HTML onload

Answer 19

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when an object has been loaded.
• most often used with the <body> to execute script once web page has completely loaded
• Can check browser type and version, and load proper page version based on info
• Can deal with cookies
• Syntax
  (HTML) <element onload="myScript">
  (JS) object.onload = function(){myScript};
  (JS addEventListener() method) object.addEventListener("load", myScript);
• Example

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

• (Using onload on <img>. Alert “Image is loaded” immediately after image loaded)

Question 20

HTML onmousedown

Answer 20

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when mouse button pressed over HTML element
• Syntax
  (HTML) <element onmousedown="myScript">
  (JS) object.onmousedown = function(){myScript};
  (JS addEventListener() method) object.addEventListener("mousedown", myScript);
• Example
  <p onmousedown="myFunction()">Click the text!</p>
• (Call a function when pressing a mouse button over a paragraph)