Let's Begin

After this tutorial you will understand the three main languages every web developer must know: HTML, CSS, and JavaScript. JavaScript is the behavior of websites.

There are tons of cool things you can create using javascript, and I'm going to teach you a few things to start your js journey.

Method

One of the most common methods in JavaScript is 'getElementById()'. Basically allowing you to assign an element to a script. You can use the method for various alterations in your code such as:

- Change HTML Content

- Change HTML Attribute Values

- Change HTML Styles

- Hide HTML Elements

- Show HTML Elements

Change HTML Content

'document.getElementById("Heading").innerHTML = "Hello JavaScript!"'

Change HTML Attribute Values

'document.getElementById('heroImage').src="newHeroImage.jpg"'

Change HTML Styles

document.getElementById("Heading").style.fontSize = "35px";

Show HTML Elements

document.getElementById("submitButton").style.display = "block";

Hide HTML Elements

document.getElementById("submitButton").style.display = "none";

Implementing

Now that you know what ways you can use javascript I'm going to show you how to implement them in your code.

You will use the script tag to define your js code in. Unlike CSS you can place scripts in the head or body. For example:

js implement

Functions

Define functions in the 'head' section of an HTMl page. For example:

functions

External JavaScript

You can place scripts in external files prior to your HTML file. For example:

external script

Displaying JavaScript

You can display your script in several different ways:

Write into an HTML element

result inner

The script should display:

result inner output

Write into HTML output

docWrite

The script should display:

doc write output

Write into an alert box

view alert

Write into the console

console log

By using this, data will be displayed into the console. You can view this by pressing f12 in the browser.

Statements

These are the instructions in the script that will be executed.

js statements

The following should output the following:

js statements output

Seperate each statement with semicolons just as you do in CSS.

Variables

These store data values and can be declared with the 'var' keyword.

Operators

There are numerous operators.

Arithmetic Operators

Using the '+', '-', '*', and '/' you can compute values.

arithmetic js

Assignment Operators

Use the '=' to assign values to variables.

assignment js

Expressions

These can contain numbers, variables or strings. Strings are a collection of characters essentially.

Number Example:

number Example

String Example:

string example

Variable Example:

var example

Syntax

JavaScript is case sensitive. The variables 'newResult' and 'newresult' are two different variables.

syntax example

Data Types

You can use numbers, strings, objects and many more as types for your script.

Strings

You write strings with quotes they can be written within single or double quotes.

strings data type

Numbers

You can write numbers with or without decimals.

numbers data type

Booleans

Use boolens to incorporate 'true' or 'false' values.

bool data types

After the code executes it should output the following:

bool output

Arrays

You write arrays within square brackets and seperate them with commas. Array indexes are zero-based, when mean that the first item in the list is [0], and the second is [1], and so on. The code down below declares an array called 'cityNames', and contains three items. The first city is output by the 'cityNames[0]'.

This was just a brief introduction to arrays we will talk about them later in the tutorial a bit more in depth.

Objects

Write objects within curly braces. They have properties that are seperated by commas.

The previous code outputs:

Null

Basically this object sets something to nothing. You can also use it to empty an object.

The previous code gets output to:

Functions

A function is block of code that performs a designated task.

The code should output:

Syntax of Functions

Use this snippet as a template for creating functions.

Return Statements

When a function is called, the code in the function is returned.

Events

An event is something a browser does, or something the user does.

Onclick

The following code creates a button and when clicked reveals the current time

This is the output before the button is clicked:

This is the output after the button is clicked:

Methods

These help you create more complicated results from a vareity of data types including: strings, arrays, numbers, dates and more.

String Methods

A few string properties.

String Length

returns the length of a string:

Finding a string in a string

Counts the position from 0 until it reaches the first character of the string.

Replacing a string

Use the 'replace()' method to replace a specified string.

The previous code replaces the first instance of 'HTML' with 'JavaScript', using the 'replace()' method and 'onClick' event we went over earlier.

The 'replace()' method is case sensitive to replace insensitive use '/i'

To replace all instances of the string use '/g'

Converting strings to upper or lower case

You use the 'toUpperCase()' method to convert to all upper case

You use the 'toLowerCase()' method to convert to all lower case

Concat

You can use 'concat()' method to join two or more strings.

The previous code outputs:

String Trim

The 'trim()' method trims or removes whitespace from both sides of the string.

charAt()

This methods returns the character at a specific position in a strig.

The code should return 'W' as it is represented as the (0) spot.

Converting strings to array

The string is converted into an array the 'arr[0]' specifies the first position, arr[1] specifies the second.

Number Methods

toString() Method

Returns a number as a string.

There are several ways to write the toString Method the previous code is output to:

toFixed() Method

This method returns a string with a fixed number of decimals.

The code is output to:

toPrecision() Method

This method returns a string, and can be written with a specific length.

The previous code output to:

Array Methods

You can also use array methods to manipulate arrays.

toString()

Converts an array to a string

popMethod()

The pop method can remove the last element from the array and return the value that was removed.

The last element has been removed.

The removed element is returned.

push() Method

This method adds a new element to the array at the latest index and can return the new array length.

shift() Method

Shifting is similar to the pop method although it works on the first element instead, by removing the first element and shifting the others to a smaller index.

Array Sorting

You can also sort arrays.

sort() Method

You can use this method to sort an array alphabetically.

reverse() Method

You use this to reverse the elements in an array. You can also pair it with sort method to sort in a descending order.

Math in JavaScript

This section will be pretty straight forward.

Math.round

This method rounds the value of x to the nearest integer.

Math.pow

This methods returns the value of x to the power of y.

Math.abs

This method returns the absolute value.

Math.sqrt

This method returns the square root of x.

Math.ceil

This method retuns the value of x rounded up to its nearest integer.

Math.floor

This method retuns the value of x down up to its nearest integer.

Math.min

This method is used to find the lowest value in a list.

Math.max

This method is used to find the highest value in a list.

Random in JavaScript

You can use Math.random() to return a random number.

Booleans

You can use the greater than, less than, and equal to signs.

Will return true.

Will return false.

Will return true.

Comparisons

You can use these to compare variables or values.

equal to
not equal
greater than
less than
greater than or equal to
less than or equal to
'&&'

'and' operator, must be true for both comparisons otherwise returns false.

'||'

'or' operator, returns true if atleast one of the comparisons is true.

'!'

'not operator, returns true for false statements and false for true statements.

Conditions

These statements perform different actions based on their condition.

if / else

You can use the 'if' / 'else' conditions to specify what happens when a condition is true and when one is false.

else if

You can also use 'else if' condition to test a new condition if the first condition is false.

Switch Statements

Use switch to select one of several code blocks to be executed.

Use the break keyword to break out of the statements and moves on out of the switch.

Use the default keyword to specify what happens if none of the switch statements are true.

Loops

for loop

Loops through a block of code a specific number of times.

The first statement 'i = 0', starts the loop off at '0'. The second statement, maxes the loop to less than or equal to 5, the final statement '++' counts by one until end of the loop which is the max of 5.

while loop

Loops through a block of code while the condition is true.

The previous code is output to:

do/while loops

Loops through a block of code while the condition is true.

The previous code is output to:

That's all!

You have completed the tutorial. Now go out there and make some more websites!