JavaScript Crash Course

Введення в JavaScript

1

$ whoami

Іващук Інна Миколаївна

Senior Software Engineer

JS developer, music fan, movie-dependent and Star Wars fan 🤓

May the Force be with you!

6 років із GlobalLogic

та майже 8 років у веб-розробці

спікерка та менторка в GlobalLogic JS community

спікерка та член програмного комітету конференції Fwdays JavaScript

 

Agenda:

  1. Web Development
  2. Що таке JavaScript
  3. Типи даних
  4. Змінні (ідентифікатори)
  5. Первірка типів даних
  6. Коментарі в коді  та виведення результату
  7. Оператори присвоєння та порівняння
  8. Логічні та оператори типів. Побітові оператори

Web Development

Web Development - це робота, пов'язана з розробкою веб -сайту для Інтернету (World Wide Web) або інтрамережі (приватної мережі).

А як це пов'язано із JavaScript?

Дозвольте мені представити 3 основні технології, які використовуються для створення веб додатків - це HTML, CSS, та JavaScript

HTML: структура веб додатку

Мова розмітки гіпертексту або HTML - це стандартна мова розмітки для документів, призначених для відображення у веб -браузері. Їй можуть допомагати такі технології, як каскадні таблиці стилів (CSS) та мови сценаріїв, такі як JavaScript.

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to my website</title>
</head>
<body>
    <section class="home">
        That's home section
    </section>
    <section class="about">
        In this section, I can tell something about my website
    </section>
</body>

CSS: стилі і кольори веб додатку(сайту)

Cascading Style Sheets (CSS)  це мова таблиці стилів, яка використовується для опису презентації документа, написаного мовою розмітки, наприклад HTML.

CSS

body {
    margin: 20px;
    padding: 0;
    background: "aquamarine";
}

.home {
    color: white
}

.about {
    color: white
    background: #333;
}

JavaScript: логіка і інтерактивність

JavaScript  часто скорочено як JS - це мова програмування, що відповідає специфікації ECMAScript. JS - це легка, інтерпретована або своєчасно компільована мова програмування, основними елементами якої являються функції.

JavaScript

window.onload = function() {
  alert("Welcome to my website");
  
  
  function greetings(name) {
    return `Hello, ${name}!`;    
  }
  
  function farewell(name) {
    return `Godbye, ${name}!`;    
  }
  
}

HTML

CSS

JavaScript

Використання JavaScript

Websites

Web Applications

Presentations

Server applications

IoT

Games

Art

Smartwatch Apps

Mobile Apps

Flying Robots

Testing

....і багато інших

Цікаві приклади

JS Interactive Art

https://www.sbs.com.au/theboat/

Що таке JavaScript

JavaScript — це мультапарадигменна, прототипно-орієнтована мова програмування. В відповідності до стандартів ECMA-262 мова офіційно називається ECMAScript.

JavaScript розроблений в компанії Netscape і так як Java на той момент набувала популярності, звідси і подібність назви

 

Що таке JavaScript?

Брендан Ейх

      Брендан найбільш відомий як співробітник Netscape та Mozilla. Він прийшов працювати в Netscape Communications Corporation в квітні 1995, де розробляв JavaScript (колишня назва — Mocha, згодом — LiveScript) для веб-браузера Netscape Navigator. Пізніше, в 1998 році, обіймаючи посаду головного архітектора, брав участь у заснуванні mozilla.org. Коли в липні 2003 року AOL закрили проект браузера Netscape, Айк долучився до розвитку Mozilla Foundation.

 

Браузерний JavaScript

      Інтерпретатор JavaScript, яким обладнані браузери, дозволяє виконувати клієнтські сценарії (скріпти), що завантажуються одночасно із сторінкою із сервера, а також виконувати подальшу комунікацію за допомогою асинхронних запитів

 

Node.js або серверний JavaScript

Node.js — це JavaScript–оточення побудоване на V8 JavaScript engine.

Даний движок дозволяє створювати серверні додатки, а також виконувати інші операції, в тому числі - написання тестів.

Типи даних

Типи структур даних

Типи даних в JavaScript

Data Types

Primitive

Non-Primitive

null

undefined

number

boolean

string

symbol

Object

Типи даних в JavaScript

Дані об'єктного типу

Змінні (ідентифікатори)

Змінна - в програмуванні це буквене позначення комірок пам'яті, в якій зберігається деяке значення певного типу

Правила створення змінних

Загальні правила побудови імен для змінних (унікальні ідентифікатори):

  • можуть містити букви, цифри, підкреслення та знаки долара.

  • також можуть починатися з $ і _ (але це дещо застарілий підхід)

  • чутливі до регістру (y та Y - різні змінні)

  • зарезервовані слова (ключові слова JavaScript) не можуть бути використані як імена

const name = "Myapp";

var age = 101;

let counter = 1;

const appVersion = "1.0.0";

const result_1 = 1001;

const MATH_PI = 3.14;

Приклади:

var one = 1;
var ONE = 1;

var $second = 2;
var text = “text”;

var centerX = 0,0;
var sum = one + $second;
var some_function = function() { console.log("Hello world!") };
var isTrue = true;

Декларація змінних в ES6

const one = 1;
const ONE = 1;

let $second = 2;
let text = "text"; // can be overwritten

text = "new text";

// we will get the error -
// Uncaught TypeError: Assignment to constant variable
one = 2;

const centerX = 0,0;
const sum = one + $second;
const some_function = function() { console.log("Hello world!") };
const isTrue = true;

      ES2015 представив два важливих нових ключових слова JavaScript: let і const. Ці два ключових слова містять змінні (і константи) блочної області видимості в JavaScript. До ES2015 JavaScript мав лише два види: глобальна область видимості та межі функцій.

Перевірки типів даних

Одним із способів перевірити до якого типу даних відноситься значення - це typeof.

typeof and constructor 

const num = 42;
const text = "JavaScript";
const enabled = true;

typeof num; // returns "number"
typeof text; // returns "string"
typeof enabled;	// returns "boolean"

function sayHi(name) {
  return "Hello, " + name + "!";
}

typeof sayHi; // returns "function"

Первірка даних з використанням операторів порівняння

== vs ===

const num = 1;
const num2 = "1";


num == num2 	// Returns true
num === num2 	// Returns false, as data types are different



const str = "Some text";
const str2 = "Some text 2";

str == str2 	// Returns false
str === str2 	// Returns false

Коментарі в коді та виведення результату

// I can add a comment like that 
const name = "Tony Stark"; 

/*
 * I can add a comment also like that
 * to have multilines comment
 * 
 * */
const magicNumber = 42;

/* 
 * Code down below is function that should find a sum of 2 elements
 * */

const sum = (a, b) => a + b;

Коментарі в коді

// I can add a comment like that 
const name = "Tony Stark"; 

// This function accepts 2 arguments
function sum(a, b) {
  return a + b;
}

Однорядкові:

/*
 * I can add a comment also like that to have multilines comment
 * 
 * */
const magicNumber = 42;

/* 
 * Code down below is function that should find a sum of 2 elements
 * */
const sum = (a, b) => a + b;

Багаторядкові:

// TO print a result we can use
const a = 10;
const b = 30;
const sum = a + b;

console.log(a + b);

console.log("sum of a and b is equal to ", a + b);
// also sum variable can be printed
console.log("sum of a and b is equal to ", sum);

// info
console.info("I can print some information");
// error
console.error("I can inform about an error");

Виведення результату

Різновиди console

console.log()

console.warn()

console.error()

Виводить повідомлення про помилку

Виводить попереджувальне повідомлення

Для загального виведення інформації

console.dir()

Відображає інтерактивний список властивостей зазначеного об’єкта JavaScript.

console.debug()

Виводить на консоль повідомлення з налагодженням на рівні debug.

Оператори присвоєння та порівняння

Оператори присвоєння в JavaScript

Використовуються, коли потрібно змінній певне значення. З лівого боку назва змінною, а з правого боку - значення. 

Приклади:

const MATH_PI = 3.14;
const radius = 10;
const result = MATH_PI * radius * radius;

// shorter way to change a value;
let result1 = 10 * 10;
result1 *= MATH_PI;

// decrease a value
const a = 10;
const b = 20;
let c = 40;

c = c - a;
// the same operation, shorter way
c -= a;

c = c + b;
// the same operation, shorter way
c+= b;
// strings operations
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;

Оператори порівняння в JavaScript

Використовуються, коли потрібно порівняти значення змінною або змінних

Приклади:

const MATH_PI = 3.14;
const radius = 10;
const name = "Robert";

// comparison
console.log(MATH_PI === 3.14);

console.log(name === "Steven");

// numbers comparison
console.log(radius > 10);
console.log(radius >= 10);
console.log(radius < 100);
console.log(radius !== 0);

Логічні та побітові оператори

Логічні оператори в JavaScript

Використовуються, коли потрібно порівняти значення змінних, або виконати операцію якщо хоча б частина умови вірна

Приклади:

const MATH_PI = 3.14;
const r = 10;
const name = "Robert";


console.log(name !== "Steven");

// usind 'and'
const res = MATH_PI === 3.14 && radius >= 10
	? MATH_PI * (2 * r)
	: MATH_PI * (r * r);
      
console.log("result ", res);

// using  'not' and 'or'
const res2 = radius !== 0 || radius < 1000
	? MATH_PI * (2 * r)
	: MATH_PI * (r * r);
      
console.log("result 2 ", res2);

Побітові оператори в JavaScript

Побітові оператори працюють з 32-бітовими числами.

Будь-який числовий операнд в операції перетворюється на 32-розрядне число. Результат перетворюється назад у число JavaScript.

Q & A

3 JavaScript Crash Course

By Inna Ivashchuk

3 JavaScript Crash Course

  • 579

More from Inna Ivashchuk