JavaScript

Script Tags

To add JavaScript to web pages, the <script> tag is used.

Any code written between these tags will be executed as JavaScript.

<script type="text/javascript">
JavaScript here…
</script>

Note: It is good practice to add JavaScript in the <header> of the document.

External Scripts

Like CSS files, JavaScript (.js) files can be imported into an HTML page. Add the source of the file as the value of the src property.

<script type="text/javascript" src="scripts/myScript.js" ></script>

Note: Do not write any additional JavaScript between these tags, it will not work!

Variables

Variables are used to store values. In Javascript, the var keyword is used.

<script type="text/javascript">
var x = 24;
</script>

Note: JavaScript is a loosly typed language so the variable type is not defined and can change during run-time.

Operators

As with other languages, there is a collection of operators that can be performed on values. All four mathematical operators are supported (+ - * /). The equals (=) operator is used to define a variable (see above).

<script type="text/javascript">
var c = 11;
var k = 6;
var x = c + k; (x=17)
</script>

Note: JavaScript is a loosly typed language so the variable type is not defined and can change during run-time.

Functions

Functions are usefule, especially when calling JavaScript code from an event, e.g., when a button is clicked. They are defined:

<script type="text/javascript">
function FunctionName(Parameter1, Parameter2, etc…) {
Function code…
}
</script>

To call a function from JavaScript:

<script type="text/javascript">
FunctionName(x, y, …);
</script>

To call a function from a button (onClick):

<input type="button" value="My Button" onclick="FunctionName(x, y, …);" >

Alerts

The alert() method displays an alert box rendered by the browser with a message and an "Ok" button.

<script type="text/javascript">
function demoAlert() {
alert("JavaScript alert(); example");
}
</script>

Console Log

Another way to output with JavaScript is to use the console.log() method. This will output the string (given as the parameter) to the browser's console.

<script type="text/javascript">
function demoConsoleLog() {
console.log("JavaScript console.log(); example");
}
</script>

DOM > focus( )

The focus() method is used to focus on an element.

<script type="text/javascript">
function demoFocus() {
document.getElementById("_demo_focus").focus( );
}
</script>

<input id="_demo_focus" type="text" >

<input type="button" value="Give Focus" onclick="demoFocus();" >

DOM > onFocus( )

The onFocus() method is used to run JavaScript code when an element is focused.

<script type="text/javascript">
function demoOnFocus() {
document.getElementById("_demo_onfocus").style.display = "block";
}
</script>

<input type="text" onFocus="demoOnFocus" >

<p id="_demo_onfocus"> Textbox focused </p>

DOM > setAttribute( )

The setAttribute() method is used to add an attribute to an element and give this attribute a value.

<script type="text/javascript">
function demoSetAttribute() {
document.getElementById("_demo_setattribute").setAttribute("href", "https://www.w3.org/html/");
}
</script>

<a id="_demo_setattribute">W3 HTML Homepage </a>

<input type="button" value="Set Attribute" onclick="demoSetAttribute();" >