JavaScript is a popular scripting language that control the behavior of the webpage using script.

Where to Place JavaScript Code?

You can place your JavaScript code in two places.

  • Inside the HTML document
  • Use an external file for JavaScript and link to HTML document.

JavaScript inside HTML page

When JavaScript is placed inside the HTML document, you must write your code between <script> …</script> tags.

Consider following example. The statement “hello world” is JavaScript code placed inside the <script>…</script> tags. The tags itself can be placed at three places in HTML document.

  1. head
  2. body
  3. footer ( if exist)
<script>
   document.write("Hello world");
</script>

External JavaScript File

Sometime you want to keep HTML content, CSS style and JavaScript separate. You write all your JavaScript code in a separate file with an extension .js.

For external JavaScript file, you have to link it to HTML document.

Here is an example.

<script src="demo.js"></script>

Note that you don’t write your code between <script> tags, instead, you must use a source attribute (src) to refer to the external JavaScript file.

The JavaScript code when executed, will produce output or behavior change for HTML element. In the next section, you will know common JavaScript output methods.

Output Method in JavaScript

JavaScript programming output method in four different ways. They are listed below.

  • <mark style="background-color:rgba(0, 0, 0, 0);color:#bc1212" class="has-inline-color">document.getElementById(“demo”).innerHTML = ‘hello”;</mark>
  • <mark style="background-color:rgba(0, 0, 0, 0);color:#ba1010" class="has-inline-color">console.log(“Hello”);</mark>
  • <mark style="background-color:rgba(0, 0, 0, 0);color:#b61414" class="has-inline-color">alert(“hello”);</mark>
  • <mark style="background-color:rgba(0, 0, 0, 0);color:#b81414" class="has-inline-color">document.write(“Hello”);</mark>

The first method is using <mark style="background-color:rgba(0, 0, 0, 0);color:#b91515" class="has-inline-color">HTML DOM</mark> and <mark style="background-color:rgba(0, 0, 0, 0);color:#c70d0d" class="has-inline-color">selector API</mark> functions like <mark style="background-color:rgba(0, 0, 0, 0);color:#b01414" class="has-inline-color">getElementById</mark>, etc.

The second method prints the output to the browser console.

The third method usually used for creating error or warning for program that is displayed to users as a popup box.

The last method, is <mark style="background-color:rgba(0, 0, 0, 0);color:#bb1212" class="has-inline-color">document.write()</mark>, that simply write to the document body wiping everything out except the output.

JavaScript Functions

You have already seen the document.write() function.

A function is a block of code with its own name. JavaScript allows you to create functions like traditional programming languages – C, C++, Java, etc.

Functions are reusable and called when you want them to use.

For example,

function add(a, b){
return a + b;
}

// calling a function 

let c = add(10, 20);
console.log(c);

The add(a, b) function is declared using keyword – function. The braces shows that is a block of code separate from the rest of the program.

The function is called and assigned the returned value to variable c.

let c = add( 10, 20);

The input value to function is 10 and 20 and the returned value will be 30.

JavaScript Objects

The JavaScript also allows complex types such as objects. Each object represents some real world object with properties and methods.

For example,

const book = {title:"Harry Potter and the tablet of fire", Author:"J.K.Rowling", price:600};

We can call the individual properties of an object.

console.log(book.price); // this will print 600

JavaScript Arrays

JavaScript arrays are dynamic sequence of ordered values. The can be accessed via indices from 0 to length of the array.

For example,

const groceries = []; // empty array 

groceries = ["eggs", "milk", "sugar", "bread" , "fruits", "rice"];

// You can access any element using its index value 
let Item = groceries[0] ;
console.log(item); // print "eggs" because first index value is 0

JavaScript Arrays has many in-built functions.

  1. push() – add element at the end of the array.
  2. pop() – remove a last value in the array.
  3. shift() – removes first element from the array
  4. unshift() – add element from the beginning.
  5. splice() – add/remove elements from any position.

JavaScript Strings

Strings in JavaScript store text information. You can find them between “double quotes” or ‘single quotes’. JavaScript strings are like arrays of characters. They too have built-in methods.

Here is a small list.

  • length property: Returns the length of the string.
  • includes(): Checks if a string contains a specified substring (case-sensitive) and returns a Boolean.
  • startsWith() / endsWith(): Checks if a string begins or ends with a specified sequence of characters.
  • indexOf() / lastIndexOf(): Returns the index of the first/last occurrence of a substring, or -1 if not found.
  • slice(): Extracts a section of a string and returns a new string.
  • replace() / replaceAll(): Replaces a specified value or pattern within a string.
  • toUpperCase() / toLowerCase(): Converts the entire string to uppercase or lowercase letters.
  • trim(): Removes whitespace from both ends of a string.
  • split(): Splits a string into an array of substrings based on a specified separator. 

The are basic features of JavaScript language.

In coming posts, you will discover many more less common features of JavaScript language apart from when you learned here.