MODULE 3.

LESSON 1

Introduction
to JavaScript

Methodological
Скачать Guidelines
методичку
MODULE 3. LESSON 1

New Topic:
Introduction to JavaScript
JavaScript
To start using JavaScript, we need to answer 3 questions:

1. What is an algorithm?
2. What is a programming language?
3. What is a program?
Algorithm —
is a sequence of actions determined to achieve a goal.
Programming language —
is a language for communicating with machines, in our case —
with the browser.

A programming language consists of a set of commands. Each

command has only one meaning.
Program —
is an algorithm written in a programming language.
Program —
is an algorithm written in a programming language.

In JavaScript, we will write such programs, forcing the browser

to follow a certain algorithm.
Program —
is an algorithm written in a programming language.

In JavaScript, we will write such programs, forcing the browser

to follow a certain algorithm.

Is it possible to write an algorithm in HTML?

Differences
HTML JavaScript

Just stating that elements exist Managing styles according to

and how they look the algorithm

Possible to respond to a limited Possible to respond to any

set of user actions possible user action (ex. click,
(ex. :hover, :active) mousemove)

Not possible to write an Possible to write an algorithm

algorithm
Working with numbers
In JavaScript, you can perform basic arithmetic operations with

Internet. Continuation
numbers: add, multiply, divide, subtract. Everything is

The structure of the

according to the rules of mathematics. Here's how these
operations might look:

New material:
5 + 5
10 - 7
12 / 4
3 * 9
Working with numbers
All the rules of arithmetic work here too. For example, the result

Internet. Continuation
of the following operations will be predictable:

The structure of the

(9 + 3) / 2

New material:
(2 - 7) * (-5)

By the way!

Where does the result go?

Variables
Any operation with numbers does not make sense if it is

Internet. Continuation
impossible to obtain its result in the form of a value.

The structure of the

Variables are used in programming to store any data, including
the result of arithmetic operations.

New material:
Variables
You can put a number into a variable:

Internet. Continuation
The structure of the
let number = 5

Or the result of calculations:

New material:
let result = (5 + 5) * 7
 Variables
To create a variable, you must:

Internet. Continuation
● Use the let keyword.

The structure of the

● State the name of the variable.
● Assign a value to a variable.

New material:
let number = 5 let result = (5 + 5) * 7

Meaning
Title Title Meaning
Keyword Keyword
Variables
The = operator is used to assign a value. There are also
operators for changing existing values: +=, -=, *=, /=. Here is
an example:

let number = 10
The value to change to
number += 5

Title Addition & assign operator

Variables
You can also use values of existing variables in your

Internet. Continuation
calculations:

The structure of the

let a = 10

New material:
let b = 20
let result = a * b

What will be stored in the result variable?

Variables

There are rules for variable naming:

Internet. Continuation
● You can use letters from English alphabet, numbers,

The structure of the

underscores (_) and the dollar sign ($).
● The name of the variable should reflect its purpose.

New material:
● The variable name cannot start with a digit.
Output of the result
The result variable will store the number 200. But how
will we know about it?

We have learned how to store data, but knowing how to

take a look at this data would also be nice.
console.log()
To display service information, there is a console.log()
command. In parentheses you need to specify the value
that you want to output. It will appear in the console ―
the same place where you saw the test results in
previous tasks:
let a = 10
let b = 20
let result = a * b

console.log(result)
console.log()
You can pass the value of a variable into the
console.log() brackets, as we just did,
and also the whole arithmetic expression. Then its
result will be calculated first, and only then it will appear
in the console:
let a = 6

console.log(a * 5)
alert()
The alert() command is another way to see
the data. It works exactly the same as console.log(),
but the result comes up in the
pop-up window, not in the console.

let a = 10
let b = 20
let result = a * b

alert(result)
alert()
In this case the value of expression is again calculated
first:

let a = 6

alert(a * 5)
 Don't you think
there's something
missing?

It seems we don't
know how to
output text :(

10:4
5
Data Types
Obviously, we need an opportunity to work
with text in JavaScript. In fact, it's not that difficult: the
only rule is that the text must always be in
quotation marks. Here, for example, is Fred's greeting
in the console:

let user_name = 'Fred'

console.log('Hello,', user_name, '!')
Data Types
Obviously, we need an opportunity to work
with text in JavaScript. In fact, it's not that difficult: the
only rule is that the text must always be in
quotation marks. Here, for example, is Fred's greeting
in the console:

let name1 = 'Fred'

Hello, Fred!
console.log('Hello,', name1, '!')
Data Types
Strings and numbers in JavaScript are different data
types, and operations with them are carried out by the
different rules. If you add several number together, the
result is obvious. But if you add strings:

let a = '5'
let b = ' cacti in the basket'

console.log(a + b)
Data Types
Strings and numbers in JavaScript are different data
types, and operations with them are carried out by the
different rules. If you add several number together, the
result is obvious. But if you add strings:

let a = '5' You get the following:

let b = ' cacti in the basket'
5 cacti in the basket

console.log(a + b)
Data Types
Data type of the values is a top priority for JavaScript
while executing each command.

What if the data types are slightly mixed up?

Data Types
Let's try to add a string with a number:

let a = 10 In those weird situations, JavaScript

adjusts data types by itself to get some
let b = '4'
kind of valid result.
console.log(a + b)

Here the result will be the string “104”: the number has
turned into a string so that it's possible for addition operator
to work.
Data Types
JavaScript figured everything out for us! But what if we
wanted to get a number after all? In case a string needs
to be considered a number, a unary plus is used. We
put it before the string value — we get a number:

let a = 10
let b = '4'
console.log(a + +b)
Data Types
JavaScript figured everything out for us! But what if we
wanted to get a number after all? In case a string needs
to be considered a number, a unary plus is used. We
put it before the string value — we get a number:

let a = 10
let b = '4' This time we'll get the number 14.
console.log(a + +b)
To summarize:
1. How can JavaScript store data?
2. Which ruled must be followed while giving a name to
a variable?
3. Is it possible to put the quotient of two other
variables into a variable?
4. Explain what a data type is in your own words
5. Which operations can be performed with numbers,
and which ones with strings?
Well done! Let's
move on ;)

10:2
1
MODULE 3. LESSON 1

New topic.
Interaction
with a page
Changing the page
As you'll remember from the beginning of the class,in JS you can
dynamically change the state of the page.
Have you got any idea how the JS code is related to the HTML
code of the page and the objects on it?
Changing the page
As we remember from the beginning of the class, in JS you can
dynamically change the state of the page. JavaScript code is
linked to the HTML code of the page through the DOM tree.
DOM — Document Object Model — is the Object Model Of The
Document.
DOM tree
By default, when loading a page, the browser builds a DOM tree
with all the page elements, their contents, attributes and
properties. Each node of the tree is an object reflecting a
specific element from the page.
DOM tree, example
document

<!DOCTYPE html>
<html>
html
<head>
<meta charset='UTF-8'>
<title>DOM tree</title>
</head>
<body> head body
<div class='container'>
<h2>List of products</h2>
<ul>
<li>Indoor cactus</li> meta title .container
<li>Garden cactus</li>
<li>Small cactus</li>
<li>Pink cactus</li>
</ul> ul h2
</div>
</body>
</html>
li li li li
DOM tree
Before changing an element, the browser must first locate it
among other DOM objects. So you should first specify which
element to look for. The plan is as follows:

1. Specifying the selector of the desired element.

2. JavaScript goes through the DOM tree from top to bottom and
searches for the desired object.
3. We get the DOM object and change it.
4. The changes are displayed on the page.
Search by selector
The command that allows you to get an object from a page is
querySelector. The search must be started from the document
root element:

let item = document.querySelector(<selector>)

As a result of this command, the item variable will contain

an object from the page found by the specified selector,
which we can work with.
Search by selector

The search can be carried out by the selector of a tag or class:

<h1>How do you like querySelector?</h1>

<p class="red">Here is the red text</p>

let heading = document.querySelector('h1')

let item = document.querySelector('.red')

Search by selector

There may be several elements on the page with the same

selector. In this case, the querySelector command will return
the first matching element.
Search by selector

There may be several elements on the page with the same

selector. In this case, the querySelector command will return
the first matching element.

How do we give the browser a certain understanding of which

of the elements we need?
Search by selector

If there are several elements with the same selector, you can
search not across the entire tree, but only within a specific
element (among its descendants).

<p>First paragraph</p> let first = document.querySelector('p')

<div class="container"> let container =
<p>Second paragraph</p> document.querySelector('.container')
</div>
let second = container.querySelector('p')
Search by selector

<p>First paragraph</p> let first = document.querySelector('p')

<div class="container"> let container =
<p>Second paragraph</p> document.querySelector('.container')
</div>
let second = container.querySelector('p')

Searching among the descendants

of .container
Changing the elements
Now that the variables contain mutable objects, let's try to do
something interesting with them!

let first = document.querySelector('p')

let container = document.querySelector('.container')
let second = container.querySelector('p')

first.innerHTML = 'Now there's another text'

second.style.color = 'red'
Changing the elements
Changing the content
of the element to a
Refer to the element specific string

first.innerHTML = 'Now there's another text'

Refer to the content of the

element

Note: the += operator also works here — the new line will be added to the old content.
Changing the elements

Specify which style we

Refer to the element want to change

second.style.color = 'red'

Set the style

Now lets turn to value
the styles of the
element
Result
<p>First paragraph</p> let first = document.querySelector('p')
<div class="container"> let container =
<p>Second paragraph</p> document.querySelector('.container')
</div> let second = container.querySelector('p')
first.innerHTML = 'Now there's another text'
second.style.color = 'red'

Before: After:
First paragraph Now there’s another text
Second paragraph Second paragraph
Other styles
You can change any styles, and all of them are referred to just
like in CSS. The exception is properties that in CSS have a dash in
the name. For example, font-size or margin-top:

second.style.fontSize = '20px'
second.style.marginTop = '20px'

That's it!
Pinning
● How do you get an element by its class?
● Is it possible to get an element by it's tag?
● Which of the elements will be obtained if there are several
elements with the specified selector?
● Is it possible to change the style of an object?
● Which command allows you to change the contents of an
object?