course js day 3

JavaScript
Georgy Grigoryev, Auriga, Inc.

2
1 вебинар
История js
Стандарт ECMAScript
IDE и редакторы
Запуск и отладка скриптов
Типы и операторы

3
2 вебинар
Массивы
Основные конструкции языка, и их применение
Объекты и JSON
Регулярные выражения
Контекст, this, bind, call, apply
ООП, прототипы, ООП в ECMAScript 6

4
3 вебинар
JavaScript и HTML
Работа с DOM
События, таймеры и AJAX

5
HTML
<html>
<head>
<title></title>
<script type="text/javascript">
function button_click() {
alert("Great!");
}
</script>
</head>
<body>
<input type="button" onclick="button_click();" value="Click me!" />
</body>
</html>

6
HTML Form
<html>
<head>
<title>Forms</title>
function form_submit(sender) {
for (var i = 0; i < sender.length; i++) {
console.log(sender[i].value);
}
}
</script>
</head>
<body>
<form onsubmit="form_submit(this);">
<table>
<tr>
<td>Name:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Send form" />
</td>
</tr>
</table>
</form>
</body>
</html>
form input submit.html

7
form.submit()
<html>
<head>
<title></title>
function form_submit(sender) {
for (var i = 0; i < sender.length; i++) {
console.log(sender[i]);
}
}
function checkbox_click(sender) {
console.log(sender.tagName);
var form = sender.form;
form.submit();
}
</script>
</head>
<body>
<form onsubmit="form_submit(this);">
<table>
<tr>
<td>Name:</td>
</tr>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" value="I agree" onchange="checkbox_click(this);" /></td>
</tr>
</table>
</form>
</body>
</html>
forms.html

8
Window
<html>
<head>
<title>DOM</title>
</head>
<body>
console.log(this);
</script>
</body>
</html>

9
Система объектов в браузерном js
Источник javascript.ru

10
Window
<html>
<head>
<title>DOM</title>
</head>
<body>
console.log("window : " + window);
console.log("window.innerWidth : " + window.innerWidth);
console.log("window.innerHeight : " + window.innerHeight);
console.log("window.screenX : " + window.screenX);
console.log("window.screenY : " + window.screenY);
</script>
</body>
</html>
BOM window.html

11
Window
<html>
<head>
<title>DOM</title>
var counter = 0;
function url_click() {
counter++;
alert(counter);
document.location.href = "http://google.com";
}
</script>
</head>
<body>
<input onclick="url_click()" value="google.com" type="button" />
</body>
</html>
document.location.html

12
Screen
<html>
<head>
<title>DOM</title>
</head>
<body>
console.log(window.screen);
for (var key in window.screen) { console.log(key); };
</script>
</body>
</html>
BOM screen.html

13
Document
<html>
<head>
<title>BOM</title>
</head>
<body>
console.log(window.document);
</script>
</body>
</html>

14
Document
<html>
<head>
<title>DOM</title>
function document_load() {
console.log(document);
console.log(document.body);
console.log(document.forms);
console.log(document.cookie);
console.log(document.title);
}
document.write('<script type="text/javascript">alert("message")</script>');
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label for="nameInput" /></td>
<td><input name="nameInput" type="text" /></td>
</tr>
<tr>
<td><label for="phoneInput"></label></td>
<td><input name="phoneInput" type="text" /></td>
</tr>
</table>
</form>
<script type="text/javascript">document_load();</script>
</body>
</html>
DOM.html

15
Document.getElementById
<html>
<head>
<title>DOM</title>
function form_submit() {
var form = document.getElementById("user_form");
console.log(form);
}
</script>
</head>
<body>
<form id="user_form" name="user_form" onsubmit="form_submit();">
<table>
<tr>
<td><label for="nameInput" /></td>
<td><input name="nameInput" type="text" /></td>
</tr>
<tr>
<td><label for="phoneInput"></label></td>
<td><input name="phoneInput" type="text" /></td>
</tr>
<tr><td colspan="2"><input type="submit" value="Send form"/></td></tr>
</table>
</form>
</body>
</html>
getElementById.html

16
getElement
document.getElementById – возвращает Element
document.getElementsByClassName – возвращает NodeList
document.getElementsByName – возвращает NodeList
document.getElementsByTagName – возвращает NodeList

17
Click
<html>
<head>
<title>Click event</title>
<style type="text/css">
.red_div {background-color: #f00;}
.green_div {background-color: #0f0;}
.blue_div {background-color: #00f;}
div{height: 100px;}
</style>
function div_click(eventArgs) {
console.log(eventArgs.target);
alert(eventArgs.target.className);
}
</script>
</head>
<body>
<div class="red_div" onclick="div_click(event);"></div>
<div class="green_div" onclick="div_click(event);"></div>
<div class="blue_div" onclick="div_click(event);"></div>
</body>
</html>

18
Click, div, span
<html>
<head>
<title>Click event</title>
.red_div {background-color: #f00;}
.green_div {background-color: #0f0;}
.blue_div {background-color: #00f;}
.inner_div{background-color: #0ff;height: 50px;}
div{height: 100px;}
</style>
function outer_click(eventArgs) {
console.log("click on outer element with class " + eventArgs.target.className);
}
function inner_click(eventArgs) {
console.log("click on inner element with class " + eventArgs.target.className);
}
</script>
</head>
<body>
<div class="red_div" onclick="outer_click(event);">
<span class="first_span" onclick="inner_click(event);">it's span</span>
<br/>
<span class="second_span" onclick="inner_click(event);">it's span too</span>
</div>
<div class="green_div" onclick="outer_click(event);">
<div class="inner_div" onclick="inner_click(event);">it's div</div>
</div>
<div class="blue_div" onclick="outer_click(event);"></div>
</body>
</html>
click event.html

19
Прокидывание события
function inner_click(eventArgs) {
console.log("click on inner element with class " + eventArgs.target.className);
eventArgs.stopPropagation();
}

20
Load
<html>
<head>
<title>load event</title>
var counter = 1;
log_msg('head loaded')
function log_msg(message) {
console.log(message + ", counter = " + counter);
var arr_p = [];
for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
arr_p.push(document.getElementsByTagName('p')[i]);
}
console.log(arr_p);
counter++;
}
window.onload = log_msg.bind(null, 'window loaded');;
</script>
</head>
<body onload="log_msg('body loaded');">
<p>Paragraph 1</p>
<script type="text/javascript">log_msg("inline call");</script>
<p>Paragraph 2</p>
</body>
</html>
load event.html

21
onmousedown, onmouseup, onmousemove, onmouseout
<html>
<head>
<title>drag image</title>
<script type="text/javascript" src="mouse_methods.js"></script>
img {
position: fixed;
top: 0px;
left: 0px;
height: 300;
}
</style>
</head>
<body>
<div>
<img id="dragable_img" src="darth-vader.jpg"
onmousedown="mouse_down(event)" onmouseup="mouse_up(event)"
onmousemove="mouse_move(event)" onmouseout="mouse_out()" />
</div>
</body>
</html>
drag image.html
var downX = 0, downY = 0;
var imageX = 0, imageY = 0;
var mouse_is_down = 0;
function move_image(x, y) {
var img = document.getElementById('dragable_img');
img.style.left = (+x) + "px";
img.style.top = (+y) + "px";
}
function mouse_down(eventArgs) {
var img = document.getElementById('dragable_img');
downX = eventArgs.clientX - (+img.style.left.replace("px", ""));
downY = eventArgs.clientY - (+img.style.top.replace("px", ""));
mouse_is_down++;
eventArgs.preventDefault();
}
function mouse_up(eventArgs) {
var x = eventArgs.clientX - downX;
var y = eventArgs.clientY - downY;
move_image(x, y);
mouse_is_down--;
}
function mouse_move(eventArgs) {
if (!!mouse_is_down) {
var x = eventArgs.clientX - downX;
var y = eventArgs.clientY - downY;
move_image(x, y);
}
}
function mouse_out() {
downX = 0;
downY = 0;
imageX = 0;
imageY = 0;
mouse_is_down = 0;
}
mouse_methods.js

22
keys
<html>
<head>
<title>keydown, keypress, keyup</title>
function key_event(event) {
console.log(event.type);
console.log(event)
}
</script>
</head>
<body onkeydown="key_event(event);" onkeypress="key_event(event);" onkeyup="key_event(event)">
<div>
<p>Press any key!</p>
</div>
</body>
</html>
key events.html

23
timers
<html>
<head>
<title>timers</title>
function set_timeout() {
window.setTimeout(function () {
console.log('time is gone');
}, 5000);
}
var timer;
function set_interval() {
var counter = 0;
timer = window.setInterval(function () {
counter++;
console.log("it's a " + counter + " execution of timer");
}, 5000);
}
function stop_timer() {
if (!!timer) {
window.clearTimeout(timer);
console.log("timer stoped");
}
}
</script>
</head>
<body>
<input type="button" value="Set timeout" onclick="set_timeout()" />
<input type="button" value="Set interval" onclick="set_interval()" />
<input type="button" value="Stop timer" onclick="stop_timer()" />
</body>
</html>
timers.html

24
AJAX
<html>
<head>
<title>AJAX</title>
<script>
function load_data() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("target").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "data.html", true);
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="load_data()">Load</button>
<p id="target"></p>
</body>
</html>
Ajax.html

25
AJAX
AJAX - это asynchronous JavaScript + XML
Появился в Internet Explorer 5, как ActiveX

26
jQuery.ajax
$.ajax.html
<html>
<head>
<title>jQuery AJAX</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function load_data() {
$.ajax(
{
url: "data.html"
}).done(
function (data) {
document.getElementById("target").innerHTML = data
}
).fail(
function () {
alert("error when call server")
});
}
</script>
</head>
<body>
<button type="button" onclick="load_data()">Load</button>
<p id="target"></p>
</body>
</html>

27
Contacts
Thank You and
We Look Forward to Working with You
Auriga, USA
92 Potter Rd, Ste 1
Wilton, NH 03086, USA
Phone: +1 (866) 645-1119
Fax: +1 (603) 386-6097
info@auriga.com
www.auriga.com
Auriga, Russia
125 Varshavskoe Shosse, Unit 16A
Moscow, 117587
Tel:+7 (495) 713-9900
Fax:+7 (495) 939-0300
info@auriga.com
www.auriga.com

course js day 3

More Related Content

What's hot

Viewers also liked

Similar to course js day 3

course js day 3