Up until now, we've worked either only with javascript, or only with html/css. What makes sites so powerful is that we can combine the two!
Javascript, like CSS can live either inside our <body>, inside our <head>, or in a separate file with a .js file extension. For our purposes, we're going to use that separate file (so nicely provided for us by codepen).
However, before we move on too much further, let's see what code inside the <body> and <head> looks like:
<head>Just like how we put css in our header, we can also put javascript there, but instead of placing it inside of <style> elements, we place it inside of <script> elements! Let's take a quick look at linking up a button and a function that says hi!
x
1<html>3 <head>4 <script>5 const sayHello = function(){6 console.log('Hello friends!');7 }8 </script>9</head>1011<body>12 <button onClick='sayHello()'> Press me to say hi! </button>13</body>1415</html>In the above code, we have a basic button. That button is powered by the sayHello() function described up in the <script> element in the header. When we click the button Press me to say hi!, that triggers the function sayHello().
<body>Writing javascript in our body is also doable, but can become a bit confusing, mostly because it's scattered throughout our whole site's page. Nonetheless, sometimes you may just want to have a tiny bit of code on your page:
x
1<html>3 <head>4 </head>5 <body>6 <script>7 const sayHello = function(){8 console.log('Hello friends!');9 }10 </script>11 <button onClick='sayHello()'> Press me to say hi! </button>12 </body>1314</html>Notice that when the page renders, even though we have a lot more in our body now, we still only see the button! That's because what's inside of a script tag is not actually rendered.
Previously, we've seen how alert and confirm work. Now we're going to actually use them and understand what's actually happening!
A lot of times on your site, you'll want to ask a user something. For now, let's just look at a yes or no:
xxxxxxxxxx151<html>3 <head>4 <script>5 const sayHello = function(){6 confirm('Hello friend! How are you?');7 }8 </script>9</head>1011<body>12 <button onClick='sayHello()'> Press me to say hi! </button>13</body>1415</html>
You've seen this kind of popup before. But what we haven't talked about before is what that confirm is returning. Remember how we could return values from our javascript functions? Guess what! confirm is returning something too!
x
1<html>3 <head>4 <script>5 const sayHello = function(){6 var confirmResponse = confirm('Hello friend! How are you?');7 8 console.log('Confirm response is: ', confirmResponse)9 }10 </script>11</head>1213<body>14 <button onClick='sayHello()'> Press me to say hi! </button>15</body>1617</html>Notice that the confirm returns either true or false! We can take that data, and use it with conditionals!
x
1<html>3 <head>4 <script>5 const sayHello = function(){6 var confirmResponse = confirm('Hello friend! How are you?');7 8 // we could write "confirmResponse === true" but since it's already 9 // either true or false, we can just leave it as "confirmResponse"10 if (confirmResponse) { 11 alert('You pressed ok!')12 } else {13 alert('You pressed cancel!')14 }15 16 console.log('Confirm response is: ', confirmResponse)17 }18 </script>19 </head>2021 <body>22 <button onClick='sayHello()'> Press me to say hi! </button>23 </body>2425</html>
There are a number of ways to take in user data. Let's look at how to take in string data. Prompt prompts the user to enter something into a text field:
x
1<html>3 <head>4 <script>5 const sayHello = function(){6 var promptResponse = prompt("Hi there! What's your name?", 7 "Write some cool name here!");89 alert("Hi there " + promptResponse + ", pleased to meet you!")10 console.log("prompt response = " + promptResponse)11 }12 </script>13 </head>1415 <body>16 <button onClick='sayHello()'> Press me to say hi! </button>17 </body>1819</html>
Sometimes you'll want to write something to the page. Javascript comes with a lot of built in functions! By using the built in function document.write(), we can actually use javascript to write something to our page! document.write() works a lot like console.log(), where whatever you put in the parentheses is what gets displayed, but this time, it'll get displayed on our page! Let's try it out:
xxxxxxxxxx121<html>3 <head>4 </head>5 <body>6 <p> I'm just some boring text that was written to the page with HTML</p>7 <script>8 document.write('I am a string, and I was written to the page with javascript!')9 </script>10 </body>1112</html>This is great because it will allow us to use javascript to write things to our page! We can also use elements within our document.write. By writing our elements in the function, we can use the power of HTML along with our javascript:
xxxxxxxxxx121<html>3 <head>4 </head>5 <body>6 <p> I'm just some boring text </p>7 <script>8 document.write('I am a <em> surprisingly </em> <strong> BOLD </strong> string!')9 </script>10 </body>1112</html>
Since we've already covered functions, you're probably wondering "what if we put that document.write inside of a function?" That's a great question, could we use a function?
xxxxxxxxxx171<html>3 <head>4 </head>5 <body>6 <p>7 Oh man, we've got a ton of cool code coming up! There's so much cool stuff out there that we'll get to learn! 8 </p>9 <script>10 const sayHelloOnThePage = function(){11 document.write("Hello friends! (Where'd all that other text go?)");12 }13 </script>14 <button onClick='sayHelloOnThePage()'> Press me to say hi! </button>15 </body>1617</html>You bet your bottom dollar we can! But what happened to our button and all of our text?! document.write is a very useful function for a lot of reasons, but, you should most definitely avoid trying to use it to write things to your page after your page has loaded because it ultimately rewrites the whole page! We'll get to how to do that a little bit later. For now, though, document.write is something that could be very useful to display a time, or a number of page visits, or any number of things when the page is first loading!