index.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=1024"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <title>JavaScript Basics</title>

  <meta name="description" content="JavaScript Basics"/>
  <meta name="author" content="Tanya Butenko"/>

  <link
      href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic"
      rel="stylesheet"/>

  <link href="css/impress-demo.css" rel="stylesheet"/>

  <link rel="shortcut icon" href="favicon.png"/>
  <link rel="apple-touch-icon" href="apple-touch-icon.png"/>

  <link rel="stylesheet" href="css/highlight/agate.css">
</head>

<body class="impress-not-supported">


<div class="fallback-message">
  <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented
    with a simplified version of this presentation.</p>

  <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b>
    browser.</p>
</div>

<div id="impress" data-transition-duration="500">

  <section id="part1">

    <article class="part1">
      <h1 class="try">Intro to JavaScript</h1>
      <p class="footnote">
      <center> Part 1 </center>
      </p>
    </article>

  </section>


  <section id="variables">

    <article class="variables">
      <h1 class="try">Variable</h1>
      <p class="footnote">
      <center>It is a place to store values</center>
      </p>
    </article>

    <article class="">
      <h1>Declaring a Variable</h1>
      <center>
        To declare (create) a variable, type the key-word "var" and the variable name
      </center>
      <script data-lang="javascript">
        var hello;
      </script>
    </article>

    <article class="">
      <h1>Initializing a Variable</h1>
      <center> To give your variable a starting value </center>
      <script data-lang="javascript">
        var animal = 'cat';
      </script>
    </article>

    <article class="">
      <h1>Using a Variable</h1>
      <center>Once you have created a variable, you can use it in your code. Just type the name of the variable.</center>
      <script data-lang="javascript">
        var greeting = 'Hello Node Girls!';
      </script>
      <script data-lang="javascript">
        console.log(greeting);
      </script>
    </article>

    <article class="">
      <h1>Naming Variables</h1>
      <ul>
        <li>The variable name is case-sensitive.</li>
        <li>A new variable needs to have a unique name</li>
        <li>It need to start with either letter, $, or _.</li>
        <li>It can only be made of letters, numbers, $, or _.</li>
      </ul>
    </article>

    <article class="">
      <h1>Variables Values</h1>
      <ul>
        <li>Variables can hold different types of information, like strings, numbers, booleans etc.</li>
        <li>The value of a variable can change over time.</li>
      </ul>
    </article>

    <article class="">
      <h1>String</h1>
      <center>It is a group of characters, words, phrases. You put your string in quotes.</center>
      <script data-lang="javascript">
        var phrase = "I'm a string!";
      </script>
    </article>

    <article class="">
      <h1>Number</h1>
      <ul>
        <li>Can be either integer or float (decimal).</li>
        <script data-lang="javascript">
          var ourFirstNumber = 10;
        </script>
        <li>Also we can do math with numbers using Arithmetical Operators (+, -, /, * etc)</li>
        <script data-lang="javascript">
          var summ = 2 + 3;
        </script>
      </ul>
    </article>

    <article class="">
      <h1>Boolean</h1>
      <center>It is a True or False value</center>
      <script data-lang="javascript">
        var isGrassGreen = true;
      </script>
    </article>

  </section>


  <section id="comments">

    <article class="comments">
      <h1 class="try">Comments</h1>
      <p class="footnote">
      <center>You can leave notes in your program that people can read and computers will ignore.</center>
      </p>
      <script data-lang="javascript">
        /* I'm
  a multi-line comment
*/
      </script>
      <script data-lang="javascript">
        var food;//Inline comment
      </script>
    </article>

    <article class="">
      <h1>Getting Results</h1>
      <center>Open a pop-up box</center>
      <script data-lang="javascript">
          alert('Hello World!');
      </script>
      <center>Display a message in your console</center>
      <script data-lang="javascript">
        console.log('Hi girls.');
      </script>
    </article>

  </section>


  <section id="function">

    <article class="function">
      <h1>Function</h1>
      <center>It is a separable, reusable piece of code that takes some input (argument) do some changes to it and return result.</center>
    </article>

    <article class="">
      <h1>Declare a Function</h1>
      <center>Create a function in other words</center>
      <script data-lang="javascript">
        function alertHello(){
  alert('Hello again!')
};
      </script>
    </article>

    <article class="">
      <h1>Call a Function</h1>
      <script data-lang="javascript">
        alertHello();
      </script>
    </article>

    <article class="">
      <h1>Arguments</h1>
      <center>Function can accept input values, called arguments</center>
      <script data-lang="javascript">
        function whatIsYourName(name){
    console.log('My name is ' + name);
};
whatIsYourName('Tanya');
//output - 'My name is Tanya'
      </script>
    </article>

    <article class="">
      <h1>Returning Values</h1>
      <center>You can make function return value that you can use later</center>
      <script data-lang="javascript">
        function square(num){
    return num * num;
};
var squareOfFive = square(5);
//squareOfFive will be equal to 25
      </script>
      <center>Return will end a function</center>
    </article>

    <article class="">
      <h1>Scope</h1>
      <center>Global scope</center>
      <center>Local scope</center>
    </article>

  </section>


  <section id="if-else">

    <article class="if-else">
      <h1>If/else Statements</h1>
    </article>

    <article class="">
      <h1>The 'if' Statement</h1>
      <center>Use if to decide which lines of code to execute, based on a condition</center>
      <script data-lang="javascript">
        if (condition) {
  // statements to execute
}
      </script>
      <script data-lang="javascript">
        var bananas = 5;
if (bananas > 0) {
   console.log ('You have some bananas!');
}
      </script>
    </article>

    <article class="">
      <h1>Comparison Operators</h1>
      <script data-lang="javascript">
        a == b       a === b
a != b       a !== b
a < b
a > b
a <= b
a => b
      </script>
      <center>Watch out '=' and '==' are different!</center>
    </article>

    <article class="">
      <h1>The 'if/else' Statement</h1>
      <center>Use else to provide an alternate set of instructions</center>
      <script data-lang="javascript">
        var num = 5;
if (num > 5) {
  console.log ('Num is bigger then 5');
} else {
  console.log('Num is smaller then 5');
}
      </script>
    </article>

    <article class="">
      <h1>The 'if/else if/else' Statement</h1>
      <center>If you have multiple conditions, you can use 'else if'</center>
      <script data-lang="javascript">
        var num = 5;
if (num > 5) {
  console.log ('Num is bigger then 5');
} else if (num < 5) {
  console.log('Num is smaller then 5');
} else {
  console.log('Num is equal to 5');
}
      </script>
    </article>

    <article class="">
      <h1>Logical Operators</h1>
      <center>If you have multiple conditions, you can use 'else if'</center>
      <script data-lang="javascript">
        Example  Name  Result
------------------------------------
a && b   AND   TRUE if a and b true
a || b   OR    TRUE if a or b true
!a       NOT   TRUE if a is not true
      </script>
    </article>

    <article class="">
      <h1>Using Logical Operators</h1>
      <center>You can use these operators to combine conditions</center>
      <script data-lang="javascript">
        var bananas = 5;
if (bananas >=2 && bananas <7) {
  console.log ('You have a reasonable number of bananas');
} else {
  console.log ('Check your banana supply');
}
      </script>
    </article>

  </section>


  <section id="coding">
    <article class="coding">
      <h1>Coding Time</h1>
    </article>
  </section>


  <section id="part2">

    <article class="part2">
      <h1 class="try">Intro to JavaScript</h1>
      <p class="footnote">
      <center> Part 2 </center>
      </p>
    </article>

  </section>


  <section id="arrays">

    <article class="arrays">
      <h1 class="try">Arrays</h1>
      <p class="footnote">
      <center> It is ordered lists of values </center>
      </p>
    </article>

    <article class="">
      <h1>Creating Arrays</h1>
      <script data-lang="javascript">
        var arrayName = [element1, element2,...];
      </script>
      <center>You can put different types of data into an array</center>
      <script data-lang="javascript">
        var myFavoriteThings = ['Watermelon', 42, 'Belgium'];
var lotteryNumbers = [30, 65, 93, 4];
      </script>
    </article>

    <article class="">
      <h1>Array Length</h1>
      <center>The length property tells you how many things are in an array</center>
      <script data-lang="javascript">
        var rainbowColors = ['Red', 'Green', 'Blue',
'Yellow', 'Orange', 'Indigo', 'Violet'];
console.log(rainbowColors.length);
      </script>
    </article>

    <article class="">
      <h1>Using Arrays</h1>
      <center>You can access items with "bracket notation" by using the position of the element you want </center>
      <script data-lang="javascript">
        var rainbowColors = ['Red', 'Green', 'Blue',
'Yellow', 'Orange', 'Indigo', 'Violet'];
var firstColor = rainbowColors[0];
var lastColor = rainbowColors[6];
      </script>
      <center>Important! Programmers start counting at zero.</center>
    </article>

    <article class="">
      <h1>Changing Arrays</h1>
      <center>You can use bracket notation to change an item in an array </center>
      <script data-lang="javascript">
        var myFavoriteThings = ['Watermelon', 42, 'Belgium'];
myFavoriteThings[0] = 'Cherries';
console.log(myFavoriteThings);
//What is logged to the console?
      </script>
    </article>

    <article class="">
      <h1>Expanding Arrays</h1>
      <center>Arrays do not have a fixed length. You can use "push" to add something to an array </center>
      <script data-lang="javascript">
        var myFavoriteThings = ['Watermelon', 42, 'Belgium'];
myFavoriteThings.push('Sci-fi');
console.log(myFavoriteThings);
//What is logged to the console?
      </script>
    </article>

  </section>


  <section id="loops">
    <article class="loops">
      <h1 class="try">Loops</h1>
      <p class="footnote">
      <center> We need loops when we want to repeat some action over and over again </center>
      </p>
    </article>

    <article class="">
      <h1>While Loops</h1>
      <center>'While' will repeat the same code over and over until some condition is met </center>
      <script data-lang="javascript">
        var bottlesOfBeer = 99;
while (bottlesOfBeer >= 1) {
  console.log (bottlesOfBeer + ' bottles of beer on the wall');
  bottlesOfBeer = bottlesOfBeer - 9;
}
      </script>
    </article>

    <article class="">
      <h1>Infinite Loops</h1>
      <center>Make sure something changes in the loop and you have a condition, or your loop will go on forever... </center>
    </article>

    <article class="">
      <h1>For Loops</h1>
      <center>'For' loops are very similar, but you declare a counter in the statement </center>
      <script data-lang="javascript">
for (var i = 1; i <= 10; i++) {
  console.log (i);
} //will count 1 to 10
      </script>
    </article>

    <article class="">
      <h1>Iterating Through Arrays</h1>
      <center>Use a for loop to easily process each item in an array </center>
      <script data-lang="javascript">
        var rainbowColors = ['Red', 'Orange', 'Yellow',
'Green', 'Blue', 'Indigo', 'Violet'];
for (var i = 0; i < rainbowColors.length; i++) {
  console.log(rainbowColors[i]);
}
      </script>
    </article>

    <article class="">
      <h1>Break</h1>
      <center>To exit a loop, use the break statement </center>
      <script data-lang="javascript">
for (var i = 100; i <= 200; i++) {
  console.log('Testing ' + i);
  //Stop at the first multiple of 7
  if (i % 7 == 0) {
     console.log('Found it! ' + i);
     break;
  }
} //Count from 100 to 200
      </script>
    </article>

  </section>


  <section id="html">
    <article class="html">
      <h1 class="try">HTML</h1>
      <p class="footnote">
      <center> Hyper Text Markup Language. It is a structure of the elements on the page. </center>
      </p>
      <script data-lang="html">
        <!DOCTYPE html>
<html>
  <head>
    <title>Calculator</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <p class="greeting">Hello World!</p>
    <p>My name is Tanya.</p>
  </body>
</html>
      </script>
    </article>
  </section>


  <section id="css">
    <article class="css">
      <h1 class="try">CSS</h1>
      <p class="footnote">
      <center>Stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen </center>
      </p>
      <script data-lang="css">
        p {
  color: green;
  font-size: 14px;
}
.greeting {
  color: red;
  font-size: 20px;
}
      </script>
    </article>
  </section>


  <section id="dom">
    <article class="dom">
      <h1 class="try">DOM</h1>
      <p class="footnote">
      <center>Stands for Document Object Model. It defines the logical structure of documents and the way a document is accessed and manipulated </center>
      </p>
    </article>

    <article class="">
      <h1>The DOM: sample model</h1>
      <img src="img/dom-structure.png" alt="" width="">
    </article>

    <article class="">
      <h1>DOM Access</h1>
      <center>To change the page</center>
      <ol>
        <li>Find the DOM element (node) and store it in a variable</li>
        <li>Use methods to manipulate the node</li>
      </ol>
    </article>

    <article class="">
      <h1>DOM Access</h1>
      <center>QuerySelector</center>
      <script data-lang="javascript">
        document.querySelector(cssQuery);
      </script>
      <center>To find:</center>
      <script data-lang="html">
        <img class="kittenPic" src="img/kitten.jpg" alt="cat"/>
      </script>
      <center>We would do:</center>
      <script data-lang="javascript">
        var imgKitten = document.querySelector('.kittenPic');
      </script>
    </article>

    <article class="">
      <h1>DOM: innerHTML</h1>
      <center>Each DOM node has an innerHTML property with the HTML of all its children. You can use the property to view or change the HTML of a node.
        For example, you can overwrite text in the particular tag:</center>
      <script data-lang="html">
        <p id="warning"></p>
      </script>
      <script data-lang="javascript">
        var warningParagraph = document.querySelector('#warning');
warningParagraph.innerHTML = 'Danger High Voltage!';
      </script>
    </article>

  </section>


  <section id="events">
    <article class="events">
      <h1 class="try">Events</h1>
      <p class="footnote">
      <center> An 'event' is a type of object that is created when the user interacts with a web page. For example, JS creates an event when a user clicks an element. </center>
      </p>
      <script data-lang="javascript">
        element.onclick = function () {
//code to execute when the click happens
};
      </script>
    </article>

    <article class="">
      <h1 class="try">Calling Functions From HTML</h1>
      <script data-lang="html">
        <button id="clickMe" onclick="sayHi()">Click Me!</button>
      </script>
      <script data-lang="javascript">
        function sayHi() {
  alert ('Hi!');
};
      </script>
    </article>

    <article class="">
      <h1 class="try">Listening Functions</h1>
      <center>First, find the object:</center>
      <script data-lang="javascript">
        var myTarget = document.querySelector('#clickMe');
      </script>
      <center>Then add an event to that object:</center>
      <script data-lang="javascript">
        myTarget.onclick = function(){
  alert ('Hi!');
};
      </script>
    </article>

    <article class="">
      <h1 class="try">Preventing Defaults</h1>
      <center>Elements like buttons and links have a default behaviors. However, the event objects has a built-in method to handle that:</center>
      <script data-lang="javascript">
        element.onclick = function (event) {
  event.preventDefault();
};
      </script>
    </article>

  </section>


  <section id="coding">
    <article class="coding">
      <h1>Coding Time</h1>
    </article>
  </section>


  <section id="overview">
    <article data-scale="15" data-x="5000" data-y="4000">
    </article>
  </section>

</div>

<ul id="nav">
</ul>

<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</body>
</html>