Introduction to JS

class: center, middle

.title[
Front-end training
# Introduction to JS
]

---

![Alt text](../assets/img/JavaNotJS.jpg)

---

# 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)

---

# Popularity

![Alt text](../assets/img/the-most-used-programming-languages-on-stack-overflow-2013-2014-2015.png)

---

# Browsers

![Alt text](../assets/img/browsers1.jpg)

---

# Web browser engines

A web browser engine (sometimes called layout engine or rendering engine) is a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen.<br/><br/><br/>

- ***WebKit*** (Apple, KDE, Nokia,Google, RIM, Palm,Samsung,)<br/>
Chrome (28)<br/>
Safari

- ***Trident*** (Microsoft)<br/>
Internet Explorer

- ***Gecko*** (Mozilla Foundation)<br/>
Firefox

- ***Blink*** (Google, Opera Software)<br/>
Chrome 28+<br/>
Opera

---

# JavaScript engines

A JavaScript engine is a virtual machine which interprets and executes JavaScript. Although there are several uses for a JavaScript engine, it is most commonly used in web browsers.<br/><br/><br/>

- ***Spidermonkey*** (the first JavaScript engine, powered Netscape Navigator)<br/>
Firefox

- ***V8*** (open source, developed by Google)<br/>
Chrome<br/>
Node.js

- ***Chakra*** (Microsoft)<br/>
Internet Explorer 9 +

- ***JavaScriptCore*** (open source, marketed as Nitro)<br/>
Safari

---

# JS file and JS block

- JavaScript block

``` html
<script>
    alert(“Hello world!”);
</script>

```
- JavaScript file

``` html
<script src=”script.js”></script>

```

---

# JS file and JS block

HTML markup example:

``` html
<!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

``` html
<script src=”script2.js” type="text/javascript"></script>
<script src=”script2.js” type="application/javascript;version=1.7"></script>

```

Defer

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

```

Async

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

```

---

# JS in tag attribute

- You can add JS code to tag attribute if you really want it

``` html

<a href="#" onclick="alert('1');">Show me a number</a>

```

---

# Expressions and statements

A fragment of code that produces a value is called an expression. If an expression corresponds to a
sentence fragment, a statement, in JavaScript, corresponds to a full sentence in a human language. A
program is simply a list of statements.

<pre class="brush: jscript">
// expression
2-1
true

// statement
var a = 5 + 8;
!false;
</pre>

---

# JS output

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

<pre class="brush: jscript">
console.log(123);
console.log(123, 456);
var x = 30;
console.log("the value of x is", x);

alert(123);
alert("the value of x is");
</pre>

---

# Variables

To catch and hold values, JavaScript provides a thing called a variable. A variable always has a name,
and it can point at a value, holding on to it.

<pre class="brush: jscript">
var a;

var c, b, myVariable;

var _x = 10, $z = 20, myVariable = 30;

var myVariable1 = 10,
    myVariable2 = 20,
    myVariable3 = 30;

// myvariable2 != myVariable2
</pre>

ES6

<pre class="brush: jscript">
let a;

let c, b, myVariable;

...
</pre>

---

# Keywords and reserved words

Names that have a special meaning, such as var, while, and for may not be used as variable
names. These are called keywords. There are also a number of words which are 'reserved for use' in
future versions of JavaScript.

<pre class="brush: jscript">
break case catch continue debugger default delete
do else false finally for function if implements
in instanceof interface let new null package private
protected public return static switch throw true
try typeof var void while with yield this
</pre>

---
# Primitive data types

- Boolean
- String
- Number
- Underfined
- Null

<pre class="brush: jscript">
var a; //undefined
var b = null; //null
var c = true; //boolean
var d = 'test'; //string
var e = 10; //number

//typeof bug:
alert(typeof null); // "object"
</pre>

---
# Operators

- Unary (!, +, ...)
- Binary (=, +, >, <, ...)
- Ternary:

<pre class="brush: jscript">
var a = (someVar1 > someVar2) ? 4 : 2;
</pre>

---

# Number

<pre class="brush: jscript">
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
console.log(0472);
// 314
console.log(03248);
// 3248
console.log(03248);
// 3248
console.log(1.2e3);
//1200
</pre>

---

# Number operators

<pre class="brush: jscript">
console.log(100 + 4 * 11 / 2 - 1);
//121

var i = 20;
console.log(++i);
//21
console.log(i);
//21
console.log(i++);
//21
console.log(i);
//20

var x = 25;
x += 20; //(x = x + 20);
console.log(x);
//45

console.log(5 / 0);
//Infinity
console.log(0 / 0);
//NaN
</pre>

---

# String

Strings are used to represent text. They are written by enclosing their content in quotes:

<pre class="brush: jscript">
var a = “First string”;
var b = ‘Second string’;
var c = “Some ‘interest’ string”;

var stringLength = “Hello”.length;

var complexString = “Some \”complex \” string”
</pre>

---

# Boolean

Often, you will need a value that simply distinguishes between two possiblities, like “yes” and “no”, or
“on” and “off”. For this, JavaScript has a boolean type, which has just two values: true and false (which
are written simply as those words).

<pre class="brush: jscript">
// Variables with boolean data type
var a = true;
var b = false;

// Boolean operators
console.log(a && b);
console.log(a || b);

console.log(!a)
console.log(!b);
</pre>

---

# Comparisons

Way to produce boolean values.

<pre class="brush: jscript">
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
</pre>

---

# Types conversion

***String conversion:***

<pre class="brush: jscript">
var a = true + "test"; // "truetest"
var b = "test" + undefined; // "testundefined"
var c = 123 + ""; // "123"
var d = String(55); // "55"
var e = 123;
e = e.toString(); // "123"
</pre>

---

# Types conversion

***Numerical conversion:***

<pre class="brush: jscript">
var a = +"123"; // 123
var b = Number("123"); // 123
var c = parseInt("123px", 10); // 123
var d = "5" * "4"; // ***

</pre>

.demo1[
<table class="table-demo">   
    <thead>
        <tr>
            <th><em>value</em></th>
            <th><em>convert to</em></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>undefined</td>
            <td>NaN</td>
        </tr>
        <tr>
            <td>null</td>
            <td>0</td>
        </tr>
         <tr>
            <td>true/false</td>
            <td>1/0</td>
        </tr>
         <tr>
            <td>String</td>
            <td>convert to string by special rules</td>
        </tr>
    </tbody>
</table>
]

.table-demo {
        text-align: left;
        width: 100%;
        border: #ccc solid 1px;
        border-collapse: collapse;
    }
    .table-demo th,
    .table-demo td {
        padding: 5px;
        border: 1px solid #ccc;
    }
    .demo1.table-demo th {
        font-weight: bold;
    }

</style>

---

# Types conversion

***Logical conversion:***<br/>
The transformation to the “true / false” is a boolean context, such as if (obj), while (obj) and the
application of logical operators.

<pre class="brush: jscript">
var a = Boolean(1); // true
var b = Boolean(0); // false
var c = !!5; // ***
</pre>

.demo1[
<table class="table-demo">   
    <thead>
        <tr>
            <th><em>value</em></th>
            <th><em>convert to</em></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>undefined, null</td>
            <td>false</td>
        </tr>
        <tr>
            <td>Number</td>
            <td>all true, 0 - false, NaN - false</td>
        </tr>
         <tr>
            <td>String</td>
            <td>all true, empty string "" — false</td>
        </tr>
         <tr>
            <td>Object</td>
            <td>always true</td>
        </tr>
    </tbody>
</table>

]

---

class: center, middle

##Thanks
##The end