<commit_before><!doctype html>
<html>
  <head>
    <title>Girl Develop It</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/css/reveal.css">
    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/css/theme/gdilight.css" id="theme">

    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/lib/css/light.css">

    <!-- If use the PDF print sheet so students can print slides-->
    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/css/print/pdf.css" type="text/css" media="print">
    <!--[if lt IE 9]>
    <script src="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>JavaScript 101</h1>
          <p><strong>Part 3</strong><br>Objects</p>
        </section>

        <section>
          <h3>What are objects?</h3>
          <p>Objects allow us to describe an entity that has a complex structure, and more closely resembles something that exist in the real world.</p>
          <p>Arrays and functions are both special types of objects in Javascript. We can also define our own objects to represent complex data structures.</p>
        </section>
        <section>
          <h3>What are object attributes?</h3>
          <p>Javascript objects have attributes - called 'properties', and things they can do - called 'methods'. For example, we can create an object that represents a dog in Javascript. It could have properties like 'colour' and 'breed', and methods like 'bark' and 'chaseCat'.</p>
        </section>

        <section>
          <img src="https://s3-us-west-2.amazonaws.com/gifgifgiffy/annoyed/wat.jpg" alt="WAT">
        </section>

        <section>
          <h3>Object syntax</h3>
          <p>Objects are a data type that let us store a collection of properties and methods.</p>
          <pre><code class="javascript">var objectName = {
  propertyName: propertyValue,
  propertyName: propertyValue,
};</code></pre>
        </section>

        <section>
          <h3>A real, actual example</h3>

          <pre><code class="javascript">var aboutMe = {
  hometown: "Pasadena, CA",
  hair: "brown"
};</code></pre>

          <pre><code class="javascript">var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, year: 1994}
};</code></pre>
        </section>

        <section>
          <h3>Accessing objects: two ways</h3>
          <p>Access properties using "dot notation":</p>
          <pre><code class="javascript">var aboutMe = {
  hometown: "Pasadena, CA",
  hair: "brown"
};

var myHometown = aboutMe.hometown;</code></pre>

          <p>Or using "bracket notation" (like arrays):</p>
          <pre><code class="javascript">var myHair = aboutMe["hair"];</code></pre>

          <p><strong>Important!</strong> Non-existent properties will return undefined:</p>
          <pre><code class="javascript">var myGender = aboutMe["gender"];</code></pre>
        </section>

        <section>
          <h3>Changing objects</h3>
          <p>Use dot or bracket notation with the assignment operator to change objects.</p>
        </section>

        <section>
          <h3>Changing properties</h3>
          <p>Change existing properties:</p>
          <pre><code class="javascript">var aboutMe = {
  hometown: "Pasadena, CA",
  hair: "brown"
};
aboutMe.hair = "blue";</code></pre>
        </section>

        <section>
          <h3>Adding properties</h3>
          <p>Or add new properties:</p>
          <pre><code class="javascript">aboutMe.gender = "female";</code></pre>
        </section>

        <section>
          <h3>Deleting properties</h3>
          <p>You can also delete properties:</p>
          <pre><code class="javascript">delete aboutMe.gender;</code></pre>
        </section>

        <section>
          <h3>Arrays of objects</h3>
          <p>Since arrays can hold any data type, they can also hold objects:</p>

          <pre><code class="javascript">var myCats = [
  {name: "Lizzie", age: 18},
  {name: "Daemon", age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  console.log(myCat.name + ' is ' + myCat.age + ' years old.');
}</code></pre>
        </section>

        <section>
          <h3>Objects as arguments</h3>
          <p>Just like other data types, objects can be passed into functions:</p>
          <pre><code class="javascript">var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, year: 1994}
}

function describeCat(cat) {
  console.log("This cat is " + cat.age + " years old with " + cat.furColor + " fur.");
}

describeCat(lizzieTheCat);</code></pre>
        </section>

        <section>
          <h1>Exercise!</h1>
          <h2><a href="../exercises/class3_objects.html">Objects</a></h2>
          <p>If you get stuck, raise your hand.</p>
        </section>

      </div><commit_msg>slides done - needs homework<commit_after><!doctype html>
<html>
  <head>
    <title>Girl Develop It</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/css/reveal.css">
    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/css/theme/gdilight.css" id="theme">

    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/lib/css/light.css">

    <!-- If use the PDF print sheet so students can print slides-->
    <link rel="stylesheet" href="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/css/print/pdf.css" type="text/css" media="print">
    <!--[if lt IE 9]>
    <script src="https://s3.amazonaws.com/gdichicago-cdn/reveal.js/lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>
          <h1>JavaScript 101</h1>
          <p><strong>Part 3</strong><br>Objects</p>
        </section>

        <section>
          <h3>What are objects?</h3>
          <p>Objects allow us to describe an entity that has a complex structure, and more closely resembles something that exist in the real world.</p>
          <p>Arrays and functions are both special types of objects in Javascript. We can also define our own objects to represent complex data structures.</p>
        </section>
        <section>
          <h3>What are object attributes?</h3>
          <p>Javascript objects have attributes - called 'properties', and things they can do - called 'methods'. For example, we can create an object that represents a dog in Javascript. It could have properties like 'colour' and 'breed', and methods like 'bark' and 'chaseCat'.</p>
        </section>

        <section>
          <img src="https://s3-us-west-2.amazonaws.com/gifgifgiffy/annoyed/wat.jpg" alt="WAT">
        </section>

        <section>
          <h3>Object syntax</h3>
          <p>Objects are a data type that let us store a collection of properties and methods.</p>
          <pre><code class="javascript">var objectName = {
  propertyName: propertyValue,
  propertyName: propertyValue,
};</code></pre>
        </section>

        <section>
          <h3>A real, actual example</h3>

          <pre><code class="javascript">var aboutMe = {
  hometown: "Pasadena, CA",
  hair: "brown"
};</code></pre>

          <pre><code class="javascript">var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, year: 1994}
};</code></pre>
        </section>

        <section>
          <h3>Accessing objects: two ways</h3>
          <p>Access properties using "dot notation":</p>
          <pre><code class="javascript">var aboutMe = {
  hometown: "Pasadena, CA",
  hair: "brown"
};

var myHometown = aboutMe.hometown;</code></pre>

          <p>Or using "bracket notation" (like arrays):</p>
          <pre><code class="javascript">var myHair = aboutMe["hair"];</code></pre>

          <p><strong>Important!</strong> Non-existent properties will return undefined:</p>
          <pre><code class="javascript">var myGender = aboutMe["gender"];</code></pre>
        </section>

        <section>
          <h3>Changing objects</h3>
          <p>Use dot or bracket notation with the assignment operator to change objects.</p>
        </section>

        <section>
          <h3>Changing properties</h3>
          <p>Change existing properties:</p>
          <pre><code class="javascript">var aboutMe = {
  hometown: "Pasadena, CA",
  hair: "brown"
};
aboutMe.hair = "blue";</code></pre>
        </section>

        <section>
          <h3>Adding properties</h3>
          <p>Or add new properties:</p>
          <pre><code class="javascript">aboutMe.gender = "female";</code></pre>
        </section>

        <section>
          <h3>Deleting properties</h3>
          <p>You can also delete properties:</p>
          <pre><code class="javascript">delete aboutMe.gender;</code></pre>
        </section>

        <section>
          <h3>Arrays of objects</h3>
          <p>Since arrays can hold any data type, they can also hold objects:</p>

          <pre><code class="javascript">var myCats = [
  {name: "Lizzie", age: 18},
  {name: "Daemon", age: 1}
];

for (var i = 0; i < myCats.length; i++) {
  var myCat = myCats[i];
  console.log(myCat.name + ' is ' + myCat.age + ' years old.');
}</code></pre>
        </section>

        <section>
          <h3>Objects as arguments</h3>
          <p>Just like other data types, objects can be passed into functions:</p>
          <pre><code class="javascript">var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {"month": 7, "day": 17, year: 1994}
}

function describeCat(cat) {
  console.log("This cat is " + cat.age + " years old with " + cat.furColor + " fur.");
}

describeCat(lizzieTheCat);</code></pre>
        </section>

        <section>
          <h1>Exercise!</h1>
          <h2><a href="../exercises/class3_objects.html">Objects</a></h2>
          <p>If you get stuck, raise your hand.</p>
        </section>

        <section>
          <h3>Object methods</h3>
          <p>Object properties can also be functions. Object functions are called "methods".</p>

          <pre><code class="javascript">var lizzieTheCat = {
  age: 18,
  furColor: 'grey',
  meow: function() {
    console.log('meowww');
  },
  eat: function(food) {
    console.log('Yum, I love ' + food);
  },
  sleep: function(numMinutes) {
    for (var i = 0; i < numMinutes; i++) {
      console.log('z');
    }
  }
};</code></pre>
        </section>

        <section>
          <h3>Object methods</h3>
          <p>Call object methods using dot notation:</p>
          <pre><code class="javascript">lizzieTheCat.meow();
lizzieTheCat.eat('brown mushy stuff');
lizzieTheCat.sleep(10);</code></pre>
        </section>

        <section>
          <h3>Built-in objects</h3>
          <p>JS provides several built-in objects:</p>
          <ul>
            <li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array">Array</a></code></li>
            <li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code></li>
            <li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number">Number</a></code></li>
            <li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">String</a></code></li>
            <li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></code></li>
            <li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date">Date</a></code></li>
            <li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math">Math</a></code></li>
</ul>
        </section>

        <section>
            <h3>Getting help</h3>
            <p>Google for questions or check <a href="http://stackoverflow.com">Stack Overflow</a>. Also look on the <a href="https://developer.mozilla.org/en/JavaScript/Guide">Mozilla Developer Network</a>.</p>
            <p>Before you share your problematic code, post it to <code>jsbin.com</code></p>
          </section>

          <section>
            <h1>Homework</h1>
            <h2><a href="">tbd</a></h2>
            <p>If you get stuck between now and next class, put your code on <a href="http://jsbin.com">JSBin.com</a> and email it to your instructor.</p>
          </section>

      </div>
{'fraction_non_alphanumeric': 0.16647191711459064, 'fraction_numerical': 0.011451273662070577, 'mean_word_length': 2.6774563162417646, 'pattern_counts': {'":': 10, '<': 418, '<?xml version=': 0, '>': 415, 'https://': 20, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3348831', 'n_tokens_mistral': 4256, 'n_tokens_neox': 4041, 'n_words': 980}