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