Introduction to JavaScript

What is JavaScript?

JavaScript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.

Javascript also being used in server-side programming, game development and the creation of desktop and mobile applications.

What is ECMAScript?

ECMAScript is a subset of Javascript. Javascript is basically ECMAScript at it's core but builds upon it.

Languages such as ActionScript, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine.

The history is, Brendan Eich created Mocha which became LiveScript, and later JavaScript. Netscape presented Javascript to Ecma, which makes standards and it was renamed to ECMA-262 aka ECMAScript.

JavaScript possibilities

  • Visual effects (animation)
  • Simple calculations
  • User data validation
  • User data manipulation
  • Data storage (cookies/LocalStorage)
  • Dynamicaly change page structure (DHTML)
  • Get data from server (AJAX)

JS file and JS block

  • JavaScript block
  • JavaScript file
<script>
    alert(“Hello world!”);
</script>
<script src=”script.js”></script>
<script 
       src = “somewhere.js” 
       type = “text/javascript”>
</script>

JS file and JS block

HTML markup example: 

<!Doctype html>
<html>
<head>
    <title>JS</title>
    <script src=”script2.js”></script>
</head>
<body>
    <script>
        alert(“Hello world!”)
    </script>
    <script src=”script2.js”></script>
</body>
</html>

JS file attributes

File type

<script src=”script2.js” type="text/javascript"></script>

Defer

<script src=”script2.js” defer></script>

Async

<script src=”script2.js” async></script>

JS output and debugging

For JavaScript values output you can use “console.log” or “alert” function.

console.log(123);
console.log(123, 456);
let x = 30;
console.log("the value of x is", x);
 
alert(123);
alert("the value of x is");

You can execute JS directly into console, open dev tools (F12) and go in "Console" tab

JS output and debugging

You can stop execution of JS in some particular place of code and take a look what is going on there. Open dev tools and go in 'Sources' tab

index.html

<!Doctype html>
<html>
<head>
    <script src=”script1.js”></script>
</head>
...
</html>

script1.js

Scope

In standart language:

- global

- local

In JavaScript:

- in scope page

- in scope function

a = 10; // :(

var a = 10; // es5

let a = 10; // es6, block scope
const a = 10; // es6, block scope

Type of date

  • Number
  • BigInt
  • Boolean
  • String
  • Undefined
  • Null
  • Object

Data types

  • Number
  • BigInt
  • Boolean
  • String
  • Undefined
  • Null
  • Object
0, 5, -10, 3.14
const n = 10;
or
const n = Number(10);
console.log(0);
//0
console.log(-2);
//-2
console.log(3.5);
//3.5
console.log(.75);
//.75
console.log(30000);
//30000
console.log(0xaaacc);
// 699084

Data types

  • Number
  • BigInt
  • Boolean
  • String
  • Undefined
  • Null
  • Object

В JavaScript тип «number» не может содержать числа больше, чем

Тип BigInt был добавлен в JavaScript, чтобы дать возможность работать с целыми числами произвольной длины.

Чтобы создать значение типа BigInt, необходимо добавить n в конец числового литерала:

const bigInt = 1234567890123456789012345678901234567890n;

Data types

  • Number
  • BigInt
  • Boolean
  • String
  • Undefined
  • Null
  • Object
let n = true;
or
let n = Boolean(true);
or
let n = false;

Data types

  • Number
  • BigInt
  • Boolean
  • String
  • Undefined
  • Null
  • Object
let n = 'test'; // :)
or
let n = "test"; // :(
or
let n = String('test');
let a = “First string”;
let b = ‘Second string’;
let c = a + ' and ' + b; //First string and Second string
 
let stringLength = “Hello”.length;

Data types

  • Number
  • BigInt
  • Boolean
  • String
  • Undefined
  • Null
  • Object
const n;

Data types

  • Number
  • BigInt
  • Boolean
  • String
  • Undefined
  • Null
  • Object
const n = null;

Data types

  • Number
  • Boolean
  • String
  • Undefined
  • Null
  • Object (object)
// creating
const hash = {};
const hash = {
    'ua': "Ukrain",
    'en': 'USA'
},

// using
hash['en'] = 'Ukraine';
console.log(hash['us']);

Data types

  • Number
  • Boolean
  • String
  • Undefined
  • Null
  • Object (array)
const a1 = 1;
const a2 = 'a',
const a3 = 3;

const arr = [1, 'a', 3]
// Creating Array

const a = new Array(); // :(

// or

const a = []; // :)

// using
const arr = [];
arr[0] = 10
arr[1] = 20;

// or

arr = [1, 2]

Operators

  • Unary (!, +, ...)
  • Binary (=, +, >, <, ...)
  • Ternary:
const a = (someVar1 > someVar2) ? 4 : 2;
// full form
let a = a + b;

// short form
let a += b;
// increment
a++

// decrement
a--

Recording forms

Question

let a = 4;
let b = null;

b = a++; // b - ?

b = ++a; // b - ?

Example

let i = 1;
alert( 2 * i++ ); // 2,  выполнился раньше но значение вернул старое
alert( i ); // 2

alert( 2 * i++ ); // 4
alert( i ); // 3

Comparison

Way to produce boolean values.

console.log(10 > 20);
//false
console.log(10 < 20);
//true
 
console.log(10 >= 20);
console.log(10 <= 20);
 
console.log(10 === 20);
console.log(10 !== 20);
 
console.log(10 == “10”)
//true
console.log(10 === “10”);
//false

Types conversion

String conversion:

const a = true + "test"; // "truetest"
const b = "test" + undefined; // "testundefined"
const c = 123 + ""; // "123"
const d = String(55); // "55"
const e = 123;
e = e.toString(); // "123"

Types conversion

Numerical conversion:

const a = +"123"; // 123
const b = Number("123"); // 123
const c = parseInt("123px", 10); // 123
const d = 5 + 4; // 9
const d = "5" + "4"; // '54'
const d = "5i" * "4"; // NaN

Types conversion

Logical conversion:

const a = Boolean(1); // true
const b = Boolean(0); // false
const c = !!5; // ***

The transformation to the “true / false” is a boolean context, such as if (obj), while (obj) and the application of logical operators.

Control structures

  • Branching operators
  • Cycle operators
  • Selection operators

Control structures

if (expression) {
    body;
}

Branching operators

if (expression) {
    body;
} else {
    body
}
if (expression 1) {
    body;
} else if (expression 2) {
    body
}
(expression) ? condition 1 : condition 2;

Control structures

for ([initialization]; [test]; [increment]){ 
    [statement] 
}
 
// the most common use
for (let i = 0; i < 10; i++) { 
    console.log(i); 
} 
 
console.log(i); //10
 
 
for (let i = 0; i < 10; i++) { 
    console.log(i); 
} 
 
console.log(i); //error

Cycle operators (for)

Control structures

let i = 0;
 
while (i < 10) {  
    console.log(i);  
    i++; 
}
 
console.log(i);

Cycle operators (while)

Control structures

let i = 0;
 
do {  
    console.log(i);  
    i++; 
} while (i < 10)
 
do {  
    let userName = prompt("Who are you?"); 
} while (!userName); 
 
console.log(userName);

Cycle operators (do while)

Control structures

switch (city) {
    case "Lviv" :
        console.log("Hi Lviv");
        break;
    case "Kiev" :
        console.log("Hi Kiev");
        break;
    case "Ternopil" :
        console.log("Hi Ternopil");
        break;
    default:
        console.log("Hi Unknown city");
        break; 
}

Selection operators (switch)

Array, hash and cycle for

Array

Hash

for (i = 0; i < arr.length; i++) {
    console.log(arr[i]);
};
for (key in hash) {
    console.log(hash[key]);
};

Links

  1. https://learn.javascript.ru/operators
  2. https://learn.javascript.ru/object-basics
  3. https://toddmotto.com/understanding-javascript-types-and-reliable-type-checking/
  4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
  5. https://learn.javascript.ru/debugging-chrome

js intro

By Oleg Rovenskyi

Made with Slides.com

js intro

  • 621

More from Oleg Rovenskyi