@shesharpgr

/shesharpgr

shesharp.org

Flashback

19/12/2015 Hour of Code - JS Basics

Introduction to

Web Development

Part 2: JavaScript

https://github.com/SheSharpGr/intro-to-webdev-part2

Previously...

Hyper Text Markup Language

<!DOCTYPE html>
<html>
    <head>
        <title>Intro to Web Dev</title>
    </head>
    <body>
        <h1>Introduction to Web Development</h1>
        <h2>Part 2<sup>nd</sup>: Javascript</h2>
        <p>In this workshop we'll cover the following topics:</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li><strong>Javascript</strong></li>
        </ul>
    </body>
</html>

Document Object Model

Cascading Style Sheets

body {
    margin: 0;
    padding: 0;
    background-color: #556270;
    color: white;
    text-align: center;
}

h1 {
    color: #4ecdc4;
}

h2 {
    color: #ff6b6b;
}

Exercise 1

Content

Layout

Programming

World Wide Web

JavaScript is...

...a Programming Language!

JavaScript can...

Change HTML Content
Change HTML Attributes
Change CSS
Validate Data
...
~~Solve all the problems of the world~~

JavaScript & HTML

1. Using the <script> tag


<!DOCTYPE html>
<html>
    <head>
        <title>Intro to Web Dev</title>        
    </head>
    <body>
        <h1>Introduction to Web Development</h1>
        <h2>Part 2<sup>nd</sup>: Javascript</h2>
        <p id="welcome"> 
        </p>
        <p>In this workshop we'll cover the following topics:</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li><strong>Javascript</strong></li>
        </ul>
        <script>
            document.getElementById("welcome").innerHTML = "Hello World!";
        </script> 
    </body>
</html>

JavaScript & HTML

2. External


<!DOCTYPE html>
<html>
    <head>
        <title>Intro to Web Dev</title> 
        <script src="helloWorld.js">
        </script>       
    </head>
    <body>
        <h1>Introduction to Web Development</h1>
        <h2>Part 2<sup>nd</sup>: Javascript</h2>
        <p id="welcome"> 
        </p>
        <p>In this workshop we'll cover the following topics:</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li><strong>Javascript</strong></li>
        </ul>        
    </body>
</html>