JAVASCRIPT – Создание Javascript – История стандартов EcmaScript

View Github Repository Open presentation in a new window

spetrunin

See all presentation from spetrunin

JAVASCRIPT – Создание Javascript – История стандартов EcmaScript

0 0

js-intro

On Github spetrunin / js-intro

JAVASCRIPT

Создание Javascript

  • Netscape, May, 1995 - LiveScript (позже назван JavaScript );
  • Июнь, 1996 - JScript (JavaScript от Microsoft);
  • Ноябрь, 1996 - EcmaScript
Brendan Eich

История стандартов EcmaScript

  • EcmaScript (Ноябрь 1996)
  • EcmaScript 3 (Декабрь 1999)
  • EcmaScript 4 (заброшен в 2008)
  • EcmaScript 5 (Декабрь 2008)
  • EcmaScript 6 (Июнь 2015)

Hello Word

Особенности парсера

Автоматическое добавление точек с запятой

(function(w) {
    function my(options) {
        var myArr = []

        console.log('test')
        (myArr || []).forEach(function(i) {})
        return
        {
           attr: 'something'
        }
    }
})(window)
Как будет восприниматься парсером: 
(function(w) {
    function my(options) {
        var myArr = [];// (1) <- добавлена
        // (2) Не добавлена, строка убирается
        console.log('test')(myArr || []).forEach(function(i) {});
        return;// (3) <- добавлена, закрывает return
        // Код ниже никогда не выполнится
        {
           attr: 'something'
        }; // (4) <- добавлена
    }
})(window)

Инструменты

  • Текстовый редактор
  • Браузер
  • Средства разработчика в браузере

Основы

Variables

                  var localVar = 123,
  anotherLocalVar = 345;
  unexpectedGlobalVar = 567;
/*
 * Variables in JavaScript can consist letters, numbers and symbols $ and _
 * Variables cannot be started with number
 * Variable cannot have the same name, as any Javascript reserved word
 *  - the list of reserved words
 *http://developer.mozilla.org/docs/Web/JavaScript/Reference/Reserved_Words
 */
var MY_PI = 3.14, // constant, just our agreement
    $123 = 123,  // correct
    my-var = 123, // incorrect
    3abc = 321, // incorrect
    _ = 5; // correct

Reserved Words

break          delete         function       return         typeof
case           do             if             switch         var
catch          else           in             this           void
continue       false          instanceof     throw          while
debugger       finally        new            true           with
default        for            null           try
Additionally in ES5
class     const     enum      export    extends   import    super
Additionally in Strict Mode
implements     let            private        public         yield
interface      package        protected      static

String

var newString = "My string",
       alsoNewString = 'Another string',
       usingConstructor = new String("Something else");//not recommended
                  
'Hello' + ' world' // => 'Hello world'
'abc'.indexOf('b') // => 1
'some sequence'.charAt(5) // => 's'
'hello'.length // => 5
'June,July,August'.split(',') // => ['June', 'July', 'August']
'abcde'.slice(1,3) // => 'bc'
'abcde'.slice(1, -1) // => 'bcd', !!!<IE8
'Hello world'.substr(1,4) // => 'ello'
'HeLLo WoRld'.toLowerCase() // => 'hello world'
'Hello world'.replace('l', 'g') // => "Heglo world"
'Hello world'.replace(/l/g, 'g') // => "Heggo worgd"
 String.fromCharCode(1072) // => 'a'
'азбука'.charCodeAt(0) // => 1072
'z' > 'a' // true

Number

64-bit format, standart IEEE 754
var num = 123,
    alsoANumber = new Number(567);// not recommended

 0xAA // 170 in hexadecimal
 010 // 8 in octal
 2e5 // 200000

 1/0 // Infinity
 1e1000 // Infinity
 'a' * 1 // NaN
 isNaN('abc') // true
 isFinite(123) // true if value is not NaN or Infinity

 123.45678.toFixed(2) // "123.46"
 0.1 + 0.2 // 0.30000000000000004
 parseInt('010') // 8
 parseInt('0x10') // 16
 parseInt('010', 10) // 10

Модуль Math

Math.random() //0.1099012941122055 - random number between 0 and 1

Math.ceil(3.1) // 4 - rounded upwards to the nearest integer
Math.floor(3.99) // 3 - rounded downwards to the nearest integer
Math.round(3.4) // 3 - rounds x to the nearest integer
Math.round(3.5) // 4
Math.abs(-2) // 2 - returns the absolute value of x
Math.max(x,y,z) // returns the largest argument
Math.min(x,y,z) // returns the smallest argument
Math.sqrt(3) // The square root of 3
Math.pow(2, 3) // 8 - returns the value of 2 to the power of 3

Math.sin, Math.cos, Math.tan // Trigonometric functions

Math.PI // 3.141592653589793 - Returns PI

// and many other useful functions...
Math on MDN

Boolean

Everything is true, except:
  • 0
  • null
  • ""
  • false
  • undefined
  • NaN
if (new Boolean(false)) {
      console.log('Hello');
  }
  // 'Hello'
  Boolean("") // false - better
  var a = null;
  !!a // false

Объекты

var obj = {},
     anotherObj = new Object();
obj.hello = world;
obj['123'] = 345;

obj.hello; // world
obj['123']; // 345

          
var obj = {a: 1},
     anotherObj = obj;
anotherObj.a = 3;
obj.a; // 3

Сравнение значений

0            ==   ""            // true
0            ==   "0"           // true
false        ==   "0"           // true
false        ==   undefined     // false
false        ==   null          // false
null         ==   undefined     // true
" \t\r\n"    ==   0             // true
          
0            ===   ""            // false
0            ===   "0"           // false
false        ===   "0"           // false
false        ===   undefined     // false
false        ===   null          // false
null         ===   undefined     // false
" \t\r\n"    ===   0             // false
          
{} === {};                   // false
new String('foo') === 'foo'; // false
new Number(10) === 10;       // false
var foo = {};
foo === foo;                 // true

Обзор возможностей сlient-side JavaScript

JavaScript позволяет:

  • Работать с DOM (создание/удаление элементов и изменение их свойств);
  • Перехватывать действия пользователя(клики мышки, движение курсора, набор текста и др.);
  • Показывать сообщения(alerts);
  • Устанавливать cookies;
  • Посылать http запросы;

JavaScript не может:

  • Не имеет прямого доступа к памяти и к файловой системе;
  • Нет доступа к соседним вкладкам, если они не были открыты нами;
  • Ограниченные возможности кросс-доменного доступа;

Способы использования js на клиентской стороне

<!DOCTYPE HTML>
<html>
    <head>
      <meta charset='utf-8'/>
    </head>
    <body>
        <img src="hello.png" onclick="alert('Hi')">
        <a href="ja­va­cript:void window.open('about:blank');">Open Window</a>
        <script src='http://code.jquery.com/jquery-latest.min.js'></script>
        <script>alert('Hello world');</script>
    </body>
</html>

To be continued...