My First JavaScript

What Can JavaScript Do?

JavaScript can change HTML content.

What Can JavaScript Do?

JavaScript can change HTML attribute values.

In this case JavaScript changes the value of the src (source) attribute of an image.

What Can JavaScript Do?

JavaScript can change the style of an HTML element.

What Can JavaScript Do?

JavaScript can show hidden HTML elements.

The answer is 17!

JavaScript in Body

A Web Page

I bet you can't change this paragraph

A Web Page

A Paragraph

External JavaScript

A Paragraph.

(extFunction is stored in an external file called "myScript.js")

External JavaScript Advantages Placing scripts in external files has some advantages:

• It separates HTML and code
• It makes HTML and JavaScript easier to read and maintain
• Cached JavaScript files can speed up page loads

JavaScript Output

Writing from JS into the HTML document

Remember that JS and HTML are different languages. You can add things into a HTML file using JS, but you can do this in different ways to serve different functions. The first example takes two hard-coded values but later we will be able to use 2 variables for much better functionality, but as always, we will walk before we run!

If you look at the source code we have used the inner.HTML function to do a sum for us. The answer is displayed below:

Using document.write()

For testing purposes, it is convenient to use document.write():
Using document.write() after an HTML document is loaded, will delete all existing HTML, so it should only be used for testing. See below where in the first block 5 & 6 are added, and in the second it displays on click:

Block 1

Block 2

Clicking the button below will replace everything with the number 12, until you reload the page. You must reload the page, it deletes the current text, it does not move on a page, so you can't use back.

Very Useful!

Using window.alert()

window.alert() can be used a lot like print statements in Python to check if a code is running. It should be your first port of call both when you write a section of code for the first time, and when testing to see if code is working properly or where exactly the problem lies.
Everytime this page loads it will give a pop up window with the result of the brackets, i.e. 6+7 as entered below

Activate debugging

Use F12 or 3-dots --> More Tools --> Developer Tools --> Select "Console" in the debugger menu. Then click Run again. You will see every thing in the script being written to the console log. Here I am adding the word "Cricket" and the number 55.

This marks the end of the first 4 sections on w3schools.com I will start a new HTML document for the next Sections.