More Related Content Similar to course js day 3 Similar to course js day 3 (20) course js day 36. 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. 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
14. 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. 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
17. 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. 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
20. 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. 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.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. 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. 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. 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. 25
AJAX
AJAX - это asynchronous JavaScript + XML
Появился в Internet Explorer 5, как ActiveX
27. 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