<button onclick="alert('Hello, world!')">Click me!</span>
JavaScript (also known as Javascript, JS, js) is a programming language invented for websites and the internet.
It is a way to make your website respond to "user interactions" (in ways more than just clicking on links), and to dynamically load content - that is, update automatically without you having to change the html file
The limit is your imagination! Almost anything that your computer can do can be done with javascript.
I haven't coded these yet >.> imagine they do stuff! hehe lol
For example, you could make text rainbow or bouncy or both. You could also add a button to
You could make a counter that just keeps counting up! - 0s spent on page
You could make a calculator! x =
And there's much much much more than that, everything you've seen a website do (other than storing things to a database (eg a comment section) and flash games) can be done with JS (and CSS and HTML)! Nifty!
A program is written in a programming language, and is essentially instructions for a computer. Of course, a computer can't actually read text and it doesn't have a will to execute instructions, it's just wires and transistors changing voltage levels, but we'll break down what's actually happening in a second once we've learnt a little more about code.
Many coding books like to start of by analogising a program to a recipe, and it does make a lot of sense to! With the caveat that computers don't have any wider understanding or intuition that humans do. I think a more salient comparison is with the method of a science experiment.
There are three categories of code:
Don't worry about memorising the names of these or anything, we'll slowly work our way through them and eventually they'll become intuitive.
Identical to CSS, there are three ways to put JS on your page. Like inline style, you can put javascript as an attribute:
<button onclick="alert('Hello, world!')">Click me!</span>
Like in CSS, putting JS directly in attributes is pretty limiting, and only useful for small tests, but also sometimes for connecting HTML and JS.
You can also put JS in its own element, and unlock much more power and ease
<button id=button>Click me!</button>
<script>
var button = document.getElementById('button');
button.onclick = function() {
alert("Hello, world!");
}
</script>
<button id=button>Click me!</button>
<script src="code.js"></script>
var button = document.getElementById('button');
button.onclick = function() {
alert("Hello, world!");
}
Don't stress about the actual code, I'm just demonstrating the different ways to incorporate JS.
It'll probably be easiest if we go with the final option, so make a new file called code.js in the same folder as the html file, and edit it in your IDE (sublime).
Paste <script src="code.js"></script> into your HTML file and alert("Hello, world!"); into code.js. Now when you reload your HTML page, it should greet you with a pop-up.
Let's start by breaking down how that code "alert("Hello, world!");" works. It's meaning is pretty clear just from reading it: Alert the user with the phrase "Hello, world!" But knowing the specific syntax/grammar is very important for writing working code, if you forget the ()s or ''s for example, the code won't work at all!
The technical name for a line of code or instruction is an expression. We end each line with a semicolon ; to let the computer know when reading the code where the expression ends. This might seem a bit silly and pointless, but it allows us to put multiple expressions on one line or one expression over many lines (in certain circumstances), to fit what is easiest for humans to read. Observe:
alert(
"Hello, world!"
);
alert("Hello, world!"); alert("Goodbye, world!");
(I will use to represent loading & refreshing the page in examples)
The word "alert" in the code is the name of a function. The heart of programming is using other people's code (and reusing your own), and this is accomplished mainly through functions. To execute a function you write its name, then an open parentheses (, then the information you want it to execute based off of, then a closing parentheses ).
If I had written a function invert that inverts all the colours of the page, then to "call" this function you would simply write
invert();
, note that there's nothing inbetween the parentheses because there's no information needed to run the function.
alert is a function written by the people coding your web-browser. The information it needs to run, known more technically as its arguments, is one string, (eg "Hello, world!"), which it will show to the user.
A string is a collection of characters which the computer interprets as representing text, and not as instructions. In Javascript, and most programming languages, anything between two "quotation marks" or 'apostrophes' is interpreted as a string. There's no difference to using a " or ', other than if you want to put a " or ' inside it. Ie "boygenius' hit album" and 'They said "hello" to me' are valid strings, but 'boygenius' and "They said " are not.
Now your turn! Try code the page to tell the user that you like their hat, followed by saying goodbye. Once you're done, click the button below to compare your answer.
[reveal answer]
alert("I like your hat");
alert("Goodbye!");
Javascript is a little lenient. Like html, it tries its best to understand what you mean even if you didn't write everything perfectly. Well, it doesn't try very hard, but there are two things it does that make it easier to write code and easier to write pernicious bugs:
undefinedFor example, see the following code:
alert(5)
alert()
invert("the world!")
If a part of code gets particularly complicated, or if you want to save a value to reuse or change it later, variables are the way to go!
Variables in coding are a bit like variables in maths, but not quite. Just like functions! A variable is essentially just a name.
Before you use a variable you must first declare it by writing var then the name of the variable, like so: var myVariable;. A variable can be named whatever you want, so long as it has no spaces or punctuation, and it doesn't start with a number. The code will have the same effect no matter what you name your variables, so it's best to name them something that other people (and you later on) can understand.
Declaring a variable tells the program that you are going to use that as a name, but to set what that name actually refers to, you must assign the variable, by writing it's name then an equals sign then the value you want to assign it. Like so: myVariable = "Hello, world!";, this type of expression is called an assignment. Unlike in mathematics, you can have put as many assignments as you want, and the code will interpret the variable as meaning whatever the final assignment is. Ie var x; x = 1; x = 2; will have the exact same effect as var x; x = 2;
Once you have declared and assigned a variable, to use it you simply write the variable name in place of where you would write the value, like alert(myVariable)
Putting this all together, we get the code
var message;
message = "Hello, world!";
alert(message);
Now, try to predict what the following code snippets will alert, then click to check your answer!
var myMessage;
var yourMessage;
myMessage = "Hello!";
yourMessage = "hi...";
alert(myMessage);
var a;
var b;
a = "100";
b = "200";
a = "300";
alert(a);
alert(b);
var me;
var yourBestFriend;
a = "Sally";
yourBestFriend = me;
alert(yourBestFriend);
var one;
one = "three";
var two;
two = "zero";
var three;
three = "two";
two = three;
three = one;
one = three;
three = "four";
alert(one);
alert(two);
alert(three);
You can shorten a declaration and assignment into one line, like var greeting = "Hello"; which is equivalent to var greeting; greeting = "Hello";. A variable that is never assigned a value (known as an "uninitialised variable") has the special value undefined, which if you try to alert will be converted into the string "undefined".
var me;
var yourBestFriend;
a = "Sally";
yourBestFriend = me;
alert(yourBestFriend);