Основы JavaScript

Ctrl + Shift + I or F12 to open the Dev Tools

alert("Hello World!")

// is a comment

2**4 is 16

10/2
5

15 % 14
1
6%2
0

clear() - to clear the console //STRINGS "Django is cool"
"Django"+" is super cool"
"Django is super cool"

"django".length
6

"x x".length
3

"hello \n start a new line"
"hello
start a new line"

"hello \t give me a tab"
"hello    give me a tab"

"hello \"quotes\" "
"hello "quotes" "

"hello \" jelly"
"hello " jelly"

"hello"[0]
"h"

Strings

"hello"[4]
"o"

"look at the dog"[12]
"d"

Variables

//VARIABLES

// let varName = value;

let bankAccount = 100;

bankAccount
100

let deposit = 50;

let total = bankAccount + deposit

total
150

let greeting = "Welcome back: ";

let name = "Andrei";

alert(greeting+name);

let myVariable
undefined

let bonus = null;
undefined

Some methods

alert("Hey!")
undefined

console.log("Hey I am in the console");
Hey I am in the console

prompt("Enter something")
"I type some text here"

let age = prompt("Enter your age: ")
undefined

age
"111"

Connecting JavaScript to HTML

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

Inside the script file:

alert("Welcome to www.eth1.ru");

Ibs to kg

Скрипт

let weightInIbs = prompt("What is the weight in pounds?"); let weightInKg; weightInKg = weightInIbs * 0.454; alert("It is "+weightInKg+" kg"); console.log("Conversion completed"); Проверить здесь

Operators

true
true

false
false

3>2
true

2>3
false

2>2
false

2 >= 2
true

1 <= 3
true

2 == 2
true

"www.heihei.ru" == "www.heihei.ru"
true

"2" == 2
true

"2" === 2
false

5 !== "5"
true

5 != "5"
false

true == 1;
true

true === 1;
false

false == 0
true

false === 0
false

null == undefined
true

null === undefined
false

NaN == Nan
false

Logical operators

1 === 1
true

2 === 2
true


//AND
undefined

1 === 1 && 2 === 2
true

1===1 && 2===2 && 1===2
false

//OR
undefined

1 === 2 || 1 === 1
true

//NOT
undefined

(1===1)
true

!(1===1)
false

!!(1===1)
true

!!!!!(1===1)
false

Control Flow

IF statement

if (condition){
//Execute some Code
}
else if (condition two){
//Execute some other Code
}
else{
//Execute some backup Code
}

Example 1

let id == 100; console.log(id === 100 ? 'CORRECT' : 'INCORRECT')

Example 1

let hot = false
let temp = 60


if (temp>80){
hot=true
}
console.log(hot)

Example 2

let hot = false
let temp = 100


if (temp>80){
console.log("Hot Outside!");
}
else if (temp <=89 && temp >=50) {
console.log(Average temp Outside");

}
else if (temp < 50 && temp >=32) {
console.log("Its pretty cold out!");
}
else {
console.log("Its very cold out!"}

While Loop

while (condition){
// Execute some code while
// this condition is true
}

Example 1

let x = 0; while (x < 5) { console.log("x is currently: " + x); console.log("x is still less than 5, adding 1 to x"); x = x + 1; }

Example 2

let x = 0; while (x < 5) { console.log("x is currently: " + x); if (x === 3) { console.log("X IS EQUAL TO THREE!"); break; } console.log("x is still less than 5, adding 1 to x"); x = x + 1; }

Example 3

// Write a while Loop that prints out // only the even numbers from 1 to 10 let num = 1; while (num < 11) { if (num % 2 === 0) { console.log(num); } num = num + 1; }

For Loops

For Loops allow you to continually execute code a specific number of times.

Javascript has three types of For Loops:

For - loops throught a number of times
For/In - loops through a JS object
For/of - used with arrays

A quick note, previously we used the notation: num = num +1
num += 1
num++
These are all the same

For Loop Syntaxis

for (statement1; statement2; statement3) { // Execute some code } Statement 1 is executed before the loop(the code block) starts. for(let i = 0; statement2; statement3) { // Execute some code } Statement 2 defines the condition for running the loop for (let i = 0; i < 5; statement3) { // Execute some code }

Example 1

for (let i = 0; i < 5; i++) { console.log("Number is " + i); }

Example 2

let word = "ABCDEFGHIJK" for (let i = 0; i < word.length; i++) { console.log(word[i]); }

Example 3

let word = "ABABABABAB" for (let i = 0; i < word.length; i = i + 2) { console.log(word[i]); }

Spy Test

let LastName = prompt("Hello, please enter our Last Name"); console.log(LastName); let FirstName = prompt("Hello, please enter our First Name"); console.log(FirstName); let Age = prompt("Hello, please enter your Age"); console.log(Age); let Height = prompt("How tall are you?"); console.log(Height); let Pet = prompt("What is your pets name"); console.log(Pet); alert("Thank you so much for the information."); let nameCond = null let ageCond = null let heightCond = null let petCond = null if (LastName[0] === FirstName[0]) { nameCond = true; } else { nameCond = false; } if (Age < 30 && Age > 20) { ageCond = true; } else { ageCond = false; } if (Height > 170) { heightCond = true; } else { heightCond = false; } if (Pet[Pet.length - 1] === "y") { petCond = true; } else { petCond = false; } if (nameCond && ageCond && heightCond && petCond) { // My secret message console.log("Welcome Comrade! Youve passed the Spy Test") }else{ console.log("Sorry, nothing to see here.") }

Ошибки

Uncaught TypeError: Cannot read property 'textContent' of undefined

Такая ошибка может появиться по нескольким причинам. Самая простая - Вы подключили скрипт раньше чем на странице загрузились элементы, которые Вы выделяете.

Решение - вставить скрипт в конец страницы.

Uncaught SyntaxError: Unexpected token '<'

Скорее всего неправильно подключен скрипт. Путь указан, а самого скрипта там нет. Генерируется страница с ошибкой

В консоли браузера скорее всего есть упоминание страницы обработчика 404 ошибки

Например: VM1515 404.php

Цикл forEach

const array1 = ['a', 'b', 'c']; array1.forEach((element) => console.log(element));

a b c

Автор статьи: Андрей Олегович