IES: JS-deck 10 Flashcards

1
Q

HTML setInterval

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

HTML setTimeout

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

HTML status

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

HTML submit

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

HTML taint

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

HTML text

A
  • 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>Username:</label><br></br>
<input></input><br></br>
<label>Password:</label><br></br>
<input></input>
</form>

~~~
* (defines a password field)

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

HTML textarea

A
  • 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>Review of W3Schools:</label>

<textarea>
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))

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

HTML top

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

HTML unescape

A
  • 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”); // “ć”
    ~~~
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

HTML untaint

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

HTML window

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

HTML onclick

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

HTML ondblclick

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

HTML onfocus

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

HTML onfocusout

A
  • 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>
<input></input>
</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)

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

HTML onkeydown

A
  • 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)
17
Q

HTML onkeypress

A
  • 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)
18
Q

HTML onkeyup

A
  • 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></input>

    function myFunction() {
    var x = document.getElementById("fname").value;
    document.getElementById("demo").innerHTML = x;
    }

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

HTML onload

A
  • 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></img>

    function loadImage() {
    alert("Image is loaded");
    }

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

HTML onmousedown

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