random
random()
random()
var num = Math.oor( Math.random() * + 1);
randomJavaScriptMath MathMath.oor
var num = Math.oor( Math.random() * 3 + 1); console.log( num );
random_tpl.html
Func6on
// var str = "; alert( str );
//() function test(){ var str = ""; alert( str ); } // test();
(function)
function01.html
(function)
ArgumentReturn value
//function addition(a, b) { var total = a + b;
return total; //return } //t=var t = addition(10, 20);console.log( t );
POINT
function02.html
javascript
var global = 1;function test(){ var local = 2;
console.log("_3"+local); console.log("_4"+global);}test(); //console.log(_1"+global);console.log("_2"+local); //
var
function03.html
javascript
Iterate
forwhile
i++ i = i+1
i-- i = i - 1
increment
sample10.html
javascript for
for
for( ){ true }
for( var i=0; i
javascript for in
for in
var obj = {}; for( in ){
true }
var obj = {a: 1, b: 2, c: 3, d: 4};
for( val in obj){ console.log( val ); //
console.log( obj[val] ); //}
for in
sample12.html
javascript while
while
while( ){ true }
var i = 0;while ( i < 3 ) {
i++; console.log(i); }
While
var i = 0;while ( i < 3 ) {
i++; console.log(i); break;}
While
sample13.html
WebJavaScript API
DOM
DOM
DOM (Document Object Model)
ChromeDOM
body div#container h1
div#kiji h2#news1
p#content1
div#kiji2 h2#news2
p#content2
DOM Document Object ModelHTML HTML DOM
()
javascript
body div#container h1
div#kiji h2#news1
p#content1
div#kiji2 h2#news2
p#content2
kijidiv#container kijih2#news1 p#content1
DOM
Web API document.*idid1
document.getElementById(id);
HTMLid ID (HTML )
var test = document.getElementById(test);
testid
stest.style.color="#f00";stest.style.fontSize = "40px";
DOM
iddiv
document.getElementsByTagName("); document.getElementsByClassName (");
dom01.html
body div#parent_div h1
div#main p#child_div1
p#child_div2
div#kiji2 h2#news2
p#content2
Var target= document.getElementById(main);
var parent= target.parentElement;
var child = target.children; //
parent:divchild:
DOM dom02.html
01
body div#parent_div h1
div#main p#child_div1
p#child_div2
div#kiji2 h2#news2
p#content2
DOM dom03.html
01
target insertBefore(),appendChild target removeChild
Selectors API
Selectors API
class left-column document.querySelectorAll(.left-column);class . left-column . right-columndocument.querySelectorAll(.left-column, .right-column); id main_contentdocument.querySelector(#main_content); div p document.querySelector(div>p);Inputtypebuttondocument.querySelector("input[type=button]"); class left-columndocument.querySelector(.left-column);
Selectors API
selectors.html
Event
Evnet
...
onLoad onClick onChange var mybtn= document.querySelector(#mybutton);mybtn.onclick = function(event){ alert('Hello world');};
HTML Javascript Evnet
onBlur onFocus onChange onSelect onSubmit onReset onAbort onError onLoad onUnload onClick onDblClick onKeyUp onKeyDown onKeyPress onMouseOut onMouseOver onMouseUp onMouseDown onMouseMove
Evnet
EventDOM0//var mybtn= document.querySelector(#mybutton);----------------------------------------------------------------//mybtn.onclick = function(event){ alert('Hello world');};----------------------------------------------------------------//function alertMsg (evt) {
alert(evt);}mybtn.onclick = alertMsg;----------------------------------------------------------------//mybtn.onclick = null;----------------------------------------------------------------11
event02.html
event01.html
event03.html
EventDOMvar mybtn= document.querySelector(#mybutton);// mybtn.addEventListener(click, alertMsg, false);mybtn.addEventListener(dblclick, alertMsg, false);//function alertMsg (evt) {
alert(evt);}
----------------------------------------------------------------//
mybtn. removeEventListener(dblclick, , false);
----------------------------------------------------------------
useCapturetrueaddEventListener
event04.html
javascriptthisthiswindow.onload = func9on() { // var mybtn = document.querySelector(#mybu?on); mybtn.onclick = func9on () { console.log(id: + this.id); console.log(name: + this.name); console.log(class: +this.className); } }; //HTML thisthis
this.htmlEventthis
Window
Window
windowJavaScriptwindowwindow
window.alert(); alert()
windowJavaScript JavaScript/windowwindow
window.location.href(URL);window.document.getElementById(id');Window.alert(window.);
window
window.open("h[p://hakuhin.jp/"); window.close(); //Window window.closed; //Window window.screenX; // window.screenY; // window.moveBy(,); // window.scrollTo(); //
window.html