Skip to content

Instantly share code, notes, and snippets.

@jendiamond
Last active January 16, 2016 22:15
Show Gist options
  • Select an option

  • Save jendiamond/e1159fd5347af8ba5659 to your computer and use it in GitHub Desktop.

Select an option

Save jendiamond/e1159fd5347af8ba5659 to your computer and use it in GitHub Desktop.

JavaScript Workshop Week 1

Javascript Ninja

Instructor: VJ Kim - front end html css
Francois - web design html css
Michael - service based start up html css
Jeff - PHP Dripal Twig Backbone
George - Dev Ops
Luis - CS Cal State Fullerton

Write a program that turns a thermostat up and down based on the time of day.

ECMA Script

http://ecma-international.org/ecma-262/5.1/
The ECMAScript specification is a standardized specification of a scripting language developed by Brendan Eich of Netscape; initially it was named Mocha, later LiveScript, and finally JavaScript.[3] In December 1995, Sun Microsystems and Netscape announced JavaScript in a press release.[4] In March 1996, Netscape Navigator 2.0 was released, featuring support for JavaScript.

ECMA Script 6

5 Primitives

  • string
  • int
  • float
  • objects
  • undefined

===

  • definition assignment
  • compiles in the browser
  • expression

===

when the variable is defined by var it is local otherwise it is global.

DOM - document object model - it's just html

console.log(increaseTempBtn);
console.dir(increaseTempBtn);

dot notation
object.property

anonymous function:

increaseTempBtn.onclick = function(){
      alert('hello');
    };

https://github.com/javascript/dictionary

button - control element

array - list - container

var arr = [false, '1' , 4, function(){alert('hello'); }];
console.log(arr[0]);
arr[3]();

var thermometer;
console.log(thermometer);

var thermometer = 20;
console.log(thermometer);

if(thermometer == 20) {
    console.log("It is cold in here.");
}
else {
  console.log("It is warm in here");
}

//We need a LCD panel for out thermometer
//We need a button to turn the heat up
//We need a button to turn the heat down

var buttonUp;
var buttonDown;

function increase_temperature(){
  thermometer += 1;
}

function decrease_temperature(){
  thermometer -= 1;
}
inner html - object - sets the default value when the page opens
document - object -

hello

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>
</head>

<body>
<br />
  <div id="dis[play">Temperature is:
    <span id="thermometer">20</span>
  </div>
  <button id="increaseTempB">+</button>
  <button id="decreaseTemp">-</button>
    
  <script>
  window.onload = function(){
    var display = document.getElementById('display');
    var thermometer = document.getElementById('thermometer');
    var increaseTempBtn = document.getElementById('increaseTempBtn');
    var decreaseTempBtn = document.getElementById('increaseTempBtn');
    console.log(display, thermometer, increaseTemp, decreaseTempBtn;
  };
  </script>

</body>
</html>

Temperature

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>
</head>

<body>
<br />
  <div id="display">Temperature is:
    <span id="thermometer">20</span>
  </div>
  <button id="increaseTemp">+</button>
  <button id="decreaseTemp">-</button>
  <button id="reset">Reset</button>

  <script>
    var display = document.getElementById('display');
    var thermometer = document.getElementById('thermometer');
    var increaseTempBtn = document.getElementById('increaseTemp');
    var decreaseTempBtn = document.getElementById('decreaseTemp');
    var resetBtn = document.getElementById('reset');

    console.log("Display", display, 
                "thermometer", themometer, 
                "Temperature Up", increaseTempBtn,
                "Temperature Down", decreaseTempBtn,
                "Reset", resetBtn)
    
    display.innerHTML = "50";
    var roomTemp = 72;

    function increaseTemp(){
      roomTemp += 1;
    }
    function decreaseTemp(){
      roomTemp -= 1;
    }

    increaseTempBtn.onclick = function(){
      roomTemp += 1;
      display.innerHTML = roomTemp;
    };

    decreaseTempBtn.onclick = function(){
      roomTemp -= 1;
      display.innerHTML = roomTemp;
    };

    resetBtn.onclick = function(){
      roomTemp = 72;
      display.innerHTML = roomTemp;
    }
    

  </script>

</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment