Untitled

# JAVASCRIPT
---

## elm is one of the more popular functional languages

### Three technologies add up to make a web page

* HTML (content
* CSS (presentation)
* JAVASCRIPT (behaviors)

#### Web Application Flow
<<<IMAGE>>>

#### A Simple Demo

* HTML
```HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="demo.js">
    </script>
    <script src="name.js">
    </script>
  </head>
  <body>
    <h1>Output</h1>
    <div id="output">
    </div>
    <div id ="name">

    </div>

  </body>
</html>
```
* Javascript
```Javascript
\\demo.js
document.addEventListener("DOMContentLoaded", function(event){
var outputDiv = document.getElementById('output');
var now = new Date();
outputDiv.innerHTML = "Hello World! <br/>";
outputDiv.innerHTML += "<p>"+ now + "</p>";
}
)
\\name.js
document.addEventListener("DOMContentLoaded", function(event) {
  var nameDiv = document.getElementById('name');
  nameDiv.innerHTML="Mallinath";
})

```

### Developer Console

* In javascript, numbers are always floats
* Equal statements have two forms (== and ====)
* Strings coercion when combining with numbers will have a precedence on the left operator
<<<IMAGE Strings>>>
* Strings are immutable
<<<IMAGE String Methods and Parsing>>>

### Variables in Javascript
<<<IMAGE variablesJS>>>
* null and undefined NOT the same!
<<<IMAGE ex_names_js>>>

### COMMENTS
* // -> this is a single line comment
* /* */ -> this is a multi line comment

### I/O in Javascript

* console.log("Hello");
<<<IMAGE console_in_js>>>

### Built-ins

* alert - to display a message
* confirm - before proceeding, receive confirmation
* prompt - to ask a question

<<<IMAGE - Builtins>>>

### Booleans
* true
* false
* > < == !=
<<<IMAGE True of False exercise 1 & 2>>
```Javascript
document.addEventListener("DOMContentLoaded", function(event){
var outputDiv = document.getElementById('output');
var now = new Date();
var a = 3;
var b = 4;
var result = 3*4;
var nameUser = prompt("What the hell is your name?");
var safePass = confirm("Welcome to super-safe! Are you sure you want to enter?")
if(safePass){
    if (nameUser.length > 12){
      alert("Too Long!")
    }
    else if(nameUser.length < 8) {
      alert("Too Short");
    }
    else {
      alert("Just Right");
    }
  }
  else {
    alert("Ok Thanks bye");
  }

outputDiv.innerHTML = "Hello " + nameUser + " In case you forgot,%i" + "X" + "%i is %s <br/>", a, b, result;
alert("The current date and time is " + now);
outputDiv.innerHTML += "<p>"+ now + "</p>";
})

```
### LOOPS IN JAVASCRIPT

#### WHILE LOOP
<<<IMAGE while_diff_flavors.png>>>

```Javascript
//Print Even Numbers
var i = 0;
while (i<=100){
    console.log(i+=2);
}
```