Intermediate Javascript

Interacting with HTML

Setup

You Will Need:

  • A (good, free) Text Editor
    • Atom
    • Sublime Text
  • A (good, free) Browser
    • Google Chrome
    • Firefox

Download these now, we'll make sure everyone is ready to start!

Setup

Download the Course Materials

https://github.com/GalvanizeOpenSource/Learn-To-Code-JQuery-DOM

Download the files and extract them

Open the entire folder in your text editor

Objectives

  1. Use JavaScript to connect HTML and Code
  2. Use jQuery
  3. Make an awesome page!

You'll revisit these!

JavaScript + HTML

like peanut butter and chocolate

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>All About Bears</title>
  <style type="text/css">
   h1 {
     color: blue;
   }
  #mainpicture {
    border: 1px solid black;
  }
  .bearname {
    font-weight: bold;
  }
  </style>
 </head>
 <body>
  <h1>BEARS!</h1>
  <img id="mainpicture" src="http://placebear.com/200/300">
  <p>The No. 1 Threat To America</p>
  <ul>
   <li class="bearname">Smokey</li>
   <li class="bearname">Teddy</li>
  </ul>
 </body>
</html>

JavaScript + HTML

<h1>BEARS!</h1>
<img id="mainpicture" src="http://placebear.com/200/300">
<p>The No. 1 Threat To America</p>
<ul>
  <li class="bearname">Smokey</li>
  <li class="bearname">Teddy</li>
</ul>

+ javascript

<script>

document.body.innerHTML += "Bears are great!"

</script>

This is how we put JavaScript on the page

Objectives

  1. Connect Javascript to HTML
  2. Use jQuery
  3. Make an awesome page!

Try It!

Open your index.html page

Add a <script> tag

Use

 

 

 to append your name to the page

document.body.innerHTML += "Your Name"
$('body').append("I don't think you realize how awesome bears are");
$('body').append("<br>they're <em>really</em> awesome.");

jQuery : Even Easier

jQuery : Targeting Elements

jQuery : Adding Events

jQuery : So Much More

http://api.jquery.com/

Adding jQuery

<h1>BEARS!</h1>
<img id="mainpicture" src="http://placebear.com/200/300">
<p>The No. 1 Threat To America</p>
<button id="newbear">New Bear</button>
<ul>
  <li class="bearname">Smokey</li>
  <li class="bearname">Teddy</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
    $('body').append("jQuery Works!");
</script>

A Link to jQuery

Your Code

Objectives

Time for a CFU!

  1. Connect Javascript to HTML
  2. Use jQuery
  3. Make an awesome page!

Try It!

Add jQuery to your page

Complete the first few steps of the exercise repository!

Make an Awesome Page

We're going to make a dynamic list!

Objectives

  1. Use JavaScript to connect HTML and Code
  2. Use jQuery
  3. Make an awesome page!

Next Steps:

Practice Practice Practice!

galvanize.com/workshops

Take a longer class:

Learn ALL the Javascript:

Web Development Immersive