IES: JS-deck 11

Question 1

HTML onmouseup

Answer 1

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

Question 2

HTML onmouseover

Answer 2

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when mouse pointer enters an element
• often used with onmouseout event
• similar to onmouseenter event: difference is onmouseenter event doesn’t bubble (relay info and influence up doc hierarchy).
• Syntax
  (HTML) <element onmouseover="myScript">
  (JS) object.onmouseover = function(){myScript};
  (JS addEventListener() method) object.addEventListener(“mouseover”, myScript);
• Example
  <img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
• (Calls a function when moving the mouse pointer onto an image)

Question 3

HTML onmouseout

Answer 3

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when mouse pointer moves out of element.
• often used together with onmouseover event
• onmouseout event similar to onmouseleave: difference is onmouseleave doesn’t bubble (does not relay info and influence up the document hierarchy).
• Syntax
  (HTML) <element onmouseout="myScript">
  (JS) object.onmouseout = function(){myScript};
  (JS addEventListener() method) object.addEventListener("mouseout", myScript);
• Example

<div onmouseout="myOutFunction()">
  <p id="demo3">I will demonstrate onmouseout!</p>
</div>

• (example demonstrates the onmouseout event)

Question 4

HTML onmousemove

Answer 4

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when the pointer moves over an element
• Syntax
  (HTML) <element onmousemove="myScript">
  (JS) object.onmousemove = function(){myScript};
  (JS addEventListener() method) object.addEventListener("mousemove", myScript);
• Example
  <div onmousemove="myFunction()">Move the cursor over me</div>
• (Call a function when moving the mouse pointer over a <div> element)

Question 5

HTML onchange

Answer 5

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when HTML element value changes.
• similar to oninput event: difference is oninput occurs immediately after element value changed
• onchange occurs when element loses focus, after the content has been changed.
• other difference- onchange works on <select> elements
• Syntax
  (HTML) <element onchange="myScript">
  (JS) object.onchange = function(){myScript};
  (JS addEventListener() method) object.addEventListener("change", myScript);
• Example
  <input type="text" onchange="myFunction()">
• (Calls a function when input field content changes)

Question 6

HTML onreset

Answer 6

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when a form is reset
• Syntax
  (HTML) <element onreset="myScript">
  (JS) object.onreset = function(){myScript};
  (JS addEventListener() method) object.addEventListener("reset", myScript);
• Example

<form onreset="myFunction()">
  Enter name: <input type="text">
  <input type="reset">
</form>

• (Call a function when a form is reset)

Question 7

HTML onsubmit

Answer 7

• HTML event attribute
• JS significant: avoid for variable/function names
• occurs when a form is submitted
• Syntax
  (HTML) <element onsubmit="myScript">
(JS) object.onsubmit = function(){myScript};
  (JS addEventListener() method) object.addEventListener("submit", myScript);
• Example

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form>

• (Calls a function when a form is submitted)

Question 8

variable

Answer 8

• a container
• Common to every scripting and programming language
• data can be stored here and retrieved later

Question 9

“strongly typed” variables

Answer 9

• in most programming languages
• must declare the particular data type they may contain
• JS variables are not in this category

Question 10

“loosely typed” variables

Answer 10

• JS variables are in this category
• may contain any type of data
• much easier to use than “strongly typed” variables

Question 11

variable name

Answer 11

• an alias for the value it contains
• Used in script
• references its stored value
• to ease script understanding, choose meaningful ones

Question 12

variable data types, data descriptions, and data examples

Answer 12

1. string
   * a string of text characters
   * Ex. ‘Hello World!’
2. number
   * an integer or floating-point number
   * Ex. 3.142
3. Boolean
   * A true (1) or false (0) value
   * Ex. true
4. object
   * a user-defined or built-in object
   * Ex. console
5. function symbol
   * a user-defined function, a built-in function, or an object method
   * Ex. log( )
6. symbol
   * a unique property identifier
   * Ex. Symbol( )
7. null
   * absolutely nothing (not even zero)
   * Ex. null
8. undefined
   * a non-configured property
   * Ex. undefined

Question 13

declaring JS variables

Answer 13

• begin with keywords:
  1. “let”-can be reassigned new values as script proceeds
• this declaration may create a variable with a value to be assigned later
• this declaration may include an instant value assignation (“initialized”)
• subsequent assignation of different data types later in the script can be made
  2. “const”- (constant) does not allow values to be reassigned
  3. “var”- (best avoided-deprecated?) Does not prevent same variable being declared again in the same context
• current variable type can be revealed using “typeof.”

Question 14

The concatenation “ + “ operator

Answer 14

• used in these examples to output a combined text string
• “typeof” keyword reveals current variable type
• Ex.
  console.log( ‘firstName: ‘ + typeof firstName )
  console.log( ‘valueOfPi: ‘ + valueOfPi )
  console.log( ‘isValid: ‘ + isValid )

Question 15

known error in JS regarding null

Answer 15

• variable assigned a null value is described as an object type
• (variable with a null value should be described as a null type?)

Question 16

Function Expression

Answer 16

• 1 or more statements grouped together in curly brackets { } for execution
• Returns a final single value
• May be called as required by a script to execute their statements

Question 17

JS Methods

Answer 17

• functions that belong to an object
• Ex. console.log()
• This ownership including a name differentiates them from built-in and user-defined functions
• (both have trailing parentheses that may accept “argument” values)

Question 18

JS Function Parameters

Answer 18

• must normally match the number of function arguments
• Specified within the parentheses of the function block declaration
• Ex. (user-defined function requiring exactly one argument)
  Function function-name (parameter) {
  // Statements to be executed go here.
  }

Question 19

JS Function Etc.

Answer 19

• Function declaration preferred format: opening brace placed on the same line as the function keyword
• Multiple parameters specified as comma-separated list
• Optionally, specify a default value when function call doesn’t pass argument
  Ex. function function-name (parameter, parameter = value) { // statements to be executed go here.
  }
• The default value will be used as an argument value when an insufficient number of values is passed by the caller
• A statement can assign a function to a variable by specifying just the function name (i.e. without the ( ) operator).

Question 20

Parameter Names

Answer 20

• choose following same naming conventions as for variable names
• Can be used within the function to reference the argument values past from the paratheses of the function call