1. JavaScript Introduction
1. JavaScript Introduction
1. Introduction
3. Console
4. Output
5. Comment
6. JavaScript Core
3
1. Introduction
HTML and CSS give a website structure and style, JavaScript lets you add
functionality and behaviors to your website. This allows visitors to interact
with your website in various creative ways.
4
1. Introduction
5
1. Introduction
• What Is ECMAScript?
When JavaScript was first introduced by Netscape, there was a war going
on between all the browser vendors on the market at the time. Microsoft and
several other browser vendors implemented their own versions of
JavaScript (with different names and syntax) in their respective browsers.
This created a huge headache for developers, as code that worked fine on
one browser was a total waste on another.
6
1. Introduction
7
1. Introduction
8
1. Introduction
9
1. Introduction
10
1. Introduction
11
1. Introduction
2. Using Node.js
12
1. Introduction
13
1. Introduction
Declare Variables
In
varJavaScript,
x; we use either var or let keyword to declare variables. For
example,
let y;
15
2. Variable and Constant
Var vs Let
Note: It is recommended we use let instead of var. However, there are a few
browsers that do not support let
16
2. Variable and Constant
Initialize Variables
If you use a variable without initializing it, it will have an undefined value.
let x; // x is the name of the variable
console.log(x); // undefined 17
2. Variable and Constant
18
2. Variable and Constant
//invalid
let new = 5; // Error! new is a keyword.
19
2. Variable and Constant
20
2. Variable and Constant
Constants
The const keyword was also introduced in the ES6(ES2015) version to create
constants.
const x = 5;
The console object can be accessed from any global object. It's exposed
as Window.console
console.clear(), and can be referenced as console. It has many methods
console.log("Welcome")
such as:
console.count()
console.error("Hey error")
console.dir(window.location)
console.info("Hey Im your info") 22
4. Comment
• Note:
· It is most common to use single line comments
· Block comments are often used for formal documentation. 23
5. Output
When a user visits a web page, the server returns an HTML file to the browser
that may look like this:
24
5. Output
The browser then reads the HTML and constructs the Document Object Model
(DOM).
25
5. Output
26
5. Output
• HTML DOM methods are actions you can perform (on HTML Elements).
• HTML DOM properties are values (of HTML Elements) that you can set or
change.
<h2>My First Page</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
27
6. JavaScript Core
The next lessons, you will learn the core concept of JavaScript:
• Objects
• Destructuring
• Template literals
• Ternary Operators
28
Thank you
Perfect Practice, Does Perfect Thing
29