JavaScript Intro

414 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
414
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript Intro

  1. 1. JavaScript Introпожалуй начать стоит именно с этого
  2. 2. Немного истории (Brendan Eich)JS был обязан «выглядеть как Java», только Считайте, что JavaScript (пожалуйста, толькопоменьше, быть эдаким младшим братом- не «JScript») спас вас от VBScript.тупицей для Java. Кроме того, он долженбыл быть написан за 10 дней, а иначе мы бы Простите, времени было мало для того,имели что-то похуже JS. чтобы сделать правильную оптимизацию хвостовой рекурсии. 10 дней почти без сна,В то время мы должны были двигаться очень чтобы сделать JS с чистого листа, заставитьбыстро, т.к. знали, что Microsoft идет за его «выглядеть как Java» (я сделал, чтобы оннами. выглядел как C), и тайком протащить туда его спасительные фишки: first class functions (замыкания сделал позже, но они были10 дней на то, чтобы сделать лексер, парсер, частью плана сразу) и прототипы (примернокомпилятор в байткод (bytecode emitter), как в языке Self).интерпретатор, встроенные классы идекомпилятор. Помощь была только сфайлом jsdate.c — от Ken Smith из Netscape(который, по нашему излишнеоптимистичному соглашению, склонировалjava.util.Date — Y2K баги и т.д. тупица...). Ill do better in the next life.
  3. 3. Еще чуть-чуть«Самый неправильно понятый язык программирования в мире стал самымпопулярным в мире языком программирования» Дуглас КрокфордПервоначально язык назывался LiveScript и предназначался как дляпрограммирования на стороне клиента, так и для программирования настороне сервера (там он должен был называться LiveWire).На синтаксис оказали влияние языки Си и Java, и, поскольку Java в товремя было модным словом, 4 декабря 1995 года LiveScriptпереименовали в JavaScript, получив соответствующую лицензию у Sun.
  4. 4. и еще..Анонс JavaScript со стороны представителей Netscape и Sun состоялсянакануне выпуска второй бета-версии Netscape Navigator. В нёмдекларируется, что 28 лидирующих ИТ-компаний выразили намерениеиспользовать в своих будущих продуктах JavaScript как объектныйскриптовый язык с открытым стандартом.По инициативе компании Netscape была проведена стандартизация языкаассоциацией ECMA. Стандартизированная версия имеет названиеECMAScript, описывается стандартом ECMA-262. Первой версииспецификации соответствовал JavaScript версии 1.1, а также языки JScriptи ScriptEasy.
  5. 5. будет ли видна a в коде исполняющемся вконтексте глобального объекта?a) c)a = 1; function(){ a = 1; }b)var a = 1; d) var b = function (){ var a = 1; }
  6. 6. будет ли видна a в коде исполняющемся вконтексте глобального объекта?a) c)a = 1; function(){Да. a = 1; }b) Да.var a = 1;Да. d) var b = function (){ var a = 1; } Нет
  7. 7. что выведется в консоль?a) c)function a(){ var a = ( function(b){ return b; } )(“hello”); return “hello”; console.log(a);}console.log(a); d) var a = (function(b){ return b;})(“hello”);b) console.log( a() );var a = function(){ return “hello” };console.log(a());
  8. 8. что выведется в консоль?a) c)function a(){ var a = ( function(b){ return b; } )(“hello”); return “hello”; console.log(a);} Выведется “hello”console.log(a);Выведется код функции “a”. То же самое что d)и при вызрове a.toString(); var a = (function(b){ return b;})(“hello”); console.log( a() );b) Вызовет ошибку string не функция.var a = function(){ return “hello” };console.log(a());Выведется “hello”
  9. 9. что выведется в консоль привызове abc(); ?var a = 234;function abc(){ console.log(typeof a); var a = ‘line’;}
  10. 10. что выведется в консоль привызове abc(); ?var a = 234;function abc(){ console.log(typeof a); var a = ‘line’;}Выведется undefined.
  11. 11. почему этот код не работает таккак от него “ожидают”?function User(name) { this.name = name;};var j = User(Jack);alert(j.name);(ожидают что j отработает как конструктор)
  12. 12. почему этот код не работает таккак от него “ожидают”?function User(name) { this.name = name;};var j = User(Jack);alert(j.name);Ожидают от него что в j окажется объектомсоздаваемый контруктором User, но так как User вызванбез new, а User ничего не возвращает j будетundefined, а обращение к j.name вызовет TypeError.
  13. 13. что выведет код? Почему?Object.prototype.hello = {};var a = [1,2,3];for ( var number in a ) { alert( number );}
  14. 14. что выведет код? Почему?Object.prototype.hello = {};var a = [1,2,3];for ( var number in a ) { alert( number );}Код поочередно выведет четыре сообщения, в первом - 0, во втором - 1, втретьем - 2 и в четвертом выведет hello. Это происходит потому что вJavaScript массив это также объект, а for .. in выражение проходит повсем свойствам объекта. Таким свойством является и hello. В number унас помещаются названия свойств при обходе объекта.
  15. 15. что выведет код? Почему?(function() { var pack = Jack; })(); alert(typeof pack);
  16. 16. что выведет код? Почему?(function() { var pack = Jack; })(); alert(typeof pack);Выведет undefined, т.к. pack не определен, т.к.определение pack происходит локально, и никак невлияет на глобальный объект, в контексте которого мывызываем alert();
  17. 17. что выведет код? Почему?function SuperConstructor() { this.x = 20; this.getX = function() { return this.x; }}var a = new SuperConstructor();var f = a.getX;console.log(f());
  18. 18. что выведет код? Почему?function SuperConstructor() { this.x = 20; this.getX = function() { return this.x; }}var a = new SuperConstructor();var f = a.getX;console.log(f());f выполняется в глобальном контексте, а не контексте объекта созданного конструкторомSuperConstructor, но f это ссылка на a.getX, поэтому вернет this.x, что тоже самое что и f.x,который undefined.
  19. 19. а этот?x = 5;function SuperConstructor() { this.x = 20; this.getX = function() { return this.x; }}var a = new SuperConstructor();var f = a.getX;console.log(f());
  20. 20. что выведет код? Почему?x=[];for (var i = 0; i < 3; ++i) { var j = i; x.push(function () { return j; });}console.log(x[0](), x[1](), x[2]());
  21. 21. что выведет код? Почему?x=[];for (var i = 0; i < 3; ++i) { var j = i; x.push(function () { return j; });}console.log(x[0](), x[1](), x[2]());В x будет три элемента, все они будут функциямивозвращающими 2, т.к. вызываются они в когда j = 2
  22. 22. что делать?x = [];for (var i = 0; i < 3; ++i){ (function (new_i) { x.push(function () { return new_i; }); })(i);}
  23. 23. что делать?x = [];for (var i = 0; i < 3; ++i){ (function (new_i) { x.push(function () { return new_i; }); })(i);}т.о. в x будет три функции каждая изкоторых будет возвращать свой индекс в x.
  24. 24. что выведет код? Почему?for(var i=0;i<5;i++) { setTimeout(function(){ alert(i); }, 0);}
  25. 25. что выведет код? Почему?for(var i=0;i<5;i++) { setTimeout(function(){ alert(i); }, 0);}JavaScript-код исполняется в одном потоке (event loop, UI thread).setTimeout, откладывает выполнение функции на 0 мс. НО. Событиетаймаута произойдет только тогда, когда основной поток освободится -цикл пройдет полностью. Код выведет 5 пятёрок. Почему пятёрок? :)
  26. 26. где применим JavaScript?На сервереНа клиенте
  27. 27. Что будет дальше с JavaScript?Новые спецификации языка - новые языковыеструктуры (ES6)Новые спецификации от W3C - новые возможности(HTML5, Canvas, Video, WebIntents, WebWorkers,WebSockets , WebDriver, WebAudio, WebGL, NotificationsAPI etc)Новые продукты - большее распространение, новыевозможности
  28. 28. Спасибо.Дальше - вопросы иопределение тем будущихмитапов - больше :)оптимизация, поддержка, новьё etc rudevich@gmail.com, skype:arudevich

×