JavaScript Tutorial Part 1

Updated: Oct 18, 2019

JavaScript


JavaScript is the programming language of HTML and the Web. It is a very powerful client-side language.


JavaScript is mainly used for enhancing the interaction of a user with the webpage. JavaScript is also being used in game development and Mobile application development.


As JavaScript is a scripting language it can not run on its own. The browser is responsible for running JavaScript code.


JavaScript is compatible with all new web browsers, like Internet Explorer, Google Chrome, Firefox, etc. Also it can run on any operating system including Windows, Linux or Mac.


Why Study JavaScript?


JavaScript is one of the 3 languages all web developers must learn:

  • HTML to define the content of web pages

  • CSS to specify the layout of web pages

  • JavaScript to program the behavior of web pages

The <script> tag


The <script> tag in HTML is used to define the client-side script. The <script> tag contains the scripting statements, or it points to an external script file. The JavaScript is mainly used in form validation, dynamic changes of content, image manipulation, etc.


Syntax:

<script> Script Contents... </script>

In HTML, JavaScript code must be inserted between <script> and </script> tags.


Example:

JavaScript Functions and Events


A JavaScript function is a block of JavaScript code, that can be executed when "called" for.

For example, a function can be called when an event occurs, like when the user clicks a button.

You will learn much more about functions and events in later chapters.


JavaScript in <head> or <body>


Any number of scripts can be placed inside a HTML Page.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.


JavaScript in <head>


Here, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when the button is clicked.


Example:


JavaScript in <body>


Here, a JavaScript function is placed in the <body> section of an HTML page.

The function is invoked (called) when a button is clicked.


Example:

Placing scripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display.


External JavaScript


Scripts can also be placed in external files:


External file: myScript.js

function myFunction() {  document.getElementById("demo").innerHTML = "Paragraph changed."; }

External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src source) attribute of a <script> tag:


Example:

An external script reference can be placed in <head> or <body> as wished.

The script will behave as if it was located exactly where the <script> tag is located.

External scripts cannot contain <script> tags.


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

To add several script files to one page  - use several script tags:


Example:

<script src="myScript1.js"></script> <script src="myScript2.js"></script>


External References


External scripts can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a script.


Example:


JavaScript Output


JavaScript Output defines the ways to display the output of a given code .


JavaScript Display Possibilities


JavaScript can "display" data in different ways:

Writing into an HTML element, using innerHTML. Writing into the HTML output using document.write(). Writing into an alert box, using window.alert(). Writing into the browser console, using console.log().


Using innerHTML


To access an HTML element, JavaScript can use the document.getElementById() method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:


Example:

Changing the innerHTML property of an HTML element is a common way to display data in HTML.


Using document.write()


For testing purposes, it is convenient to use document.write().


Example:

Note:-

  • Using document.write() after an HTML document is loaded, will delete all existing HTML.

  • The document.write() method should only be used for testing.


Using window.alert()


You can use an alert box to display data:


Example:


Using console.log()


For debugging purposes, you can use the console.log() method to display data.


Example:

JavaScript Statements


The programming instruction written in a program in a programming language are known as statements.


Example:


JavaScript Programs


A computer program is a list of "instructions" to be "executed" by a computer.

In a programming language, these programming instructions are called statements.

A JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browsers.


JavaScript Statements


JavaScript statements are composed of:

  • Values

  • Operators

  • Expressions 

  • Keywords and

  • Comments

This statement tells the browser to write "I am a statement." inside an HTML element with

id="demo":


Example:

  • Most JavaScript programs contain many JavaScript statements.

  • The statements are executed, one by one, in the same order as they are written.

Note:- JavaScript programs and JavaScript statements are often called JavaScript code.


Semicolons ( ; )


Semicolons separate JavaScript statements.

Add a semicolon at the end of each executable statement.


Example:

Note:-

  • When separated by semicolons, multiple statements on one line are allowed.

  • Ending statements with semicolon is not required, but highly recommended.


JavaScript White Space


JavaScript ignores multiple spaces. So white space can be added to script to make it more readable.


The following lines are equivalent:

var person = "Here"; var person="Here";

It is usually considered to put spaces around operators ( = + - * / ):

var x = y + z;


JavaScript Line Length and Line Breaks


For best readability, programmers often like to avoid code lines longer than 80 characters.

If a JavaScript statement does not fit on one line, the best place to break it is after an operator or a comma.


Example:


JavaScript Code Blocks

  • JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.

  • The purpose of code blocks is to define statements to be executed together.

  • In JavaScript functions the statements are grouped together in blocks.

Example:


JavaScript Keywords


JavaScript statements often start with a keyword to identify the JavaScript action to be performed.


Keyword Description

  • break Terminates a switch or a loop

  • continue Jumps out of a loop and starts at the top

  • debugger Stops the execution of JavaScript, and calls (if available) the debugging function

  • do ... while Executes a block of statements, and repeats the block, while a condition is true

  • for Marks a block of statements to be executed, as long as a condition is true

  • function Declares a function

  • if ... else Marks a block of statements to be executed, depending on a condition

  • return Exits a function

  • switch Marks a block of statements to be executed, depending on different cases

  • try ... catch Implements error handling to a block of statements

  • var Declares a variable

Note:- JavaScript keywords are reserved words. Reserved words cannot be used as names for variables


JavaScript Syntax


JavaScript is the lightweight and dynamic computer programming language. It is used to create client side dynamic pages. It is open source and cross-platform language.


JavaScript syntax is the set of rules, how JavaScript programs are constructed:

var a, b, c;       // How to declare variables a = 10; b = 2;      // How to assign values c = a * b;         // How to compute values


JavaScript Values

  • The JavaScript syntax defines two types of values: Fixed values and variable values.

  • Fixed values are called literals. Variable values are called variables.


JavaScript Literals


The most important rules for writing fixed values are:

1. Numbers are written with or without decimals.

2. Strings are text, written within double or single quotes:


JavaScript Variables

  • In a programming language, variables are used to store data values.

  • JavaScript uses the var keyword to declare variables.

  • An equal sign is used to assign values to variables.


JavaScript Operators


JavaScript uses arithmetic operators ( + ), ( - ), ( * ), ( / ) to compute values:

( 10 + 2 ) * 5

JavaScript uses an assignment operator ( = ) to assign values to variables:

var a, b; a = 10; b = 2;

JavaScript Expressions


An expression is a combination of values, variables, and operators, which computes to a value.

The computation is called an evaluation.


Example:


JavaScript Keywords

  • JavaScript keywords are used to identify actions to be performed.

  • The var keyword tells the browser to create variables.

Example:


JavaScript Comments

  • Not all JavaScript statements are "executed".

  • Code after double slashes // or between /* and */ is treated as a comment.

  • Comments are ignored, and will not be executed:


JavaScript is Case Sensitive

  • All JavaScript identifiers are case sensitive. 

  • The variables Name and name are two different variables.

Example:

Note:- JavaScript does not interpret VAR or Var as the keyword var.


JavaScript and Camel Case


Historically, programmers have used different ways of joining multiple words into one variable name:


1. Hyphens:

first-name, last-name, master-card, inter-city.


Note:- Hyphens are not allowed in JavaScript. They are reserved for subtractions.

2. Underscore:

first_name, last_name, master_card, inter_city.


3. Upper Camel Case (Pascal Case):

FirstName, LastName, MasterCard, InterCity.


4. Lower Camel Case:

JavaScript programmers tend to use camel case that starts with a lowercase letter:

firstName, lastName, masterCard, interCity.


If you like Codersarts blog and looking for Assignment help, Project help, Programming tutors help and suggestion you can send mail at contact@codersarts.com.


Please write your suggestion in comment section below if you find anything incorrect in

this blog post.


Contact Us

Tel: (+91) 0120  4118730  

Time :   10 : 00  AM -  08 : 00 PM IST 

Registered address: G-69, Sector 63, 

 Noida - 201301, India

We Provide Services Across The different countries

USA    Australia   Canada   UK    UAE    Singapore   New Zealand    Malasia   India   Ireland   Germany

CodersArts is a Product by Sofstack Technology Solutions Pvt. Ltd.

  • CodersArts | Linkedin