tree.js - 자바스크립트로 3D 구현
리액트 네이티브 - 자바스크립트로 IOS, Android 앱을 만듬.
일렉트론 - 자바스크립트, HTML, CSS 로 데스크탑 앱을 만듬
ml5.js - 머신러닝
<데이터 타입>
let something;
console.log(somthing) -> undefined
const amIFat = null;
console.log(amIFat) -> null
<배열>
object
const player = {
name: "mini",
point: 24
}
console.log(player.name);
console.log(player["name"]); //같은 역할을 함
player.name = "miniya"; // const는 수정 할수 없다 했지만 이 경우는 object안에 name을 수정하기 때문에 에러가 나지 않는다
player = "blank" // 에러가난다 왜냐하면 player 자체를 바꾸려 하기 때문에
player.lastName = "yoo" // lastName이라는 property는 없지만 이렇게 추가 할수있다.
<함수>
function sayHello(nameOfPerson) {
console.log(nameOfPerson)
}
sayHello("mini") //함수를 실행할때 인자로 받은 값을 펑션에 보내고 펑션에서 인자(argument)를 받는다
<리턴 return>
결과 값을 get, have 하기 위해 사용된다. 나의 코드안에서 결과를 얻을 때.
const age = 90;
function calculateKrAge(ageOfForeigner) {
ageOfForeigner + 2;
}
const KrAge = calculateKrAge(age);
console.log(KrAge); //undefined
------------------------------------------ 이지만 return 키워드를 사용하면
const age = 90;
function calculateKrAge(ageOfForeigner) {
return ageOfForeigner + 2;
}
const KrAge = calculateKrAge(age); - 함수를 실행하면 return 값 으로 대체 된다.
console.log(KrAge); //92 - 이제 값이 담긴다.
<조건문 Conditional>
const age = parseInt(prompt("how old are u?"));
함수는 내부에서 외부로 전해짐
<자바스크립트로 HTML>
이미 자바스크립트는 이미 HTML 연결되 있고 console.dir(document)
로 보면 확인할수 있다 object로 되어있고 그 property에 접근해서 조작 할 수 있다.
const hellos = document.querySelector(".hello span")
안에 요소도 검색 할 수 있기 때문에 유용.
const hellos = document.querySelectorAll(".hello span")
안의 모든 요소 검색
<자바스크립트 Event>
Event 검색 방법 - console.dir(target) 해서 object를 살펴보면 onkeyup, onchange 와 같이 on-으로 시작하는 object에서 on을 빼면 addEventListener로 사용할 수 있다
예시) title.addEventLister("keyup", [function name]);
or 다른 예시) title.onclick = [function name];
const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("#login-form input");
const loginButton = loginForm.querySelector("button");
function onLoginSubmit(tomato) {
// const username = loginInput.value;
tomato.preventDefault(); //어떤 event의 기본 행동을 발생 되지 않도록
console.log(tomato);
}
loginForm.addEventListener("submit", onLoginSubmit);
예로 user name 을 저장 한다 했을때 그 API 이름은 ? localStorage 이다.
localStorage 는 우리가 브라우저에 무너가를 저장 할수 있게 하고 나중에 가져다 쓸수 있게 한다.
localStorage 를 확인 하고 싶다면 개발자 tool 에서 Application > Stotage > Local Storage 에서 확인 할수 있다
하지만 localStorage 는 array를 저장 할 수 없다.
해당 Storage 엔 많은 Storage가 있지만 (Session, IndexedDB, Web SQL, Cookies) local storage 가 제일 다루기 쉽다.
<사용법>
localStorage.setItem("username", "mini");
하면 이렇게 저장 된다.
localStorage.getItem("username")
-> 'mini'localStorage.removeItem("username")
-> 결과는 지워진다.