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
Download the files and extract them
Open the entire folder in your text editor
Objectives
- Use JavaScript to connect HTML and Code
- Use jQuery
- 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
- Connect Javascript to HTML
- Use jQuery
- 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
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!
- Connect Javascript to HTML
- Use jQuery
- 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
- Use JavaScript to connect HTML and Code
- Use jQuery
- Make an awesome page!
Next Steps:
Practice Practice Practice!
Take a longer class:
Learn ALL the Javascript:
LTC - Intermediate JS
By LizTheDeveloper
