Web internship java script

Web Internship 2014
JavaScript
Константин Кузьмин

План
• Области применения
• Добавление на страницу и особенности синтаксиса
• Переменные и операторы
• Примитивные типы
• Массивы, функции, объекты
• this
• window
• DOM
• События
• jQuery
• JSON & AJAX
• Замыкания
• Полезное
JavaScript

Области применения
• Web-приложения
• Мобильные приложения
• Серверные приложения
• Виджеты
• Браузерные плагины
JavaScript

Добавление JS-кода на страницу
<script type="text/javascript">
// js code here
</script>
<script type="text/javascript " src="script.js
"></script>
JavaScript

Особенности синтаксиса
• Комментарии
– Однострочный // комментарий
– Многострочный
/*
комментарий
*/
• Точка с запятой. В JS точку с запятой после
операторов можно ставить, но не обязательно.
Перевод строки подразумевает точку с запятой. Лучше
все же ставить ;
return result //эквивалентно return result;
return //эквивалентно return;
result //эквивалентно result;
JavaScript

Переменные
• Переменной можно присвоить любой значение.
• Имена переменных чувствительны к регистру.
• Переменная объявляется с использванием
ключевого слова var
var variable = 100;
Директива var при объявлении переменной делает
ее локальной, т.е. видимой только внутри текущей
функции
Переменные объявленные без ключевого слова var
попадают в глобальную область видимости window
JavaScript

Операторы
• Арифметические (+ - * / %).
• Логические (&&, ||, !).
• Операторы сравнения ( == != < > <= >= ===
!== ?: ).
• Строгое сравнение – без приведения
типов.
• Приоритеты операторов (http://goo.
gl/wUpvww).
JavaScript

Примитивные типы
• Boolean
var f = true;
var f = new Boolean('someting'); //=> true
• Number
var a = 5;
var a = new Number('5');
• String
var str = 'Hello';
var str = new String('Hello');
• undefined
typeof b == undefined
• null
• Приведение типов: http://learn.javascript.ru/types-conversion
JavaScript

Массивы
• Массивы с числовыми индексами.
var arr = new Array("my", "array");
var arr = [ "my", "array" ];
• Ассоциативные массивы.
var obj = { n: 1, str: "Вася" }
JavaScript

Функции
function print(msg) {
document.write(msg, '<br/>');
}
function hypotenuse(a, b) {
function square(x) { return x*x; }
return Math.sqrt(square(a) + square(b));
}
var f = function(x) { return x*x; };
f(5);
JavaScript

Объекты
• Все в JS является объектом
• Объекты создаются функциями-
конструкторами при помощи директивы new.
var date = new Date();
console.log(date.getDate());
• Доступ к методам и параметрам объекта
через точку .
• Функция - это встроенный объект, у которого
есть метод call
JavaScript

this
• Оператор this возвращает ссылку на объект,
являющийся текущим контекстом вызова.
• Текущий объект не является жестко
фиксированным и зависит от контекста вызова
функции.
• Варианты передачи
– неявно, через вызов метода: object.method(...)
– явно, через call: function.call(object,...)
– явно, через apply: function.apply(object,...)
– неявно, через вызов new: new constructor(...)
– иначе – window
JavaScript

Объект window
• Объект window сочетает два в одном:
глобальный объект js и окно браузера.
• Для обращения к свойствам и методам
window не обязательно указывать объект.
var a = 123;
console.log(a);
console.log(window.a);
JavaScript

Объект window
• Основные методы для работы с окном
– window.open()
– window.close()
– window.focus()
• Основные свойства
– window.location
• window.location.reload(); // выполняется перезагрузка текущего
окна
• window.location.href = 'http://translate.google.com/'; //
выполняется переход на другой URL
– window.history
• window.history.back();
• window.history.forward();
– window.top
JavaScript

Объект window
Глобальные методы
• alert
• clearInterval
• clearTimeout
• confirm
• decodeURI
• decodeURIComponent
• encodeURI
• encodeURIComponent
• eval
• isFinite
• isNaN
• parseFloat
• parseInt
• prompt
• setInterval
• setTimeout
JavaScript

Document Object Model (DOM)
<!DOCTYPE HTML>
<html>
   <head>
       <title>Документ</title>
   </head>
   <body>
       <div id="dataKeeper">Data</div>
       <ul>
           <li style="background-color:red">Осторожно</li>
           <li class="info">Информация</li>
       </ul>
       <div id="footer">Made in Russia ©</div>
   </body>
</html>
JavaScript

Объект document
• document.getElementById
• document.getElementsByTagName
• document.createTextNode
• Node.removeChild
• Node.appendChild
• https://developer.mozilla.org/en-
US/docs/Web/API/document
JavaScript

DOM Events
• Позволяют с помощью JS регистрировать
различные обработчики, которые будут
выполняться при возникновении событий
(например, нажатие на кнопку).
• Event Object (http://goo.gl/Skpn4x)
• Bubbling
• http://goo.gl/Pn1aYV
JavaScript

DOM Events: Регистрация
обработчиков
• HTML атрибут
<button onclick="alert('Hello world!')">
• DOM свойство
myButton.onclick = function(event){alert
('Hello world');};
• EventTarget.addEventListener
myButton.addEventListener('click', function()
{alert('Hello world');}, false);
JavaScript

jQuery. Подключение.
Документация: http://api.jquery.com/
• CDN (Content Delivery Network)
<script src="//ajax.googleapis.
com/ajax/libs/jquery/1.11.0/jquery.min.js"
></script>
• Просто скачать с http://jquery.com/ и
подключить на страницу как локальный
файл.
JavaScript

jQuery. Готовность документа
$(document).ready(function() {
// выполняется, когда DOM загрузился
alert("document is ready");
});
$(window).load(function() {
/* выполняется, когда страница полностью
загрузилась, включая фреймы и картинки */
alert("window is loaded");
});
JavaScript

jQuery. Селекторы
$(selector, context)
• "#mydiv" // элемент с id="mydiv"
• "div" // все div'ы на странице
• "div.myclass" // div имеющий class="myclass“
• "div:first" // только первый div
• "div:last" // только последний
• "div:even" // все четные div'ы
• "input[type='text']" // все элементы input с type="text“
• "input:checkbox:checked" // все чекбоксы с checked=true
• "div.myclass img" // img, который находится в div'е с class="myclass“
• "div.myclass, div.my2" // div'ы имеющие class="myclass" и class="my2“
• "div", "#myid" // все div'ы, находящиеся в контейнере с id="myid"
JavaScript

jQuery. Работа с элементами
• attr() Аттрибут элемента.
– $(element).attr(‘attr-name’);
– $(element).attr(‘attr-name’, ‘attr-value’);
• prop() Свойства элемента (например, checked)
– $(element).prop(‘prop-name’);
– $(element).prop(‘prop-name’, ‘prop-value’);
• val() Значение элемента
– $(element).val();
– $(element).val(123);
• text() Текстовое содержимое элемента. Не применяется для
input элементов.
– $(element).text();
– $(element).text(“Hello");
JavaScript

jQuery. События
• on() добавить обработчик события
– $("input").on('blur', function (event) {});
• off() удалить обработчик события
– $("input").off('blur', function (event) {});
• trigger() вызвать событие
– $("input").trigger('blur‘)
JavaScript

jQuery. События
Документация: http://api.jquery.com/category/events/
• blur - элемент теряет фокус
• focus – элемент получает фокус (мышью или по Tab)
• change – элемент теряет фокус ввода и при этом
изменилось значение элемента с момента получения фокуса
• click – нажатие на элемент. (~ mousedown + mouseup на
одном и том же участке экрана)
• keydown – нажатие клавиши на клавиатуре
• keyup – отжатие клавиши на клавиатуре
• resize – изменение размеров области просмотра документа
• submit – отправка формы
• и многое другое ☺
JavaScript

jQuery. Each
Используется для манипуляций коллекцией объектов (в том
числе и результат работы селекторов)
<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
var obj = {
"flammable": "inflammable",
"duh": "no duh"
};
$.each( obj, function( key, value ) {
alert( key + ": " + value );});
JavaScript

JSON
JSON (JavaScript Object Notation) — текстовый формат
обмена данными, основанный на JavaScript.
{
"firstName": "Иван",
"lastName": "Иванов",
"address": {
"streetAddress": "Московское ш., 101, кв.101",
"city": "Ленинград",
"postalCode": 101101
},
"phoneNumbers": [
"812 123-1234",
"916 123-4567"
]
}
JavaScript

AJAX
AJAX, Ajax (Asynchronous Javascript and XML — «асинхронный JavaScript
и XML»)
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" },
dataType: "html"
}).done(function( msg ) {
alert( "Data Saved: " + msg );
}).fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
Документаций jQuery http://api.jquery.com/jquery.ajax/
JavaScript

Функции. Callback
function foo(str, cb){
var big_str = str + "some data";
cb(big_str);
}
function bar(data){
console.log(data);
}
foo('i am ', bar);
JavaScript

Функции. Замыкания
Если говорить просто, то замыкание - это внутренняя
функция. И эти функции имеют доступ к переменным
внешней функции.
function makeShout() {
var phrase = "Старт!";
var shout = function() {
alert(phrase);
}
phrase = "Готово!";
return shout;
}
shout = makeShout();
shout();
JavaScript

Функции. Замыкания
Неправильное
использование
function addEvents(divs) {
for(var i=0; i<divs.length; i++) {
divs[i].innerHTML = i;
divs[i].onclick = function() {
alert(i);
}
}
}
Правильное
использование
function addEvents(divs) {
for(var i=0; i<divs.length; i++) {
divs[i].innerHTML = i;
divs[i].onclick = function(x) {
return function() { alert(x) }
}(i)
}
}
JavaScript

Инструменты
• Chrome developers tools
• Advanced REST client
• console.log(), console.error()
JavaScript

Чтиво
• jqfundamentals.com/chapter/javascript-basics
• slideshare.net/guestceb98b/the-javascript-
programming-language
• shamansir.github.io/JavaScript-Garden/
• slideshare.net/danwrong/metaprogramming-
javascript
• slideshare.net/rudevich/javascript-intro-17192262
• es5.javascript.ru/
• codecademy.com/
• http://javascript.ru/
JavaScript

Web internship java script

More Related Content

What's hot

Viewers also liked

Similar to Web internship java script

More from Noveo

Web internship java script

Editor's Notes