Javascript - BioRainbow

JavaScript
(введение)
Валеев Т. Ф.
к.ф.-м.н., н.с. ИСИ СО РАН
Материалы курса:
http://biorainbow.com/~lan/CourseJS
JavaScript: The World's Most Misunderstood
Programming Language
• Название: ничего общего с Java не имеет
• Синтаксис: схожесть с Си заставляет думать, что это
процедурный язык, хотя он имеет больше общего с
функциональными языками
• Область применения: из-за распространённости в качестве
языка сценариев для веб мало кто применяет его для других
целей, хотя язык хорош для самых различных задач (node.js)
• Мнение многих о JavaScript основывается на ранних версиях
• Ранние глючные реализации языка оказали дурное влияние на
мнение о самом языке
• Огромное количество ужасных книг о JavaScript
• Множество авторов веб-страниц, пишущих на JavaScript, не
являются программистами
http://javascript.crockford.com/javascript.html (2001)
Немного истории
• JavaScript (Mocha, LiveScript) создан
Бренданом Айком (Brendan Eich).
“Ten days to implement the [Javascript] lexer, parser, bytecode emitter (which I folded into the
parser; required some code buffering to reorder things like the for(;;) loop head parts and
body), interpreter, built-in classes, and decompiler... Ten days without much sleep to build JS
from scratch, "make it look like Java" (I made it look like C), and smuggle in its saving graces:
first class functions (closures came later but were part of the plan), Self-ish prototypes (one
per instance, not many as in Self).”
• Первая публичная реализация: Netscape
Navigator 2.0B3, декабрь 1995.
• JScript — диалект от Microsoft, MSIE 3.0,
август 1996.
Полезные ссылки
•
•
•
•
•
•
•
•
Лекции Дмитрия Сошникова (русский, английский)
http://dmitrysoshnikov.com/ecmascript/ru-chapter-1-execution-contexts/
Всё о JavaScript на русском
http://javascript.ru/
Mozilla Developer Network
https://developer.mozilla.org/
Хаб «JavaScript» на Habrahabr:
http://habrahabr.ru/hub/javascript/posts/
Интерактивный учебник Eloquent JavaScript (переводят на хабре)
http://eloquentjavascript.net/contents.html
Совместимость:
http://caniuse.com/
Песочница:
http://jsfiddle.net/
Слава и деньги:
http://js1k.com/
Стандарт ECMAScript
•
•
•
•
•
•
•
Ecma International (бывшая European Computer Manufacturers Association) —
международная организация по стандартизации инфомационных и
коммуникационных технологий
Стандарт ECMA-262 (ECMAScript) — стандарт скриптовых языков
http://www.ecma-international.org/publications/standards/Ecma-262.htm
(ECMAScript 5.1 — июнь 2011)
https://people.mozilla.org/~jorendorff/es6-draft.html — черновик будущего
стандарта
Создавался с целью стандартизировать JavaScript (изначально разработанный для
Netscape 2.0) и JScript (появился в MSIE 3.0)
Разработка стандарта началась в ноябре 1996 г. Первая версия принята в июне
1997 г.
Стандарт специфицирует базовый синтаксис языка, типы данных, операции и
функции для работы с ними, конструкции языка, встроенные объекты, объектную
концепцию (prototype-oriented programming), обработку исключений.
Благодаря общности синтаксиса, объектной концепции и базовых типов данных,
взаимодействие программ на различных языках, реализующих стандарт ECMA262, происходит без особых проблем.
Совместимость, backporting — polyfill (Remy Sharp), shim
Стандарт ECMAScript
• Некоторые реализации стандарта:
– JavaScript, JScript — клиентский язык сценариев
для веб;
– WMLScript — язык сценариев для страниц WML
(WAP), диалект JavaScript
– ActionScript — язык сценариев для Adobe Flash
(изначально разработан Macromedia);
– QtScript — язык сценариев в Qt Framework
Node.js — серверный JavaScript
• JavaScript-платформа для организации сервера (не
только web)
• Используется движок V8 от Google
var http = require('http');
http.createServer(
function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
}
).listen(8000);
console.log('Server running at http://localhost:8000/');
Getting started
• Проще всего писать скрипты в HTML-файле: ( => hello.html)
<script>
document.write(“Hello World!”)
</script>
• Можно подключать внешние: ( => hello2.html)
<script type="text/javascript" src="hello.js"></script>
• Базовый ввод/вывод (не пользоваться в реальных приложениях!):
document.write, alert(<msg>), confirm(<msg>), prompt(<msg>)
var a=prompt("Enter number");
alert(a+"^2="+(a*a));
• Консоль ошибок: обычно где-то есть в браузере. Также имеются
отладчики.
• console.log — вывод в консоль ошибок. См. также
http://habrahabr.ru/post/188066/
Типы данных и операции
• JavaScript — язык со слабой неявной динамической типизацией
• Скалярные:
–
–
–
–
Число (Number): 0; 1; 0x12; 1024.2048; 1e+6; NaN; Infinity; -Infinity
Строка (String): “a”; “it’s a string\u002a\n”; ‘single quotes’
Логический (Boolean): true; false
Null (null), Undefined (undefined)
• Векторные:
– Массив (Array): [1,4,6,7,8]
– Ассоциативный массив/объект/хэш (Object): {name1: "value1",
name2: "value2"}
Объявление переменной: var a = 5; ( => var.html)
ECMAScript6: let и const
Все переменные — ссылки
Глобальное пространство имён: this для глобального контекста;
переменная window
Типы данных и операции
•
Числа:
– +, −, *, / (дробное!), %, &, |, ^ (xor), ++, *= и т. д.
– Функции в объекте Math: Math.sin(), Math.abs(), Math.floor(), Math.random() и т. д.
– isNaN(Math.log(-1)), isFinite(1/0)
•
Строки:
–
–
–
–
Конкатенация: +, += ( => string.html)
Преобразование к числу: parseInt, parseFloat, унарный плюс
Преобразование к строке: toString ( => toString.html )
String functions: методы объекта-строки
•
“test”.length, “test”.substr(2,3), “a,b,c,d”.split(“,”), “test”.match(“e”), “string”.replace(“i”, “o”) и т. д.
– Регулярные выражения: "a,b;c;d".split(new RegExp("[,;]")), "string".match(new RegExp("TR",
"i")) и т. д.
•
Логические:
– &&, ||, !
– ===, ==, !=, >=, <=, …
•
Ещё полезные вещи:
– ?:, eval, new Date(), JSON
Массивы
• Массив — объект Array
–
–
–
–
–
–
–
–
–
–
var a = new Array(“foo”, “bar”);
var a = [“foo”, “bar”];
var a = {a: "Alice", b: "Bob", c: "Cid"}; — не массив, а объект
элементы a[0], a[1], a[“a”], a.a, …
обход: for(x in a) alert(a[x]);
["foo","bar"].length — число элементов
["foo","bar"].concat(["alice","bob"]) — склеить два массива
["foo","bar"].join("/") — в строку (см. split) — быстрее, чем +=!
["foo","bar"].sort() — сортировка (как строки)
["qw","f","trew","asd"].sort(function(a,b) {return a.length-b.length})
— сортировка по произвольному условию
– Другие методы: pop(), push(), shift(), reverse(), slice(), unshift() и т. д.
– Методы ECMAScript 5: map, filter, reduce, reduceRight, every, some,
forEach, indexOf, lastIndexOf
– Методы ECMAScript 6: keys, values, entries, find, findIndex
Конструкции языка
• Ветвление и циклы
–
–
–
–
–
–
–
if(…) {…} else {…}
switch(var) {case val1: … break; case val2: … break; default: … }
for(var i=0; i<5; i++) alert(i);
for(var i in arr) alert(i+”=>”+arr[i]);
while(…) {…}
do {…} while(…)
break, continue
• Обработка исключений
– try {…} catch(err) {alert([err.fileName,err.lineNumber,err.message])}
– throw(“Something bad happened”)
• Функции
– function msg(a,b,c) {alert([a,b,c])}
– Анонимная функция (замыкание): var a = function(x,y) {return x+y} (
=> getmax.html)
Функции
•
•
•
•
•
•
•
•
•
•
Функция — объект, причём объект первого класса.
Создание функции:
function name(arg1,arg2,…) {…}
var name = function(arg1,arg2,…) {…};
var name = function internalName(arg1,arg2,…) {…};
var name = new Function(“arg1”,”arg2”,…,”function code”);
Список аргументов при вызове не обязан соответствовать; он может быть длиннее или
короче, чем в объявлении функции. Если короче, то последние аргументы будут
undefined. В любом случае все аргументы доступны в arguments.
arguments.length – число параметров
arguments.callee – текущая функция как объект (в ECMA5 устарело)
arguments.callee.caller – функция, вызвавшая текущую
arguments.callee.caller.caller – следующая функция по стеку и т. д.
function.toString – текстовое представление функции (декомпиляция) ( => caller.html )
apply & call
В каждой функции может быть this (по умолчанию глобальное пространство имён).
Длительные процессы
• Весь пользовательский JS-код выполняется в одном потоке
браузера (UI-thread), многопоточности нет
(http://jsthread.sourceforge.net/ — nice try)
• Обработка одного события не может быть прервана на
обработку другого
• Во время выполнения JS-кода останавливаются также скрипты
других приложений (например, ActionScript во Flash-роликах
страницы) и код взаимодействия с пользователем (выделение
текста, заполнение форм, реакция на нажатие правой кнопки
мыши и т. д.)
• В случае, если JS-код выполняется слишком долго, браузер
предлагает остановить процесс. ( => picalc1.html )
• setTimeout(), clearTimeout(), setInterval(), clearInterval() (=>
picalc2.html, picalc3.html, picalc4.html)
• Современное решение — Web Workers (picalc5.html)
Отладка
• Встроенные средства: IE8+, Safari, Chrome, Opera
• Для Firefox: плагин Firebug, встроенный отладчик
• Все стандартные возможности доступны:
выполнение по шагам, точки останова, просмотр
переменных и выражений, стек вызовов и т. д.
• Деобфускация (форматирование)
• Chrome: профилирование, heap dump,
мониторинг выделений памяти
• Подробнее:
http://habrahabr.ru/blogs/javascript/76485/