Let’s Write Some JavaScript Right Now!

30.05.2016 |

by Rich Armstrong


I find the best way to get started with anything is to be given a safe playground in which to play with some basic rules and then be left alone to play (with some intervention every now and then). So here goes!

Open Sublime Text 3. Create a new file. Save it as index.html. Add the following code to it, save it, and drag the file into Google Chrome:

<!doctype html>
<meta charset="UTF-8">
<title>Intro to JS with Highbrow</title>
<h1>Intro to JS with Highbrow</h1>
<p>Open the JS console: View > Developer > JavaScript Console</p>
<p>Or press Alt+Cmd+J (OS X) or Alt+Ctrl+J (Windows)</p>
<p>Have a look at what it says <span id="dynamic"></span>!</p>
  // this is a comment. Below is a variable
  var someString = 'good looking';
  document.getElementById('dynamic').innerText = someString;
  console.log('Hey there ' + someString+ '!');
  document.getElementById('dynamic').style.color = 'orangered';

When the file is open in Google Chrome, there should be some instructions on the screen. Open up the console and see what it says.

2.1 An quick introduction to JavaScript

Write Your Own Code Now!
Now try to write your own console.log statements and tinker around with the code in between the <script> and </script> tags! Save the index.html file once you’ve done some playing, and then refresh the page in Chrome.

The Console
The console is a special tool for showing information to developers. You can send messages to it with console.log('some info'); See what the console says when you try to log different things. Try numbers, pieces of text, or doing a bit of math. We’ll learn all about the different data types and what’s possible in future lessons.

See if you get any red errors appearing in the console. You can also write JavaScript in the console and get the browser to run it by pressing the return key. Try this, for example:

window.screen.availHeight or someString

2.2 An quick introduction to JavaScript

Changing HTML
We’ll get to changing HTML, changing CSS, and all that fun stuff in the next few days, but play with this in the meantime! Try writing this before the </script> tag or in the console:

document.getElementById('dynamic').style.color = 'orangered';

Remember: Download Google Chrome for Desktop and Sublime Text 3 to make the most of these lessons. And remember to open up your JavaScript Console: Alt+Cmd+J (OS X) or Alt+Ctrl+J (Windows).


Recommended book

“JavaScript and JQuery: Interactive Front-End Web Development” by Jon Duckett


Share with friends