Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
112 lines (75 sloc) 4.13 KB
goals do
goal "Add a JavaScript tag to the document"
goal "Write a simple script to interact with the page"
end
steps do
step do
message "Now that we have completed the challenges for your **index.html** and related CSS files, we will be looking back at your **hello.html** file."
message "CSS lets you make your pages look good, but it's **JavaScript** that makes most web pages interactive. Pull up your **hello.html** file again. Add a `script` tag to your page so you can get started writing some JavaScript. At the very bottom of your document, under your paragraphs, add this:"
source_code :html, <<HTML
<script>
</script>
HTML
message "Save and refresh the page in the browser. It should look unchanged."
end
step do
message "Type in this short script. Javascript is case-specific (it treats `mynewname` and `myNewName` as two different things) and picky about syntax. If your script doesn't run, check carefully for typos."
source_code :html, <<HTML
<script>
function replaceName() {
var myNewName = window.prompt('Pick a new name!');
document.getElementById('user-name').innerHTML = myNewName;
}
document.onclick = replaceName;
</script>
HTML
message <<-MARKDOWN
Refresh the page, and click on one of your paragraphs. You should see a browser prompt like this:
<img src='img/prompt.png'>
Once you answer the prompt, you should see the bold text that was your name change to whatever you entered.
<img src='img/hello_omg.png'>
MARKDOWN
important "It takes years to become a Javascript expert. Don't worry if you found the last step confusing or had trouble getting your script to run. The most important thing to note is that you can put Javascript **directly** into your document if you want to, by wrapping it in a `script` tag, and use this script to add interactivity to the page."
end
end
explanation do
message <<-MARKDOWN
## Why JavaScript?
Javascript allows you to make your pages interactive. You can use it to build
anything from a simple animation to a giant web application like Twitter
or GitHub. It gives you total control to add, remove, or modify content you've
made with HTML. You can also use it to change styles and add or remove
classes.
Writing JavaScript in a web page can be tricky, because you don't start with a
blank slate. All of the contents of the web browser, including built-in browser
objects and your own HTML elements, are there too. You just have to figure out
how to get to them with JavaScript so you can manipulate them.
## What Did That Script Do?
We'll go through it line by line:
The first line declares a `function`, a bit a of reusable code you can refer
to later by calling its name:
MARKDOWN
source_code :js, "function replaceName() {"
message <<-MARKDOWN
The next two lines are the steps the function will do. The first one creates
a variable called `myNewName` and sets it equal to a value. The browser window
will try to get this value using its `prompt` method, a built-in function it
knows how to do, that involves popping up a text box for you to fill in.
MARKDOWN
source_code :js, "var myNewName = window.prompt('Pick a new name!');"
message <<-MARKDOWN
In the next line it goes into your HTML document and uses `getElementById`, a built-in function it knows to do, to locate your `user-name` span. It then sets the span's HTML contents to the value of the variable `myNewName`.
MARKDOWN
source_code :js, "document.getElementById('user-name').innerHTML = myNewName;"
message <<-MARKDOWN
The
MARKDOWN
source_code :js, "}"
message <<-MARKDOWN
closes the `replaceName` function you started defining in the first line.
The final line tells the browser, 'When I click the document, run the function called `replaceName`.
MARKDOWN
source_code :js, "document.onclick = replaceName;"
tip "Some elements of this script, like 'document.onclick' or the '.innerHTML' property, are a little out of date. They're great ways to start playing with Javascript, but when you write your own pro Javascript, you may want to use more contemporary techniques or a library like jQuery that will do these things for you in a less clunky way."
end
next_step 'jquery'
You can’t perform that action at this time.