바닐라 자바스크립트 1 - 노마드

mini·2022년 11월 8일
0

tree.js - 자바스크립트로 3D 구현
리액트 네이티브 - 자바스크립트로 IOS, Android 앱을 만듬.
일렉트론 - 자바스크립트, HTML, CSS 로 데스크탑 앱을 만듬
ml5.js - 머신러닝


<데이터 타입>

  • type of undefined - variable은 존재 하는데 value는 존재 하지 않는다.
let something;
console.log(somthing) -> undefined
  • type of null - value는 존재하는데 그 값이 비어있다. null 은 자연적으로 생기지 않고 아무것도 없는 상태를 정의하기 위해 넣어준다
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);
  • EventLisener에 어떤 function을 추가하던 간에 자바스크립트에선 첫번째 argument로 발생된 event에 대한 정보를 준다.

어떤것을 저장 하고 싶다면?

  • 예로 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") -> 결과는 지워진다.

0개의 댓글