JavaScript tutorial

<< Prev
Next >>

Introduction

JavaScript is a programming language that extends the html capabilities, introducing interactivity into web pages. It is also called scripting language.

JavaScript can be entered into web pages to perform calculations (arithmetic operations, size conversions), to scroll through menus, validate html forms (text fields), animations, images, sounds, alerts.
These scripts are executed within the user's browser, lessening the traffic between the server and the client.
The JavaScripts are inserted between the <script> and </script> and can be used in the <head> section, in the <body> section, or as external scripts (see Html documentation).
However, in order to simplify the web page code and increase the upload speed, it is preferable to use external JavaScripts. Thus, the JavaScript used will be saved, for example, with the name test.js, and in order to access it, in the <head> the following statement is inserted:


<script src="test.js">


With JavaScript, you can change the content of a web page. One of the methods used is to find an html element using an identifier (for example: id="test") and modifying its content (innerHTML).
Below is an example of replacing one paragraph with another at the time of pressing a button:


Change text

And after pressing the button:


Change text

JavaScript can use functions and events. A function is a code block that is executed when is called. It can be called when an event occurs (pushing a button, moving the mouse over an item, loading the page).
Example of executing function when loading the page:


Executing functions

Displaying elements on the web page using JavaScript

JavaScript can display elements on the web page in several ways:
- Using syntax: innerHTML
To access an element on the webpage, JavaScript uses the method:


document.getElementById(id)


innerHTML

- To display an element, you can also use the method:


document.write()


Document write

JavaScript can be used to perform mathematical operations. For example, adding two numbers:


Add number

Another example of executing a function using an external JavaScript:


Javascript button

And inserting a text when clicking on a text element:


Javascript button

Depending on the time the web page is accessed, you may receive a welcome message:


Message

And when you press the button:


Message

We can change the style of an element (in our case, font size):


Change style

Iar la apasarea butonului, vom avea:


Change style

We can redirect from one web page to another:


Redirect page

And after 5s the new page will be displayed:


Redirect page

We can create a Fahrenheit to Celsius converter:


Converter
<< Prev
Next >>

Visit my websites:

https://www.jwebsaints.com
https://www.jwebplants.com