- irina0802.github.io/day-1/
- vithyasrikumar.github.io/day-1/
- riyakoshy.github.io/day-1/
- ashabooga.github.io/day-1/
git add .git commit -m "this is a descriptive commit message"git push origin master
- Ask Google
- Ask your neighbor
- Ask Nabil or Sean
In your terminal, in your code-forward directory:
git clone https://github.com/code-forward/day-2.git
JavaScript is the programming language of the web. Although it's capable of so much more, today we'll focus on how it can be used to add interactivity to your webpages.
There are multiple ways to do this, but for now, we'll link Javascript files to our webpages by like this:
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>Hello, Gakko!</h1>
<p></p>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>This way, since <script></script> is at the bottom of the <body></body>, all the content of the webpage will be loaded before we run our JavaScript program.
Open your Chrome Developer Tools and find the Console. Run a few of these commands.
alert("NOOOOO!!!!");console.log("Hello, world!");1 + 2 + 3 + 5 + 8 + 13 + 21 + 34document.querySelector('body').textContent = "New Title";We're pretty much telling the browser, "Hey, document! Select an h1, and change its text to say 'New Title'."
See if you can change the title of the New York Times food section.
You'll need to relaunch Developer Tools for this specific webpage.
In other words, we can write CSS with JavaScript!
document.querySelector('div').style.background = "red";We're telling the browser, "Hey, document! Select a div, and change its style (its CSS) so its background property is red."
Important note: JavaScript syntax is slightly different from CSS. For example:
body { text-transform: uppercase; }
accomplishes the same thing as
document.querySelector('body').style.textTransform = "uppercase";The key difference is
text-transformin CSS vstextTransformin JS