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 (20)

Viewers also liked (20)

Similar to Web internship java script (20)

More from Noveo (20)

Web internship java script

Editor's Notes