An Introduction to Javascript

Created in the 1990's by Mosaic
- ECMA (European Computer Manufactures Association) specifies the standard.
- ECMAScript - the standard.
Used by as high as 98% of web sites as client side programming language. Reference.
Supported by nearly all, if not all browsers.
The language supports
- just in time compiling
- dynamic typing
- event driven programming
Strange things to c++ programmers:
- dynamic typing
- shallow copies
- arrow functions
- no i/o
- ted to browsers but with NodeJS it can move to a runtime environment.
This is a client side programming language
- The browser downloads and parses/compiles the code
- It then runs on an "engine" inside of the browser.
- Therefore it is running on the client's computer.
- For that reason, reading and writing files on the local machine is not directly supported.
By default JavaScript allows some less than desired behavior
- You can read about it here if you wish.
- The biggest is allowing non-declared variables.
- To eliminate this, at the top of every file put
- ```
"use strict"
```
- This places the compiler in strict mode.
Variables
- In strict mode, all variables must be declared before they are used.
- Two types
  - var identifier [ = value]
    - This declares variables in the global scope
    - This is not the preferred method
  - let identifier [ = value]
    - Declares variables within the block scope.
    - {}
    - This is preferable.
- We are working in an event driven paradigm
  - This means we will not always have control over the calling of our functions.
  - The environment may do this for us.
  - Which means we might not have control over our parameter lists.
  - So we will use global variables.
  - Don't go nuts.
A side note on Event Driven
- Your typical program in our sequence is
  - Note in this case the program is "driving" the action.
  - Input is performed at the programs discression.
- In event driven programming this is reversed
  - An event is anything that can happen
    - A keypress, mouse press, mouse movement
    - Data arriving in a queue
    - An internally generated event
    - When the program encounters an event it calls a function called an event handler which deals with the event.
  - The program, perhaps through a library keeps a queue of these events
    - Called an event queue
  - The main program is then usually
```
Set up the event handlers for the events the program is dealing with
while not done
   if events.size() > 0
       currentEvent = events.dequeue()
       call the appropriate event handler for currentEvent
   else
       call the idle event handler
```
Constants
- const identifier = value;
Data types
- Reference
- Strings, boolean, numbers
- null, undefined
- Objects
console.log()
- Takes one or more javascript objects.
Using scripts
- embedded in html
  - Between the script tags in html.
  - ```
  <script>
  let x = 7
  console.log(x)
  </script>
              
```
- These are executed as they are read in.
- Tend to make the html file big
- Hard to reuse code.
- In a file
  - Place the javascript code in a file (most likely .js)
  - Include the script in the html file with script tags.
  - You need to use the src= attribute.
  - You still need the end tag (</script>)
  - ```
  <head>
  <script src="myfile.js"> </script> 
  <script src="https://mirkwood.cs.edinboro.edu/~bennett/myScript.js"> </script>
              
```
- If you use the defer attribute, parsing and execution will only occur after the document is parsed.
  - This is useful if your document produces elements that your script wants to access.
  - But this only works when using a src= tag, it will not work for inline scripts.
Interacting with the document in javascript.
- There are many methods for interacting with the document.
- The easiest is document.getElementById(string)
- reference.
- Where id="unique-id" is an attribute of an element in the document.
- This gives you direct access to this element
- You can
```
let myDiv = document.getElementById("theDiv")
console.dir(myDiv)
        
```