Scribd
Upload
0 views

Introduction to JavaScript

Uploaded by

aviokthomas471
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Introduction to JavaScript

Uploaded by

aviokthomas471
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

JBT 352: WEB AND MOBILE APP DEVT IN EDUCATION

Introduction to JavaScript
JavaScript is a lightweight, cross-platform, and interpreted scripting
language. It is well-known for the development of web pages, many
non-browser environments also use it. JavaScript can be used
for Client-side developments as well as Server-side developments.
JavaScript contains a standard library of objects, like Array, Date,
and Math, and a core set of language elements like operators, control
structures, and statements.

• Client-side: It supplies objects to control a browser and its


Document Object Model (DOM). Like if client-side extensions
allow an application to place elements on an HTML form and
respond to user events such as mouse clicks, form input,
and page navigation. Useful libraries for the client-side
are AngularJS, ReactJS, VueJS and so many others.
• Server-side: It supplies objects relevant to running
JavaScript on a server. Like if the server-side extensions allow
an application to communicate with a database, and provide
continuity of information from one invocation to another of the
application, or perform file manipulations on a server. The
useful framework which is the most famous these days
is node.js.
JavaScript can be added to your HTML file in two ways:
• Internal JS: We can add JavaScript directly to our HTML file
by writing the code inside the <script> tag. The <script> tag
can either be placed inside the <head> or the <body> tag
according to the requirement.
• External JS: We can write JavaScript code in other file having
an extension .js and then link this file inside the <head> tag
of the HTML file in which we want to add this code.

Syntax:
<script>
// JavaScript Code
</script>
Example:
• HTML

<!DOCTYPE html>
<html lang="en">

<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>

<body>

<!-- JavaScript code can be embedded inside


head section or body section -->
<script>
console.log("Welcome to GeeksforGeeks");
</script>
</body>

</html>

Output: The output will display on the console.


Welcome to GeeksforGeeks

History of JavaScript: It was created in 1995 by Brendan Eich while


he was an engineer at Netscape. It was originally going to be named
LiveScript but was renamed. Unlike most programming languages, the
JavaScript language has no concept of input or output. It is designed
to run as a scripting language in a host environment, and it is up to
the host environment to provide mechanisms for communicating with
the outside world. The most common host environment is the browser.
Features of JavaScript: According to a recent survey conducted
by Stack Overflow, JavaScript is the most popular language on earth.
With advances in browser technology and JavaScript having moved
into the server with Node.js and other frameworks, JavaScript is
capable of so much more. Here are a few things that we can do with
JavaScript:

• JavaScript was created in the first place for DOM


manipulation. Earlier websites were mostly static, after JS
was created dynamic Web sites were made.
• Functions in JS are objects. They may have properties and
methods just like another object. They can be passed as
arguments in other functions.
• Can handle date and time.
• Performs Form Validation although the forms are created
using HTML.
• No compiler is needed.
Applications of JavaScript:

• Web Development: Adding interactivity and behavior to static


sites JavaScript was invented to do this in 1995. By using
AngularJS that can be achieved so easily.
• Web Applications: With technology, browsers have improved
to the extent that a language was required to create robust
web applications. When we explore a map in Google Maps then
we only need to click and drag the mouse. All detailed view is
just a click away, and this is possible only because of
JavaScript. It uses Application Programming Interfaces(APIs)
that provide extra power to the code. The Electron and React
is helpful in this department.
• Server Applications: With the help of Node.js, JavaScript
made its way from client to server and node.js is the most
powerful on the server-side.
• Games: Not only in websites, but JavaScript also helps in
creating games for leisure. The combination of JavaScript and
HTML 5 makes JavaScript popular in game development as
well. It provides the EaseJS library which provides solutions
for working with rich graphics.
• Smartwatches: JavaScript is being used in all possible
devices and applications. It provides a library PebbleJS which
is used in smartwatch applications. This framework works for
applications that require the internet for its functioning.
• Art: Artists and designers can create whatever they want
using JavaScript to draw on HTML 5 canvas, make the sound
more effective also can be used p5.js library.
• Machine Learning: This JavaScript ml5.js library can be used
in web development by using machine learning.
Limitations of JavaScript:
• Performance: JavaScript does not provide the same level of
performance as offered by many traditional languages as a
complex program written in JavaScript would be
comparatively slow. But as JavaScript is used to perform
simple tasks in a browser, so performance is not considered a
big restriction in its use.
• Complexity: To master a scripting language, programmers
must have a thorough knowledge of all the programming
concepts, core language objects, client and server-side objects
otherwise it would be difficult for them to write advanced
scripts using JavaScript.
• Weak error handling and type checking facilities: It is
weakly typed language as there is no need to specify the data
type of the variable. So wrong type checking is not performed
by compile.

JavaScript is best known for web page development but it is also used
in a variety of non-browser environments.

Where to put JavaScript in an HTML Document?


JavaScript in body or head: Scripts can be placed inside the body or
the head section of an HTML page or inside both head and body.
JavaScript in head: A JavaScript function is placed inside the head
section of an HTML page and the function is invoked when a button is
clicked.
Examples:
<!DOCTYPE html>
<html>
<head>
<script>
function gfg() {
document.getElementById("demo").innerHTML = "Geeks For Geeks";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo" style="color:green;">geeksforgeeks.</p>
<button type="button" onclick="gfg()">click it</button>
</body>
</html>

JavaScript in body: A JavaScript function is placed inside the body


section of an HTML page and the function is invoked when a button is
clicked.
Example:
<!DOCTYPE html>
<html>
<center>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">geeksforgeeks.</p>
<button type="button" onclick="gfg()">Try it</button>
<script>
function gfg() {
document.getElementById("demo").innerHTML = "Geeks For Geeks";
}
</script>
</body>
</center>
</html>

External JavaScript: JavaScript can also be used as external files.


JavaScript files have file extension .js . To use an external script put
the name of the script file in the src attribute of a script tag. External
scripts cannot contain script tags.
Example:

<!DOCTYPE html>
<html>
<center>
<body>
<h2>External JavaScript</h2>
<p id="demo">Geeks For Geeks.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script src="myScript.js"></script>
</body>
<center>
</html>

Advantages of External JavaScript:


• Cached JavaScript files can speed up page loading
• It makes JavaScript and HTML easier to read and maintain
• It separates the HTML and JavaScript code

JavaScript | Statements
The programming instructions written in a program in a programming
language are known as statements.
Order of execution of Statements is the same as they are written.

1. Semicolons:
• Semicolons separate JavaScript statements.
• Semicolon marks the end of a statement in
javascript.
Example:
<!DOCTYPE html>
<html>

<body>
<h2>Welcome</h2>

<p id="geek"></p>

<script>
// Statement 1
var a, b, c;

// Statement 2
a = 2;

// Statement 3
b = 3;

// Statement 4
c = a + b;

document.getElementById(
"geek").innerHTML =
"The value of c is " + c + ".";
</script>

</body>

</html>

JavaScript | Syntax
JavaScript is a lightweight and dynamic computer programming language. It
is used to create client-side dynamic pages. It is open-source and cross-
platform language.
Basic Syntax:
• Javascript

<script>
document.write("Basic Print method in JavaScript");
</script>

JavaScript syntax refers to the set of rules that determines how JavaScript
programs are constructed:
// Variable declaration
var c, d, e;

// Assign value to the variable


c = 5;

// Computer value of variables


d = c;
e = c/d;
JavaScript Variables: A JavaScript variable is the simple name of storage
location where data to be stored. There are two types of variables in
JavaScript which are listed below:
• Local variables: Declare a variable inside of block or function.
• Global variables: Declare a variable outside function or with a
window object.
Example:
• Javascript

<script>

// Declare a variable and initialize it


// Gloabal variable declaration
var Name="Apple";

// Function definition
function MyFunction() {

// Local variable declaration


var num = 45;

// Display the value of Gloabal variable


document.writeln(Name);
// Display the value of local variable
document.writeln("<br>" + num );
}

// Function call
MyFunction();

</script>

Output:
Apple
45
JavaScript Operator: JavaScript operators are symbols that are used to
compute the value or in other word we can perform operations on operands.
Arithmetic operators ( +, -, *, / ) are used to compute the value and
Assignment operator ( =, +=, %= ) are used to assign the values to variables.
Example:
• Javascript

<script>

// Variable Declarations
var x, y, sum;

// Assign value to the variables


x = 3;
y = 23;

// Use arithmetic operator to


// add two numbers
sum = x + y;

document.write(sum);

</script>

Output:
26
JavaScript Expression: Expression is the combination of values, operators,
and variables. It is used to compute the values.
Example:
• Javascript
<script>

// Variable Declarations
var x, num, sum;

// Assign value to the variables


x = 20;
y = 30

// Expression to divide a number


num = x / 2;

// Expression to add two numbers


sum = x + y;

document.write(num + "<br>" + sum);

</script>

Output:
10
50
JavaScript Keyword: The keywords are the reserved words that have
special meaning in JavaScript.
// var is the keyword used to define the variable
var a, b;
// function is the keyword which tells the browser to create a
function
function GFG(){};
JavaScript Comments: The comments are ignored by JavaScript compiler.
It increases the readability of code. It adds suggestions, Information and
warning of code. Anything written after double slashes // (single line
comment) or between /* and */ (multi-line comment) is treated as comment
and ignored by JavaScript compiler.
Example:
• Javascript

<script>

// Variable Declarations
var x, num, sum;
// Assign value to the variables
x = 20;
y = 30

/* Expression to add two numbers */


sum = x + y;

document.write(sum);

</script>

50
JavaScript Data Types: JavaScript provides different datatype to hold
different values on variable. JavaScript is a dynamic programming language,
it means do not need to specify the type of variable. There are two types of
data types in JavaScript.
• Primitive data type
• Non-primitive (reference) data type
// It store string data type
var txt = "GeeksforGeeks";

// It store integer data type


var a = 5;
var b = 5;

// It store Boolean data type


(a == b )

// It store array data type


var places= ["GFG", "Computer", "Hello"];

// It store object data


var Student = {firstName:"Johnny", lastName:"Diaz", age:35,
mark:"blueEYE"}
JavaScript Functions: JavaScript functions are the blocks of code used to
perform some particular operations. JavaScript function is executed when
something call it. It calls many times so the function is reusable.
Syntax:
function functionName( par1, par2, ....., parn ) {
// Function code
}
JavaScript function can contain zero or more arguments.
Example:
• Javascript

<script>

// Function definition
function func() {

// Declare a variable
var num = 45;

// Display the result


document.writeln(num);
}

// Function call
func();

</script>

Output:
45

You might also like