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:
z
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.
Comments