자바스크립트 01

회사에 입사하고 가장 많이 본 언어는 자바스크립트가 아닌가 싶다...

근데 자바스크립트를 하나도 모른다

학원에서 배운 맛뵈기로 배운 자바스크립트는 진짜 간단한 회원가입 유효성 검사 뿐이었고

dom이 뭔지 설명도 안해줬다 ㅋㅋㅋㅋㅋ

정말 백지장인 상태로 회사에 입사했구낭.. 하하하하하ㅏ하하

처음 입사하고 간단한 프로젝트를 했었는데

거기서 자바스크립트를 제대로 처음 접했다.

document가 뭔지도 모르는 나에게 혜웅 선배님이 기초부터 설명해주셨는데

얼마나 띨빡으로 봤을까 싶다 ㅋㅋㅋㅋ

 

그래도 그때 나름 찾아보면서 공부해서 지금은 기초적인건 안다

근데 무언가를 만들어보기에는 아직 부족한것 같아서 하나하나 맨 처음부터 뼈부터 만든다는 생각으로 공부를 해보려고 한다!

이번 5월달은 자바스크립트를 뽀개야지

노마더 코더에서 정말 기초 강의를 차례로 들었다.

이때 중간중간 몇가지를 정리했는데 정리내용을 블로그에 올리고자 한다.

 

 

1. 

프론트단 페이지는 HTML, CSS, JavaScript(.js) 가 있는데

이 세 페이지를 연결해줄 수 있는 접착제가 필요하다.

페이지의 연결고리를 먼저 살펴보자면,

브라우저는 HTML을 open한다.

HTML은 JavaScript와 CSS를 open한다.

 

(이때 html 페이지의 기본 형식을 찍으려면 !입력하면 자동완성 됨 ㅎㅎ)

 

아래는 html파일에 javascript와 css 파일을 풀로 붙여줌

- javascript 

<script src="app.js"></script>

 

- css

<link rel="stylesheet" href="style.css">

 

 

 

2. 변수 선언 할당

변수를 할당하는 방법에는 const let var이 있다

 

- const 상수

값을 업데이트 못함

 

- let 

한번 선언하면 값이 안바뀜

 

- var 

옛날에 쓰임(하지만 우리 회사 프로젝트에서는 쓰이고 있음)

선언과 초기화가 동시에 됨

 

3. prompt

alert처럼 창 띄우는방식이지만 구식임

ui변경이 불가능하다.

 

4. document

개발자도구 콘솔에서 document 치면

전체 코드를 볼 수 있다.

 

5. console.dir(document)

해당하는 dom이 가지고 있는 정보를 다 볼 수 있음

 

 

6. querySelector

- document.querySelector(".hello h1");

.hello는 클래스 이름 / h1은 태그

하지만 hello클래스 안에 h1태그가 여러개 있을 수 도 있는데,

이때는 중복값 중에서 첫번째만 가져오게된다.

여러가지 값을 모두 가져오고 싶을때는 querySelectorAll을 사용한다

 

- document.querySelectorAll("#hello");

조건에 맞는 모든 값들을 불러오는데 

이때 리스트로 값을 가져온다.

 

- document.querySelector("#hello h1");

hello는 id 이름 / 

 

 

7. Event 2가지 방법

element.onclick = method();

element.addEventListener("click")

 

 

8. window

window는 현재 스크립트가 작동중인 창을 의미한다.

 

window.addEventListener("~)

window에 다양한 이벤트를 줄 수 있음

MDN문서에서 다양한 이벤트 종류를 확인 할 수 있다

https://developer.mozilla.org/ko/docs/web/API/window

Window - Web API | MDN

 

 

9. form과 div의 차이

<input

required

maxlength="15"

type="text"

placeholder="what is your name?"

/>

 

 

form 태그 안에서 버튼을 클릭하면 텍스트 값이 초기화 되는데 ,

이 이유는 form 이 submit 되고 있기 때문이다. -> 새로고침이 됨

 

 

 

10. button 태그

<button>Log In</button>

위와 같은 방법으로는 

<input type ="submit" value = "Log In">

form태그 안에서 사용하면 버튼 클릭 안해도 Enter누르면 자동으로 리셋 되면서 제출됨

-> form 태그 사용해서 그런거임

-> div태그 이용하면 엔터 안됨

-> form이 submit 될때마다 페이지가 새로고침 된다는 단점이 있음

 

 

 

11. preventDefault

위의 새로고침이 된다는 단점을 해결하기 위한 방법이 있다

const loginForm = document.querySelector("#login-form");

const loginInput = document.querySelector("#login-form input");

function onLoginSubmit(tomato) {

tomato.preventDefault();

console.log(tomato)

loginButton.addEventListener("submit", onLoginSubmit);

https://programming119.tistory.com/100

[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?

★ 중요 ★
form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!

 

 

 

이 preventDefault 함수는 EventListener 함수의 '첫 번째 argument' 안에 있는 함수이다. 첫 arument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는(기본적으로)argument를 담아서 함수를 호출하는데, 이 argument가 기본 정보들을 제공하고 있다. ex) 누가 submit주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해보면 알 수 있음

 

 

loginForm.addEventListener("submit", onLoginSubmit);

// submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미

addEventListener에서 함수는 우리가 부르는게 아니라 브라우저가 실행시키는 것이다.

 

 

 

12. hidden

.hidden {

display: none;

}

css 위의 만들어준걸 html태그 안에 적으면 그 태그 부분이 사라짐

 

 

 

 

13. 문자열 합치기

위랑 아래랑 같은 방법이다.

const username = loginInput.value;

greeting.innerText = "Hello " + username;

 

 

14. css수정

classList.add로 CSS를 추가할 수 있다.