JavaScript basics
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
JS
Javascript
Is a high level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web
What is JavaScript
- JavaScript is a Scripting Language
- A scripting language is a lightweight programming language.
- JavaScript is programming code that can be inserted into HTML pages.
- JavaScript inserted into HTML pages, can be executed by all modern web browsers.
About
- Created by Brendan Eich for Netscape Navigator in only ten days!
- Mocha ⇒ LiveScript ⇒ JavaScript ⇒ ECMAScript
- Influenced by:
- C/Java ⇒ Syntax
- Scheme ⇒ Functional Programming
- Self ⇒ Prototype inheritance
- Adopted by Microsoft with the name JS for IE 3.0 ...
- First browser wars!
- Standarized by ECMA International.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1757565/Brendan_Eich_Mozilla_Foundation_official_photo_1_.jpg)
Why JavaScript?
- The name suggests that it should be similar to Java, but it is a different beast
- The language was created too quickly and has errors that many programmers do not care to avoid
- Still exists the idea that serious programming is done on the server and many programmers do not bother to learn JavaScript seriously
- It supports multiple paradigms: imperative or functional
- It is very flexible and expressive
- There have been significant improvements in performance
- The language is improving with the latest versions
- Whenever there are better books, tools, libraries, etc
JavaScript is a misunderstood language
But in JavaScript there are great ideas too
WHAT CAN I DO WITH JAVASCRIPT?
- Respond to the users actions (click, hover over etc.)
- Change HTML&CSS properties of elements on the page
- Sophisticated animations
- Dynamically get new data from the server without reloading the entire page (AJAX)
Basics
- JavaScript is case sensitive
- Spaces do not matter
- Statements end with semi-columns (;)
- No strict data types
Comments
Commentaries are not for the computer but for the humans. It helps them to understand the code
Block (multiline)
code goes here /* comment goes here,
and here
*/
Single-line comments
code goes here //comment goes here
/*
My first program:
Hello World!
*/
var a = "Hello World!"; //Declare new variable with initial value
alert(a); //Show message window with the content of the "a" variable
Example
Variable Declaration
- Variables contain values and use the equal sign to specify their value
- Variables are created by declaration using the var command with or without an initial value state
- No need to specify a type
Declare variable without initial value:
var a;
var oneMore;
var anotherVar;
var awesomeVariable;
Declare variable with initial value:
var b = 10;
var name = "Leonardo";
var price = 10.4;
Set value to variable
- To set new value to a variable you are to use the equal sign "="
- New data overwrites the previous one
- No strict data type. It means that you can set any value with any type to a variable
//Declaration of a new variable with initial value below
var greeting = "Say hello to the new world of programming!"
var a;
a = 10; //You can set the value after the variable declaration
var name = "Raphael";
name = "Donatello"; //It will overwrites the content of the "name" variable
var age = 10;
age = "Teenager"; //No type checking
Arithmetics
Operator | Description | Example |
---|---|---|
+ | Addition | var x = 10 + 2; |
- | Subtraction | var x = 5 - 3; |
* | Multiplication | var x = 2 * 2; |
/ | Division | var x = 20 / 5; |
% | Modulus | var x = 10 % 4; |
++ | Increment | x++; |
-- | Decrement | x--; |
var a = 10;
a++;
var b = a * 2;
b = b - 1;
b--;
var c = b / 2;
c = c - a;
var x = b & 8;
//a == 10;
//a == 11;
//b == 22; a == 11;
//b == 21;
//b == 20;
//c == 10;
//c == -1;
//x = 4;
EMBEDDING JAVASCRIPT IN HTML
inner script code
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Example</h1>
<script language="javascript" type="text/javascript">
var a = "Hello World!";
alert(a);
</script>
</body>
</html>
EMBEDDING JAVASCRIPT IN HTML
External script code
index.html
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Example</h1>
<script language="javascript" type="text/javascript" src="script.js">
</script>
</body>
</html>
var a = "Hello World!";
alert(a);
script.js
EMBEDDING JAVASCRIPT IN HTML
Inline script code
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Example</h1>
<p onclick="alert('Hello World!')">Say hello</p>
</body>
</html>
I/O
JavaScript can "display" data in different ways:
- Writing into an alert box, using window.alert().
- Writing into the HTML output using document.write().
- Writing into the browser console, using console.log().
To recive data from user the simpliest way is to use window.prompt()
String
- JavaScript strings are used for storing and manipulating text
- A JavaScript string simply stores a series of characters like "John Doe"
- A string can be any text inside quotes. You can use single or double quotes
- To escape symbol use backslash \
Typeof
You can use the JavaScript typeof operator to find the type of a JavaScript variable
var a = "John";
typeof a // "string"
// Or
typeof(a) // "string"
Syntax
Boolean
A JavaScript Boolean represents one of two values: true or false.
Very often, in programming, you will need a data type that can only have one of two values, like
- YES / NO
- ON / OFF
- TRUE / FALSE
For this, JavaScript has a Boolean data type. It can only take the values true or false.
Comparison and Logical Operators
Operator | Description |
---|---|
== | equal to |
=== | equal value and equal type |
!= | not equal |
!== | not equal value or not equal type |
> | greater than |
< | less than |
>= | greater than or equal to |
<= | less than or equal to |
BOOLEAN
Conditional statements
Conditional statements are used to perform different actions based on different conditions.
Very often when you write code, you want to perform different actions for different decisions. You can use conditional statements in your code to do this.
- Use "if" to specify a block of code to be executed, if a specified condition is true
- Use "else" to specify a block of code to be executed, if the same condition is false
- Use "else if" to specify a new condition to test, if the first condition is false
- Use "switch" to specify many alternative blocks of code to be executed
The if Statement
if (condition) {
block of code to be executed if the condition is true
}
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
Example
var time = 8;
if (time < 10) {
alert("Good morning");
}
The else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}
Syntax
Example
var time = 22;
if (time < 10) {
alert("Good morning");
} else {
alert("Good evening");
}
else if Statement
Use the else statement to specify a block of code to be executed if the condition is false.
if (condition1) {
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is false and condition2 is true
} else {
block of code to be executed if the condition1 is false and condition2 is false
}
Syntax
Example
var time = 12;
if (time < 10) {
alert("Good morning");
} else if (time < 18) {
alert("Good day");
} else {
alert("Good evening");
}
Switch Statement
Use the switch statement to select one of many blocks of code to be executed.
switch (expression) {
case n:
code block
break;
case n:
code block
break;
default:
some default code block
}
Syntax
Example
var time = 10;
switch (time) {
case 10:
console.log("Good morning");
break;
case 18:
console.log("Good day");
break;
default:
console.log("Good evening");
}
CONDITIONAL STATEMENTS
While Loop
while (condition) {
code block to be executed
}
Syntax
Example
var age = 12;
while(age < 80){
age = age + 1;
}
Do While Loop
The do/while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
do {
code block to be executed
} while (condition);
Syntax
Example
var age = 12;
do {
age = age + 1;
} while(age < 80);
For Loop
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Statement 1 is executed before the loop (the code block) starts.
Statement 2 defines the condition for running the loop (the code block).
Statement 3 is executed each time after the loop (the code block) has been executed.
Syntax
Example
var age = 12;
for (var i = 0; i < 5; i++) {
age += 2;
}
Loops can execute a block of code a number of times.
Loops
Array
JavaScript arrays are used to store multiple values in a single variable.
var cars = ["Lada", "Audi", "BMW"];
var anotherCars = new Array("Volvo", "Nissan");
Create array with initial values
var array-name = [item1, item2, ...];
Syntax
Create empty array
var someArray = [];
var someAnotherArray = new Array();
Array
Access the Elements of an Array
var cars = ["Lada", "Audi", "BMW"];
//You refer to an array element by referring to the index number.
var name = cars[0]; //Lada
Adding Array Elements
var cars = ["Lada", "Audi", "BMW"];
cars.push("Volvo")
//Or
cars[3] = "Volvo";
Changing Array Element
var cars = ["Lada", "Audi", "BMW"];
cars[1] = "Nissan";
Looping Array Element
var cars = ["Lada", "Audi", "BMW"];
for(var i = 0; i < cars.length; i++){
console.log(cars[i]);
}
Array
Object
var obj = {
property: value,
property: value,
...
property: value
};
Syntax
var person = {
name: "John",
lastName: "Doe",
age: 20
}
Create object with initial values
Create empty object
var obj = {}
var person = {
name: "John",
lastName: "Doe",
age: 20
};
var who = person.name; // or var who = person["name"];
person.age = 30; // Change value
person.hasChildren = true; // Add value
Access object's data
Object
Special values
undefined
The undefined property indicates that a variable has not been assigned a value.
var a;
console.log(a); // undefined
null
In JavaScript null is "nothing". It is supposed to be something that doesn't exist.
var a = null;
console.log(a); // null
NaN
var a = "John" * 50;
console.log(a); // NaN
The NaN property represents "Not-a-Number" value. This property indicates that a value is not a legal number.
Infinity
- Infinity is a numeric value that represents positive infinity.
- -Infinity is a numeric value that represents negative infinity.
- Infinity is displayed when a number exceeds the upper limit of the floating point numbers, which is 1.797693134862315E+308.
- -Infinity is displayed when a number exceeds the lower limit of the floating point numbers, which is -1.797693134862316E+308.
SPECIAL VALUES
Function
A JavaScript function is a block of code designed to perform a particular task.
A function is executed when "something" invokes it (calls it).
function name(parameter1, parameter2, parameter3, ...) {
code to be executed
}
Syntax
Function without arguments
function myFync() {
alert("Inside function");
}
Function with arguments
function myFync(a, b, c) {
alert(a * b * c);
}
Function with arguments
function myFync(a, b) {
return a * b;
}
Call function
name(parameter1, parameter2, parameter3, ...)
Function
Home work
https://learn.javascript.ru/getting-started Введение в JS
https://learn.javascript.ru/first-steps Основы JavaScript
Class work
- Declare two variables and show them
- Write a function that can find triangle's area
- Write a function that reverse the given array using three kind of loops
- Explain the difference between ++i and i++ with example
- Write a function that checks if the given arguments is positive number or negative number or is 0
- Create a page that asks the user his name and alert it back
- Write a function that calculates factorial
THANKS FOR YOUR ATTENTION
JAVASCRIPT BASICS
JavaScript Basics
By Dima Pikulin
JavaScript Basics
- 1,084