중앙대학교 4학년
중앙대학교 컴퓨터 공학부
학회(학술 동아리) ZeroPage
http://slides.com/bluemir/javascript/live
http://me2.do/FPMeiZcr
에서 볼수 있습니다.
Web Browser에서 동작한다.
웹페이지의 동적인 부분을 담당한다.
스크립트 언어이다.
형이 없다
컴파일이 안될것 같지만 사실된다.
클래스가 펑션이다.
함수도 변수다.
핫하다. 다 된다. 모른다.
자바랑 비슷할 것 같다.
자바에 묻어갈려는 언어다
==도 있고 === 도 있다.
그때그때 다르다.
XX 어렵다.
XX 못해 먹겠다.
HTML/CSS
JavaScript
Unity
Canvas
WebGL
var player = get("#player");
var playButton = get("#play");
var stopButton = get("#stop");
playButton.on("click", function(){
player.play();
});
stopButton.on("click", function(){
player.pause();
});
function get(){
document
.querySelector
.apply(document, argument);
}
playButton.on("click", function(){
player.play();
});
player.on("end", function(){
endMessage.show();
});
capture.on("saved", function(img){
privews.add(img);
});
server.on("uploaded", function(){
//...
});
Event
EventHandler
var req = new Request();
req.send({value : 123}); //not wait!
req.on("response", function(){
console.log("recived");
});
console.log("sent");
sent
recived
var server = new Server(url);
var time = new BigText();
time.text = "Ready";
var start = new Button("Start");
var stop = new Button("Stop");
var timer = new Timer();
timer.displayTo(time);
start.on("click", function(){
timer.start();
});
stop.on("click", function(){
timer.stop();
});
var server = new Server(url);
var time = new BigText();
time.text = "Ready";
var start = new Button("Start");
var stop = new Button("Stop");
var timer = new Timer();
timer.displayTo(time);
start.on("click", function(){
timer.start();
});
stop.on("click", function(){
timer.stop();
});
var a = 1;
var str = "abcd";
var numbers = [1, 2, 3];
var slides = [
{title: 'Looking Ahead'},
{title: 'Forecast'},
{title: 'Summary'}
];
var func = function(){
}
var time = new Date("2015-8-15");
Object, Number
Object, string
Object, Array
Object, Array
Object
Object
Object
Object, Function
Object, Date
var a; //undefined
a = 1; //Number
a = "abc"; //string
a = []; //Array
a = {}; //Object
a = function(){
//Function
}
a = null; // null
var a; //undefined
console.log(a);
a = 1; //Number
console.log(a);
a = "abc"; //string
console.log(a);
a = [1,2,3]; //Array
console.log(a);
a = {}; //Object
console.log(a);
a = function(){
//Function
}
console.log(a);
a = null;
console.log(a);
if(undefined){
console.log("undefined");
} else if (null) {
console.log("null");
} else if (NaN) {
console.log("NaN");
} else {
console.log("false!");
}
notNull = nullable || {};
var arr = [];
console.log(arr, arr.length);
arr[0] = 1;
console.log(arr, arr.length);
arr.length = 3;
console.log(arr, arr.length);
arr[0] = 123;
arr[1] = "abc";
arr[2] = new Date();
console.log(arr);
arr.length = 1;
console.log(arr, arr.length);
arr[5] = "?";
console.log(arr, arr.length);
var stack = [];
stack.push(1);
stack.push(2);
console.log(stack);
var value = stack.pop();
console.log(stack, value);
var queue = [];
queue.push(1);
queue.push(2);
console.log(queue);
var value = queue.unshift();
console.log(queue, value);
var a = 15;
if(a > 10){
console.log("lt 10")
} else if(a > 20){
console.log("lt 20")
} else {
console.log("else")
}
console.log("for");
for (var i = 0; i < 10; i++){
console.print(i);
}
console.log(i);
console.log("while");
while(i > 0) {
console.print(i);
i--;
}
var input = new Input();
new Button("send").on("click", function(){
switch(input.text){
case 'a':
console.log("a");
break;
case 9:
console.log("9");
break;
case "red":
setBackground("red");
break;
case "blue":
setBackground("blue");
break;
default:
console.log("default");
}
});
var obj = {};
obj.hello = "world";
console.log(obj);
var slide = {
name : "javascript",
url : "wikinote.bluemir.me",
tags : ["javascript", "easy"]
};
console.log(slide.name);
console.log(slide["url"]);
function add(a, b) {
return a + b;
}
var sub = function(a, b){
return a - b;
}
function execute(func, a, b){
return func(a, b);
}
console.log(add(3, 5));
console.log(sub(8, 3));
console.log(execute(add, 2, 5));
var someone = {
getName : function(){
return this.name;
},
name : "아이유"
};
console.log(someone.getName());
기본적으로 글로벌 변수
함수 호출시 마지막 점(.) 바로 앞에 것
call, apply, bind된 함수만
예외적으로 첫번째 인자.
var obj = {
func : function(){
console.log(this.str);
},
str : "a"
}
var otherobj = {
str : "b"
}
this.str = "c"
obj.func(); // a
obj.func.call(otherobj); // b
obj.func.apply(otherobj); // b
val = obj.func;
val(); //c
val = obj.func.bind(obj);
val(); //a
var server = new Server(url);
var time = new BigText();
time.text = "Ready";
var start = new Button("Start");
var stop = new Button("Stop");
var timer = new Timer();
timer.displayTo(time);
start.on("click", function(){
timer.start();
});
stop.on("click", function(){
timer.stop();
});
function People(name){
this.name = name;
}
People.prototype.getName = function(){
return this.name;
}
var person = new People("아이유");
console.log(person.name);
console.log(person.getName());
var inner;
function foo() {
var bar = "foo";
inner = function (){
console.log(bar);
}
}
function test(){
var bar = "test";
inner();
}
foo();
test();
상단에 fork버튼을 누를 것
JavaScript 편집기만 빼고 닫기.
HTML을 배제하고 JavaScript만 사용합니다.
여러분의 편의를 위하여 Library를 작성했습니다.
다른 곳에서 왜 안되냐고 묻지 마세요.
혹시 궁금한 사람은 링크 참조
Start 버튼을 누르면 시작한다.
Stop 버튼을 누르면 지난 시간을 표시 한다.
var time = new BigText();
time.text = "Ready";
var time = new BigText();
time.text = "Ready";
var start = new Button("Start");
var stop = new Button("Stop");
start.on("click", function(){
time.text = "Start!";
});
stop.on("click", function(){
time.text = "Stop!";
});
var time = new BigText();
time.text = "Ready";
var start = new Button("Start");
var stop = new Button("Stop");
var timer = new Timer();
start.on("click", function(){
timer.start();
});
stop.on("click", function(){
timer.stop();
});
timer.displayTo(time);
10초를 맞추기 게임!
랭킹제출
top 10 받아오기
var express = require("express");
var bodyParser = require('body-parser')
var nedb = require("nedb");
var app = express();
var db = new nedb();
db.ensureIndex({ fieldName : "dTime", unique : false }, function(err){
});
app.use(bodyParser.json());
app.use(function(req, res, next){
res.set({
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Headers" : "Origin, Content-Type",
"Access-Control-Request-Method" : "POST, GET, OPTIONS"
});
next();
});
app.get("/api/rank", function(req, res){
var limit = parseInt(req.query.limit);
db.find({}).sort({dtime : 1}).limit(10).exec(function(err, docs){
res.jsonp(docs);
});
});
app.post("/api/recode", function(req, res){
var body = req.body;
db.insert({
time : body.time,
dtime : Math.abs(body.time - 10000)
}, function(err,doc){
res.jsonp(doc);
});
});
var server = app.listen(ENV.PORT, function(){
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
var server = new Server("http://timer.bluemir.me/api");
server.reciveTop(10, function(err, data){
if (err) {
throw err;
}
console.log(data);
});
var server = new Server("http://timer.bluemir.me/api");
var list = [];
for(var i = 0;i < 10; i++) {
list[i] = new Text();
}
server.reciveTop(10, function(err, data){
if(err) throw err;
for(var i = 0; i < data.length; i++){
list[i].text = (i + 1) + ". " + (data[i].time /1000);
}
});
var server = new Server("http://timer.bluemir.me/api");
var rank = new List();
server.reciveTop(10, function(err, data){
if(err) throw err;
for(var i = 0; i < 10; i++){
data[i] = data[i].time /1000;
}
rank.list = data;
});
var server = new Server("http://timer.bluemir.me/api");
var rank = new List();
server.reciveTop(10, function(err, data){
if(err) throw err;
rank.list = data.map(function(e){
return e.time /1000;
});
});
var time = new BigText();
time.text = "Ready";
var start = new Button("Start");
var stop = new Button("Stop");
var timer = new Timer();
start.on("click", function(){
timer.start();
});
stop.on("click", function(){
timer.stop();
});
timer.displayTo(time);
var server = new Server("http://timer.bluemir.me/api");
var rank = new List();
server.reciveTop(10, function(err, data){
if(err) throw err;
rank.list = data.map(function(e){
return e.time /1000;
});
});
//...
stop.on("click", function(){
server.sendRecord(timer.time(), function(){
refreshRank();
time.text = "Saved!";
});
timer.stop();
});
function refreshRank(){
server.reciveTop(10, function(err, data){
if(err) throw err;
rank.list = data.map(function(e){
return (time / 1000) + " : " + e.dtime + "ms";
});
});
}
//...
var time = new BigText();
time.text = "Ready";
var start = new Button("Start");
var stop = new Button("Stop");
var timer = new Timer();
start.on("click", function(){
timer.start();
});
stop.on("click", function(){
server.sendRecord(timer.time(), function(){
refreshRank();
time.text = "Saved!";
});
timer.stop();
});
function refreshRank(){
server.reciveTop(10, function(err, data){
if(err) throw err;
rank.list = data.map(function(e){
return (e.time / 1000) + " : " + e.dtime + "ms";
});
});
};
timer.displayTo(time);
var server = new Server("http://timer.bluemir.me/api");
var rank = new List();
server.reciveTop(10, function(err, data){
if(err) throw err;
rank.list = data.map(function(e){
return e.time /1000;
});
});
var server = new Server("http://timer.bluemir.me/api");
var rank = new List();
refreshRank();
http://javascript.crockford.com/javascript.html
https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript
https://developer.mozilla.org/ko/docs/Web/JavaScript
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures