Прежде чем читать эту книгу, я хотел бы поблагодарить техническую команду Taobao за перевод этого JavaScript Core и Flanagan за написание этой книги. Спасибо за самоотверженное обмен, и только эта заметка посвящена вашей тяжелой работе.
1: Язык JavaScript Core
После этой главы мы сосредоточимся в основном на основе JavaScript. Глава 2 Мы объясним комментарии, полуколоны и наборы символов Unicode JavaScript; Глава 3 будет более интересной, в основном объясняет переменные и задания JavaScript
Вот несколько примеров кодов, чтобы проиллюстрировать ключевое содержимое первых двух глав.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// Контент после двойной черты принадлежит комментарию
// Прочитайте комментарии здесь тщательно, это объяснит код JavaScript
// переменная - это символическое имя, которое представляет значение
// переменные объявляются через ключевое слово var
var x; // объявить переменную x
// значение может быть назначено переменной через символы
x = 0; // значение переменной x теперь 0
x // Получите его значение по имени переменной.
// JavaScript поддерживает несколько типов данных
x = 1; //Число
x = 0,01; // Целые числа и реальные числа имеют тип данных
x = "Привет, мир"; // построить строку текста в двойных кавычках
x = 'Привет, мир'; // Одиночные кавычки также образуют строки.
x = true; // логический
x = false; // еще одно логическое значение
x = null; // NULL - это специальное значение. Значение пусто
x = не определен; // неопределенные и нулевые очень похожи
</script>
В JavaScript наиболее важными типами являются объекты и массивы. Глава 6 представляет объекты, а глава 7 представлены массивы. Объекты и массивы так важны в JavaScript. Настолько, что их можно увидеть повсюду в этой книге.
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// самый важный тип в JavaScript - это объект
// Object - это коллекция пар/значения или коллекция строковых значений для сопоставленных значений.
var book = {// объекты закрыты в кудрявые скобки
Тема: «JavaScript», // значение атрибута «Тема» - JavaScript
Жир: истина // ценность имущества жир верно
}; // Кудрявые брекеты на правом конце.
// Доступ к свойствам объекта через "." или "[]".
book.topic // => "javascript"
Книга ["fat"] // => Истинный другой способ получить атрибуты,
book.author = "ahthw"; // Создать новый атрибут по назначению
book.content = {}; // {} - пустой объект. У него нет атрибутов
// JavaScript также поддерживает массивы (перечисляет массивы)
var primes = [2, 3, 5, 7]; // имеет комбинацию из 4 значений, граница рисуется «[" "" "]"
PRIMES [0] // => 2: первый объект массива, индекс 0 - 0
primes.length // => 4, количество элементов в массиве
PRIMES [primes.length-1] // => 7: последний элемент в массиве
простые числа [4] = 9; // Добавить новые элементы по назначению
Простые простые [4] = 11; // Изменение существующих элементов на назначение
var empty = []; // пустое массив, с 0 элементами
empty.length // =>: 0
// массивы и объекты могут содержать другой массив или объект.
var point = [// массив с двумя элементами
{x: 0, y: 0}, // каждый элемент является объектом
{x: 1, y: 1}
];
var data = {// объект, содержащий два атрибута
Испытание1: [[1,2], [3,4]], // каждый объект является массивом
Испытание 2: [[2,3], [4,5]] // Элементы массива также являются массивами
};
</script>
Синтаксис приведенного выше кода, который определяет элементы массива через квадратные кронштейны и определяет соотношение отображения между именами атрибутов объекта и значениями атрибутов через кудрявые скобки. Глава 4 специально представлена. Выражения - это фраза в JavaScript. Эта фраза может быть рассчитана для получения значения и ссылается на значение атрибутов объекта или элементов массива через «», «и» [] », чтобы сформировать выражение.
Наиболее распространенным методом написания выражений в JavaScript является операторы, такие как следующий код (Oprator)
Кода -копия выглядит следующим образом:
// Оператор в качестве оператора генерирует новое значение
// самый распространенный арифметический оператор
3+2 // => 5 добавление
3-2 // => Вычитание
3*2 // => Несколько
3/2 // => Дивизион
точка [1] .x -point [0] .x // => сложные операции также могут работать как обычно
"3"+"2" // => 32. Вы можете завершить операции с добавлением или сплайсинг строки.
// JavaScript определяет некоторые арифметические операторы как сокращение
var count = 0; // Определите переменную
count ++; // Увеличение на 1
считать--; // уменьшение на 1
count += 2; // Автопродукт 2 такой же, как и "count = count + 2;"
count *= 3 // Умножение 3. Точно так же, как "count = count *3;" написан
COUNT // => 6: Само имя переменной также является выражением
// Оператор отношений равенства используется для определения того, равны ли два значения или нет
// неравный, больше, чем, меньше, чем результат работы оператора верно или неверно
var x = 2, y = 3; // равный знак здесь означает назначение, а не относительно равное
x == y; // => ложь равна
x! = y; // => true
x <y; // => true: меньше, чем
x <= y; // true меньше или равен
x> y; // Неверно больше
x> = y; // ложь больше или равен
"два" == "три"; // ложные две строки не равны
"два"> "три"; // Правда Индекс «TW» в алфавите больше, чем «TH»
false == (x> y); // ture false = false;
// Логические операторы объединены или обратными логических значений
(x == 2) && (y == 3); // => true оба сравнения верны. && is "и"
(x> 3) || (y <3); // => Неверное ни одно сравнение не верно. || означает "или"
! (x == y); // => true! Указывает обратный поиск
Если «фраза» в JavaScript является выражением, то все предложение называется утверждением, которое будет подробно объяснено в главе 5.
В приведенном выше коде строки, заканчивающиеся полуколоном, являются все утверждения. Грубого, выражение только вычисляет одно значение (или значение, которое оно содержит, не связано с), но они меняют состояние выполнения программы. В вышесказанном были замечены заявления об объявлении и заявлениях о присвоении. Другим типом утверждения является «структура управления», например, условное суждение и цикл. После введения функции мы приводим соответствующий пример кода.
Функции представляют собой фрагменты кода JavaScript с именами и параметрами, которые можно определить и использовать несколько раз за раз. Глава 8 официально объяснит функции подробно. Как и объекты и массивы, функции упоминаются во многих местах в этой книге, поэтому вот несколько простых примеров кода.
Кода -копия выглядит следующим образом:
// Функция представляет собой сегмент кода JavaScript с параметрами обработки, которые могут быть переданы несколько раз
Function Plus1 (x) {// Определить функцию с именем Plus1 с параметром x
вернуть x + 1; // Возврат значения, которое на 1 больше, чем проходящее.
} // Кодовый блок функции - это часть, завернутая в кудрявые скобки
plus1 (y) //
var square = function (x) {// Функция - это значение, которое можно назначить переменной
вернуть x*x; // Рассчитать значение функции
}; // полуколон указывает конец оператора назначения
Square (Plus1 (y)); // одна две функции в одном выражении
Когда функция и объект записываются вместе, функция запрограммирована с помощью «метода» (метод)
Кода -копия выглядит следующим образом:
// Когда функция назначается атрибуту объекта, мы называем это
// «метод», все объекты JavaScript содержат методы
var a = []; // Создать пустой массив
A.Push (1,2,3); // Добавить объекты в массив к методу push ()
A.Reverse (); // обращение данных
// document.write (a)
// мы можем определить метод под- , ключевое слово «это» - это метод определения
Ссылка на объект //, примером здесь является массив, содержащий двух точечной позиции, упомянутой выше.
points.dist = function () {// определить метод для расчета расстояния между двумя точками
var p1 = это [0]; // Получить ссылку на текущий массив через это ключевое слово
var p2 = это [1]; // и получить первые два элемента называемого массива
var a = p2.x- P1.y; // расстояние по оси x координат
var b = p2.y - p1.y; // расстояние на оси y-координат
вернуть math.sqrt (a * a + "Мы называем это" + b * b); // Пифагорейская теорема
}; //Math.sqrt () вычисляет квадратный корень
points.dist () // => Найти расстояние между двумя точками
Теперь приведите несколько примеров контрольных заявлений. Здесь функция примера содержит наиболее распространенные операторы управления JavaScript в теле.
Кода -копия выглядит следующим образом:
// Здесь оператор JavaScript использует этот синтаксис для включения условного суждения и цикла
// используется синтаксис, похожий на Java C ++ и другие языки
Функция ABS (x) {// Найти функцию абсолютного значения
if (x> = 0) {// if
возврат x; // Если верно, выполните этот код
} else {// false execute
return -x;
}
}
Функция FACTPRIAL (n) {// Вычисление факториала
var product = 1; // назначить значение 1 продукту
While (n> 1) {// цикл для выполнения {} контента, когда значение expround () true true
продукт *= n; // продукт = продукт * Сокращение
n--; // n = N-1 Метод написания
} // Цикл заканчивается
вернуть продукт; // возвращать продукт
}
Факт (4) // => 24 1*4*3*2 документ.
Функция Factorial2 (n) {// Другой способ написать цикл
var i, product = 1; //
для (i = 2; i <= n; i ++) // увеличить i от 2 до n
продукт *= i; // Корпус цикла, когда в теле цикла есть только одно предложение кода, опустите {}
вернуть продукт; // Рассчитать и вернуть хороший фактор;
}
Factorial2 (5) //document.write(factorial2(5)) => 120: 1*2*3*4*5
JavaScript-это объектно-ориентированный язык программирования, но он сильно отличается от традиционных объектов страниц. Глава 9 подробно объяснит объектно-ориентированный JavaScript. В этой главе будет много образцов кода, который является самой длинной главой в этой книге.
Вот простой пример, этот код показывает, как определить класс в JavaScript, чтобы представлять точки в геометрии 2D -лиц. Объект, созданный в этом классе, имеет метод, называемый r () для расчета расстояния от изменений точек до происхождения.
Кода -копия выглядит следующим образом:
// Определите конструктор для инициализации нового объекта точки
Функциональная точка (x, y) {// Конструкторы обычно начинаются с букв заглавных
this.x = x; // ключевое слово, которое это относится к инициализированному экземпляру
this.y = y; // параметры функции хранения как атрибуты объекта
}
// Создание экземпляра с использованием нового ключевого слова и конструктора
var p = новая точка (1, 1); // точки 1, 1 в плоской геометрии,
// Присвоение значения через объект прототипа конструктора
// определять методы для объектов точечных объектов
Point.prototype.r = function () {
return math.sqrt (// возвращает квадратный корень из x square + y square
this.x * this.x + // Это относится к объекту, который транспортирует этот метод
this.y * this.y);
};
// объект экземпляра точки P (и все объекты экземпляра точки) наследует метод r ()
pr () // => 1.4142135623730951 /документ.write (pr ())
Глава 9 является сущностью первой части . Последующие главы были спорадически расширены, что приведет нас к концу нашего исследования JavaScript.
Глава 10 в основном рассказывает о шаблонах сопоставления текста, выполняемых регулярными выражениями.
Глава 11 Основное подмножество основного языка и суперсет гипсового JavaScript .
Прежде чем ввести содержание JavaScript в клиенту, глава 12 мы представляем только две среды, работающие за JavaScript за пределами Интернета.
2. Клиент JavaScript
В основной части языка JavaScript есть много перекрестных ссылок на точки знания содержания, и чувство знания неясно. Контент -оркестр JavaScript на стороне клиента сильно изменился. Согласно этой главе, вы можете использовать JavaScript в веб -браузере. (Но если вы хотите изучить JavaScript, прочитав эту книгу, вы не можете просто сосредоточиться на второй части) Глава 13 - это первая часть второй части, которая представляет, как сделать JavaScript работать в веб -браузере. Глава 14 объясняет технологию сценариев веб -браузера и охватывает важную глобальную функцию клиента Javascipt.
Например:
Кода -копия выглядит следующим образом:
функция moveOn () {
// Задайте вопрос через диалоговое окно
var answer = Подтверждение («Вы готовы?»);
// Нажмите OK, и браузер загрузит новую страницу
if (ответ) window.location = "http://www.baidu.com";
}
// выполнить эту функцию через 1 минуту (60000 миллисекунд)
SetTimeout (MoveOn, 300);
Глава 15 расскажет вам, как JavaScript может манипулировать стилем HTML, чтобы определить метод отображения контента . Содержание главы 15 будет более прагматичным. Через сценарии он покажет, как выбрать конкретные элементы веб -страницы, как установить атрибуты для элементов HTML, если модифицирован содержание элемента и как добавить новые узлы в документ
В следующем примере показано, если вы найдете и изменяете базовое содержание статьи
Кода -копия выглядит следующим образом:
// указанная информация в документе и дерево областей переизведена информация о отладке
// Если этот элемент не существует в документе, создайте
функция отладка (msg) {
// Найти отладку часть документа, просмотрев атрибут идентификатора элемента HTML
var log = document.getElementbyId ("debuglog");
// Если элемент не существует, создайте
if (! log) {
log = document.createElement ("div"); // Создать новый элемент div
log.id = "debuglog"; // Присвоение значения идентификатору каждого элемента
log.innerhtml = "<h1> отладка log </h1>"; // Настройка начального контента
document.body.appendchild (log); // Добавить его в конце документа
}
// Включите сообщение в <pre> и добавьте его в журнал
var pre = document.createElement ("pre"); // Создать предварительный элемент
var text = document.createElement (msg); // Включите MSG в текстовый узел
pre.appendchild (текст); // Добавить текст в предварительный
log.appendchild (pre); // Предварительно добавить в журнал
}
Глава 16 расскажет о том, как использовать JavaScript для управления элементами , которые обычно используют стиль и атрибуты класса элемента.
Кода -копия выглядит следующим образом:
Функция скрыть (e, Reflow) {// манипулировать элементами и скрыть элементы e через jvascript
if (Reflow) {// Если второй параметр правда
e.style.display = "none" // скрыть этот элемент, и пространство, которое он занимает, также продается
} еще {
e.style.visibuble = "hidden"; // скрыть E, сохраняя пространство, которое требуется
}
}
Функция выделения (e) {// выделить e путем настройки CSS
if (! e.classname) e.classname = "highcss";
еще
e.classname += "highcss";
}
Контент и стиль элементов CSS можно контролировать с помощью JavaScript, а поведение документа также может быть определена с помощью обработчиков событий. Обработка событий - это функция JavaScript, зарегистрированную в центре браузера. Когда происходит конкретное событие, браузер может вызвать эту функцию.
Обычно типы событий, на которых мы фокусируемся, - это щелчки мыши и события клавишных клавиш (смартфоны - это различные события сенсорных). Или когда браузер завершает загрузку документа, событие человека будет запускаться, когда пользователь изменяет размер окна или когда пользователь введет данные в форму.
Глава 17 подробно описывает, как определить, зарегистрировать обработчики времени и как браузер называет их, когда происходят события.
Самый простой способ настроить обработчики событий - это связать обратный вызов к атрибуту, префиксированному HTML. При написании некоторых простых программных тестов наиболее практичным способом является связать обратный вызов к обработке «Onclick». Предполагая, что функции вышеупомянутого отладки () и hide () сохраняются в файлах debug.js и hide.js выше, вы можете просто указать обработчик событий для атрибута Onclick. следующее
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// указанная информация в документе и дерево областей переизведена информация о отладке
// Если этот элемент не существует в документе, создайте
функция отладка (msg) {
// Найти отладку часть документа, просмотрев атрибут идентификатора элемента HTML
var log = document.getElementbyId ("debuglog");
// Если элемент не существует, создайте
if (! log) {
log = document.createElement ("div"); // Создать новый элемент div
log.id = "debuglog"; // Присвоение значения идентификатору каждого элемента
log.innerhtml = "<h1> отладка log </h1>"; // Настройка начального контента
document.body.appendchild (log); // Добавить его в конце документа
}
// Включите сообщение в <pre> и добавьте его в журнал
var pre = document.createElement ("pre"); // Создать предварительный элемент
var text = document.createElement (msg); // Включите MSG в текстовый узел
pre.appendchild (текст); // Добавить текст в предварительный
log.appendchild (pre); // Предварительно добавить в журнал
}
Функция скрыть (e, Reflow) {// манипулировать элементами и скрыть элементы e через jvascript
if (Reflow) {// Если второй параметр правда
e.style.display = "none" // скрыть этот элемент, и пространство, которое он занимает, также продается
} еще {
e.style.visibuble = "hidden"; // скрыть E, сохраняя пространство, которое требуется
}
}
Функция выделения (e) {// выделить e путем настройки CSS
if (! e.classname) e.classname = "highcss";
еще
e.classname += "highcss";
}
</script>
привет
<button onclick = "Hide (this, true); debug ('кнопка укрытия 1');"> Hide1 </button>
<button onclick = "hide (this); debug ('кнопка укрытия 2');"> hide2 </butotn>
Следующий клиент JavaScript использует события, что дает очень важное событие: событие «загрузка» регистрирует событие для обработки ченсинга. Коллеги также показывают более продвинутый способ зарегистрировать обработчики "Click"
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
// событие «загрузка» может быть запущено только после загрузки документа
// Если вам обычно нужно ждать события загрузки, прежде чем вы сможете выполнить код JavaScript
window.onload = function () {
// Найти все теги IMG в документе
var Images = document.getElementsbytagname ("img");
// Передача через изображения и добавить обработчик в событие щелчка каждого узла
// скрыть изображение, нажав на нее
for (var i = 0; i <images.length; i ++) {
var imge = images [i];
if (imge.addeventlistener) // Еще один способ зарегистрировать обработчик времени
imge.addeventlistener («щелкнуть», скрыть, false);
else // совместим с предыдущими операциями IE8
imge.attachevent ("onclick", Hide);
}
// Это вышеуказанная функция обработки событий зарегистрированного события
Функция скрыть (evnet) {
event.target.style.visibility = "hidden";
}
};
</script>
Глава 15-17 рассказывает, как использовать JavaScript для управления контентом, стилем и поведением веб-страниц (обработка событий). В этой главе обсуждается API немного сложный, и до сих пор она имеет плохую совместимость браузера. Вот почему многие программисты JavaScript предпочитают использовать «библиотеку» или «структуру», чтобы упростить свою работу по кодированию. Самым популярным является jQuery. Глава 19 представляет библиотеку jQuery
Кода -копия выглядит следующим образом:
функция отладка (msg) {
var log = $ ("#debuglog");
if (log.length == 0) {
log = $ ("<div id = 'debuglog'> <h1> debuglog </h1> </div>");
log.appendto (document.body);
}
document.write (log)
log.append ($ ("<pre/>"). Text (msg));
};
Четыре глав второй части, которую мы упомянули, обсуждаются на веб -страницах. Последующие четыре главы будут сосредоточены на магазине и обращаются к веб -приложениям. Это содержимое не обсуждается, как писать и манипулировать контентом. Стили и процветающие сценарии используют веб -браузеры для рендеринга документов; Вместо этого объясните, как использовать веб -браузеры в качестве платформы приложений. И описывает API для поддержки более сложных и изысканных клиентских веб -приложений и современных браузеров.
Глава 18 объясняет, как использовать JavaScript для инициирования HTTP -запросов.
Глава 20 описывает механизм хранения данных и обслуживание состояния сеанса клиентских приложений . Глава 21 охватывает новое поколение API -интерфейсов приложений/сетевой графики хранения, управляемой HTML5. Они основаны на разработке браузеров, которая поддерживает новые API. Чжэцзян - ваш самый захватывающий момент в качестве программиста JavaScript. В последних 4 главах не так много примеров кода. В следующем примере используются эти новые API.