You can mix JavaScript and HTML. The script tag tells your browser the stuff inside is code, not content.
<script>
CODE GOES HERE
</script>
Just like CSS, you can split a long block of JavaScript into its own file.
<script src="path/to/file.js"></script>
After each individual statement, you must add a semicolon.
console.log('Hello World!');
console.log('I am glad to meet you');
console.log('I am fuzzy');
You can leave comments in your code—notes that people can read and computers will ignore.
/*I can wrap long comments
with multiple lines
like this*/
console.log('Hello World!'); //Or mark short comments like this
Open a popup box.
alert('Hello World!');
Display a message in your console.
console.log('Hello World!');
Add something to the page.
document.write('Hello World!');
A variable is a place to store values
To declare (create) a variable, just type the word "var" and the variable name, followed by a value.
var numberOfKittens = 5;
Once you have created a variable, you can use it in your code. Just type the name of the variable.
var numberOfKittens = 5;
console.log (numberOfKittens);
In your JS file, create a variable and give it a valid name and a value. Then, display the value.
Variables can be numbers, either integers or floats (decimals).
var numberOfKittens = 5;
var cutenessRating = 9.6;
The browser will automatically convert integers to floats if needed
Once you have numbers, you can do math with them!
var numberOfKittens = 5;
var numberOfPuppies = 4;
var numberOfAnimals = numberOfKittens + numberOfPuppies;
Example | Name | Result |
---|---|---|
-a | Negation | Opposite of a. |
a + b | Addition | Sum of a and b. |
a - b | Subtraction | Difference of a and b. |
a * b | Multiplication | Product of a and b. |
a / b | Division | Quotient of a and b. |
Create two variables and try some arithmetic operators. Don't forget to display your results!
Variables can be strings, groups of characters. You put your string in quotes.
var kittensName = 'Fluffy';
If you want to use a quote in your string, you'll need to "escape" it with a backslash.
console.log('I\'d like to use an apostrophe');
You can put strings together with a +, the concatenation operator.
var kittensName = 'Fluffy ';
var fullName = kittensName + ' McDougle';
console.log(fullName); //Outputs 'Fluffy McDougle'
You can also use += to add things to the end of a string.
var kittensName = 'Admiral ';
kittensName += ' Snuggles';
console.log(kittensName); //Outputs 'Admiral Snuggles'
Create two variables, a first name and a last name, and then put them together to make a full name. Don't forget to display your results!
Functions are separable, reusable pieces of code.
First, declare the function.
function turtleFact() {
console.log('A turtle\'s lower shell is called a plastron.');
}
Then, use it as many times as you want!
turtleFact();
Functions can accept input values, called arguments.
function callKitten (kittenName){
console.log('Come here, ' + kittenName + '!');
}
callKitten ('Fluffy'); //outputs 'Come here, Fluffy!'
function addNumbers(a, b) {
console.log(a + b);
}
addNumbers(5,7); //outputs 12
addNumbers(9,12); //outputs 21
You can also pass variables into functions. These variables do not need to have the same name as the function arguments.
function addOne(inputNumber){
var newNumber = inputNumber + 1;
console.log('<p>You now have ' + newNumber);
}
//Declare variables
var numberOfKittens = 5;
var numberOfPuppies = 4;
//Use them in functions
addOne(numberOfKittens);
addOne(numberOfPuppies);
Turn the code you wrote to output someone's full name into a function, then use it.
You can have a function give you back a value, to use later.
function square(num) {
return num * num;
}
console.log(square(4)); // outputs '16'.
var squareOfFive = square(5); // will make squareOfFive equal 25.
Return will immediately end a function.
Add a return statement to your name function. Use that function to set the value of a variable.