https://javascript.

info/variables#variable-naming

1.1 Intro to JS

When JavaScript was created, it initially had another name: “LiveScript”. But Java was very popular at
that time, so it was decided that positioning a new language as a “younger brother” of Java would help.

Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device
that has a special program called the JavaScript engine.

1.2 The browser has an embedded engine sometimes called a “JavaScript virtual machine”.

Different engines have different “codenames”. For example:

V8 – in Chrome, Opera and Edge.

SpiderMonkey – in Firefox.

…There are other codenames like “Chakra” for IE, “JavaScriptCore”, “Nitro” and “SquirrelFish” for
Safari, etc.

The terms above are good to remember because they are used in developer articles on the internet.
We’ll use them too. For instance, if “a feature X is supported by V8”, then it probably works in Chrome,
Opera and Edge.

1.3 How do engines work?

Engines are complicated. But the basics are easy.

The engine (embedded if it’s a browser) reads (“parses”) the script.

Then it converts (“compiles”) the script to machine code.

And then the machine code runs, pretty fast.

The engine applies optimizations at each step of the process. It even watches the compiled script as it
runs, analyzes the data that flows through it, and further optimizes the machine code based on that
knowledge.

1.4 What can in-browser JavaScript do?

Modern JavaScript is a “safe” programming language. It does not provide low-level access to memory or
the CPU, because it was initially created for browsers which do not require it.
JavaScript’s capabilities greatly depend on the environment it’s running in. For instance, Node.js
supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc.

In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and
the webserver.

1.5

For instance, in-browser JavaScript is able to:

 Add new HTML to the page, change the existing content, modify styles.
 React to user actions, run on mouse clicks, pointer movements, key presses.
 Send requests over the network to remote servers, download and upload files.
 Get and set cookies, ask questions to the visitor, show messages.
 Remember the data on the client-side (“local storage”).

1.6

What CAN’T in-browser JavaScript do?

JavaScript’s abilities in the browser are limited to protect the user’s safety. The aim is to prevent an evil
webpage from accessing private information or harming the user’s data.

Examples of such restrictions include:

 JavaScript on a webpage may not read/write arbitrary files on the hard disk, copy them or
execute programs. It has no direct access to OS functions

 Different tabs/windows generally do not know about each other. Sometimes they do, for
example when one window uses JavaScript to open the other one. But even in this case,
JavaScript from one page may not access the other page if they come from different sites (from
a different domain, protocol or port).
 This is called the “Same Origin Policy”.

1.7

What makes JavaScript unique?

There are at least three great things about JavaScript:

 Full integration with HTML/CSS.

 Simple things are done simply.
 Supported by all major browsers and enabled by default.
 JavaScript is the only browser technology that combines these three things.

That’s what makes JavaScript unique. That’s why it’s the most widespread tool for creating
browser interfaces.

That said, JavaScript can be used to create servers, mobile applications, etc.

1.8

IDE

The term IDE (Integrated Development Environment) refers to a powerful editor with many features
that usually operates on a “whole project.” As the name suggests, it’s not just an editor, but a full-scale
“development environment.”

1.9 JavaScript Fundamentals

How to Link JavaScript File in HTML?

JavaScript can be added to 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 another files 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.

1.10

Internal js eg:

<!DOCTYPE html>

// JavaScript in HEAD SECTION

<html lang="en-US">

<head>

<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

<title>JS in Head Section </title>

<script>

alert("Welcome to JS");

</script>

</head>

<body>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------

// Javascript in BODY SECTION

<!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 JS");

</script>

</body>
</html>

1.11 External js file connecting to html

Step1 : create a js file in the same folder where you have html file

Apps.js

alert("alert from external js file");

in html link this file apps.js either at head or body section.

<body>
<script src="apps.js"></script>
</body>

OR
<head>
<script src="apps.js"></script>
</head>

NOTE:

As a rule, only the simplest scripts are put into HTML. More complex ones reside in
separate files.

The benefit of a separate file is that the browser will download it and store it in its cache.

Other pages that reference the same script will take it from the cache instead of
downloading it, so the file is actually downloaded only once.

That reduces traffic and makes pages faster.

1.12 Code structure

Statements: Statements are syntax constructs and commands that perform actions.
Statements can be separated with a semicolon.

alert('Hello'); alert('World');

alert('Hello');
alert('World');

1.13 Comments
Comments can be put into any place of a script. They don’t affect its execution because the engine
simply ignores them.
1.14 Single line comments
// This comment occupies a line of its own
alert('Hello');

alert('World'); // This comment follows the statement

1.15 Multiline comments:

/* An example with two messages.
This is a multiline comment.
*/
alert('Hello');
alert('World');

1.16 Language

A variable

A variable is a “named storage” for data. We use variables to store data.

To create a variable in JavaScript, use the let keyword.

<body>
<script>
let message = 'Hello!'; // define the variable and assign the
value
alert(message)
</script>

</body>

Multi variables:

let user = 'John';

let age = 25;
let greet = 'Hello';

// reassigning values

let message;

message = 'Hello!';

message = 'World!'; // value changed

alert(message);

copy values: We can also declare two variables and copy data from one into the other.

let greet1= 'Hello world!';

let greet2;

// copy 'Hello world' from hello into message

greet2= greet1;

// now two variables hold the same data

alert(greet1 +" old msg"); // Hello world!
alert(greet2 + " copied msg"); // Hello world!

Variable naming

There are two limitations on variable names in JavaScript:

1. The name must contain only letters, digits, or the symbols $ and _.
2. The first character must not be a digit and – hypen not allowed

Case matters

Variables named apple and APPLE are two different variables.

JavaScript: Object-Based Language

 There are three object categories in JavaScript: Native Objects, Host Objects, and User-Defined
Objects.

– Native objects: defined by JavaScript language.

 String, Number, Array, Image, Date, Math, etc.

– Host objects : supplied and always available to JavaScript by the browser environment.

 window, document, forms, etc.

– User-defined objects : defined by the author/programmer

 Initially, we will use host objects created by the browser and their methods and properties