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)
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))
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)
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)
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.
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)
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))
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)
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”); // “ć”
~~~
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
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.
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)
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)
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">
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)