JavaScript
Trainer: Muralidharan.R
Phone: 9894868015
Welcome
Learning Speed
• As you have already completed HTML, CSS, Bootstrap. You are going to learn Javascript which
is a high-level language.
• Everything is up to you.
• If you are struggling, take a break, or re-read the material.
• The only way to become a clever programmer is to: Practice. Practice. Practice. Code. Code.
Code !
Welcome
Introduction to Procedural Programming
⮚ Procedural programming is derived from imperative programming.
⮚ Its concept is based on procedure calls. Procedures are nothing but a series of computational
steps to be carried out.
⮚ In Procedural programming, the execution of the instructions takes place step by step.
⮚ When you use Procedural language, you give instructions directly to your computer and tell it how
to reach its goal through processes.
⮚ Procedural programming focuses on the process rather than data (Object-oriented Programming)
and function (Functional Programming).
⮚ The first major procedural programming languages around 1957-1964 were FORTRAN, ALGOL,
COBOL, PL/I and BASIC. The procedural Programming paradigm is one of the first paradigms to
emerge in the computational world.
Welcome
Types of Procedural Languages
⮚ FORTRAN(Formula Translation Language)
⮚ ALGOL(Algorithmic Language)
⮚ COBOL(Common Business Oriented Language)
⮚ BASIC(Beginner’s All Purpose Symbolic Instruction Code)
⮚ PASCAL
⮚ C
Welcome
Advantages of Procedural Programming
⮚ The programs written are straight forward with precise usage of accumulators and interpreters.
⮚ The code is compact and reusable.
⮚ It breaks problems into smaller subproblems, making them accessible and faster to solve.
⮚ It expands the renewable energy of the program.
⮚ It utilises CPU storage effectively.
⮚ It is more flexible than other alternatives.
Welcome
Disadvantages of Procedural Programming
⮚ The procedural program is not recyclable.
⮚ Information is defenceless.
⮚ The information is accessible from the whole code resulting in safety issues.
⮚ It is event-driven programming, not portable to other operating systems.
⮚ Programmers need to specialise as each language is suitable for a specific type of application.
Welcome
Features of Procedural Programming
1. Pre-defined Functions: It is an instruction identified by name. Such as “charAt()” is a pre-defined
function that searches for a character in a string at a specific position. There are more pre-defined
functions that make competitive programming a little easier.
2. Local Variables: Local variables are declared in the main structure of a method. You will only be
able to access the local variable within the method.
3. Global Variables: They are declared outside all methods to be accessible from anywhere in the
code.
4. Programming libraries: A programming library is a collection of code written previously to utilise
whenever a programmer requires it.
5. Modularity: It is a general term that relates to the creation of software in a way that allows
individual modules to be developed, often with a standard interface to let modules communicate with
each other.
Welcome
HTML,CSS and Javascript
HTML:
⮚ HTML is at the core of every web page, regardless the complexity of a site or number of
technologies involved. It's an essential skill for any web professional.
⮚ It's the starting point for anyone learning how to create content for the web. And, luckily for us, it's
surprisingly easy to learn.
⮚ Once a tag has been opened, all of the content that follows is assumed to be part of that tag until
you "close" the tag.
⮚ When the paragraph ends, I'd put a closing paragraph tag: </p>. Notice that closing tags look
exactly the same as opening tags, except there is a forward slash after the left angle bracket.
Here's an example: <p>This is a paragraph.</p>
⮚ Using HTML, you can add headings, format paragraphs, control line breaks, make lists, emphasize
text, create special characters, insert images, create links, build tables, control some styling, and
much more.
Welcome
HTML,CSS and Javascript
CSS
⮚ CSS stands for Cascading Style Sheets.
⮚ This programming language dictates how the HTML elements of a website should actually appear
on the frontend of the page.
⮚ If HTML is the drywall, CSS is the paint.
Javascript
⮚ JavaScript is a more complicated language than HTML or CSS, and it wasn't released in beta form
until 1995. Nowadays, JavaScript is supported by all modern web browsers and is used on almost
every site on the web for more powerful and complex functionality.
⮚ In short, JavaScript is a programming language that lets web developers design interactive sites.
Most of the dynamic behavior you'll see on a web page is thanks to JavaScript, which augments a
browser's default controls and behaviors.
Best Approaches To Learn Javascript
Welcome
Editors
1. Visual Studio: an industry-standard software
2. Visual Studio Code:A free version: lighter on the features; high in value
3. Webstorm:A premium JavaScript development environment
4. Atom:A strong contender for the best free JavaScript IDE
5. Brackets: An Adobe JavaScript IDE for free. Impossible!
6. Komodo IDE:Another one of the top JavaScript IDEs
7. Komodo Edit:Free text editor based on Komodo IDE
IDE - Integrated Development Environment
An integrated development environment is a software application that provides comprehensive
facilities to computer programmers for software development. An IDE normally consists of at least a
source code editor, build automation tools and a debugger. Wikipedia
Welcome
Commonly Asked Questions
• How do I get JavaScript? Where can I download JavaScript?
• Is JavaScript Free?
• You don't have to get or download JavaScript.
• JavaScript is already running in your browser on your computer, on your tablet, and on your
smart-phone. JavaScript is free to use for everyone.
• Did You Know that JavaScript and Java are completely different languages, both in concept and
design.
• JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
• ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.
•
Welcome
Javascript Versions
Till date, ES has published nine versions and the latest one (12th version) was published in the year
2020.
1. ES1 1997 6. ES2 1998 11. ES8 2019
2. ES3 1999 7. ES4 Abandoned 12. ES8 2020
3. ES5 2009 8. ES6 2015
4. ES7 2016 9. ES8 2017
5. ES9 2018 10. ES8 2018
ECMA (European Computer Manufacturers Association) Script's first three versions- ES1,
ES2, ES3 were yearly updates whereas, ES4 was never released due to political disagreements. After
a decade, ES5 was eventually released with several additions.
Welcome
JavaScript Introduction
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the element content
(innerHTML) to "Hello JavaScript":
document.getElementById("demo").innerHTML = "Hello JavaScript";
JavaScript accepts both double and single quotes:
document.getElementById('demo').innerHTML = 'Hello JavaScript';
JavaScript Can Change HTML Attribute Values
In this example JavaScript changes the value of the src (source) attribute of an <img> tag:
JavaScript Can Change HTML Attribute Values
In this example JavaScript changes the value of the src (source) attribute of an <img> tag:
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
Welcome
JavaScript Introduction
JavaScript Can Hide HTML Elements
Hiding HTML elements can be done by changing the display style:
document.getElementById("demo").style.display = "none";
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute:
document.getElementById("demo").style.fontSize = "35px";
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:
document.getElementById("demo").style.display = "block";
Welcome
JavaScript Introduction
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Old JavaScript examples may use a type attribute: <script type="text/javascript">.
The type attribute is not required. JavaScript is the default scripting language in HTML.
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 can place any number of scripts in an HTML document.
Welcome
Placement of Javascript Code
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.
<!DOCTYPE html>
<html>
<head> <script>
function hello()
{ document.getElementById("demo").innerHTML = "Hello JavaScript!"; }
</script> </head>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo" style="color:green;">JavaScript can change HTML content.</p>
<button type="button" onclick="hello()">Click Me!</button>
</body> </html>
Welcome
Javascript in Body
<!DOCTYPE html>
<html>
<body>
<h2>Use Javascript in the Body</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello
JavaScript!'">Click Me!</button>
</body>
</html>
Welcome
Javascript - External
External JavaScript Advantages
<!DOCTYPE html> Placing scripts in external files has some advantages:
<html> •It separates HTML and code
<head> •It makes HTML and JavaScript easier to read and maintain
•Cached JavaScript files can speed up page loads
<script src = "sample.js">
</script>
</head>
<body>
<h2>Use Javascript in the Body</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="hello()">Click Me!</button>
</body>
</html>
sample.js
function hello() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
External References
An external script can be referenced in 3 different ways:
•With a full URL (a full web address)
•With a file path (like /js/)
•Without any path
Welcome
JavaScript
Welcome
Procedural language contains systematic order of
A. Statements
B. Object
C. classes
D. operations
JavaScript
Welcome
A type of computer programming language that specifies a series of well-structured
steps and procedures within its programming context to compose a program
is known as.
A. Procedural Language
B. Structural Language
C. Assembly Language
D. Machine Language
JavaScript
Welcome
Choose the correct JavaScript syntax to change the content of the following HTML code.
A. document.getElement ("letsfindcourse").innerHTML = "I am a letsfindcourse";
B. document.getElementById ("letsfindcourse").innerHTML = "I am a letsfindcourse";
C. document.getId ("letsfindcourse") = "I am a letsfindcourse";
D. document.getElementById ("letsfindcourse").innerHTML = I am a letsfindcourse;
JavaScript
Welcome
Which of the following are advantages of JavaScript?
A. Less server interaction
B. Increased interactivity
C. Richer interfaces
D. All of the above
JavaScript
Welcome
Which of the following true about Javascript?
A. Client-side JavaScript does not allow the reading or writing of files
B. JavaScript cannot be used for networking applications
C. JavaScript doesn't have any multi-threading or multiprocessor capabilities
D. All of the above
Welcome
Javascript Output Methods
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().
Welcome
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Welcome
Using document.write()
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Welcome
Using window.alert()
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Welcome
Using console.log()
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Welcome Print
JavaScript
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the browser to print the
content of the current window.
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
Welcome
JavaScript Statements
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 browser.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with id="demo":
document.getElementById("demo").innerHTML = "Hello Dolly.";
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are written.
JavaScript programs (and JavaScript statements) are often called JavaScript code.
Welcome
JavaScript Statements
On the web, you might see examples
Semicolons ; without semicolons.
Semicolons separate JavaScript statements. Ending statements with semicolon is not
Add a semicolon at the end of each executable statement: required, but highly recommended.
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.
The following lines are equivalent:
let person = "Hege";
let person="Hege";
A good practice is to put spaces around operators ( = + - * / ):
let 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:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly!";
Welcome
JavaScript Statements
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.
One place you will find statements grouped together in blocks, is in JavaScript functions:
Example
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
} Here is a list of some of the keywords
JavaScript Keywords
JavaScript statements often start with a keyword to
dentify the JavaScript action to be performed.
JavaScript keywords are reserved words.
Reserved words cannot be used as names for variables.
Welcome
Questions
Welcome
