course js day 3

JavaScript

Georgy Grigoryev, Auriga, Inc.

2

1 вебинар

История jsСтандарт ECMAScriptIDE и редакторыЗапуск и отладка скриптовТипы и операторы

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> <script type="text/javascript"> 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> <td><input type="text" /></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> <script type="text/javascript"> 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> <td><input type="text" /></td> </tr> <tr> <td>Phone:</td> <td><input type="text" /></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> <script type="text/javascript"> console.log(this); </script></body></html>

9

Система объектов в браузерном js

Источник javascript.ru

http://javascript.ru/

10

Window

<html><head> <title>DOM</title></head><body> <script type="text/javascript"> 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> <script type="text/javascript"> 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> <script type="text/javascript"> 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> <script type="text/javascript"> console.log(window.document); </script></body></html>

14

Document

<html><head> <title>DOM</title> <script type="text/javascript"> 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> <script type="text/javascript"> 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> <script type="text/javascript"> 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> <style type="text/css"> .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> <script type="text/javascript"> 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> <script type="text/javascript"> 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> <style type="text/css"> 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.htmlvar 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> <script type="text/javascript"> 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> <script type="text/javascript"> 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 andWe Look Forward to Working with You

Auriga, USA 92 Potter Rd, Ste 1Wilton, NH 03086, USAPhone: +1 (866) 645-1119Fax: +1 (603) [email protected] www.auriga.com

Auriga, Russia125 Varshavskoe Shosse, Unit 16A

Moscow, 117587Tel:+7 (495) 713-9900 Fax:+7 (495) 939-0300

[email protected] www.auriga.com

course js day 3

Documents

Transcript of course js day 3