오늘부턴 자바스크립트를 시작했다! 자바스크립트 기본 문법들은 엘리스 코딩테스트 준비할 때 사전학습으로 이미 한 번 봤던 내용들이라 어렵지 않았다. 오늘 수업 시간에 보니 많은 분들이 이미 vscode에 git을 연동해서 사용하고 계시길래 나도 급하게 연동을 해 보았는 데 역시 git은 맘 같이 쉽게 되지 않았다.. ㅠ 쉬는 시간과 점심 시간도 모두 반납하고 어찌저찌 하다보니 연동은 성공했는데 branch 때문에 애를 먹었다...ㅠ 아직까지 속 시원하게 해결되지 않아서 찝찝하다...(⋆ˋ⑉̈ˊ)൭൭⁼³₌₃
다음에 날 잡고 다시 해봐야겠다..ㅜㅜ
해결했다. 이렇게 쉬운 걸 난 왜 헤맨걸까
자바스크립트 실행 방법
1. 개발자도구 console창
2. html 파일 안의 script 태그
3. onclick 속성
- `(백틱)에서 줄바꿈하면 줄바꿈이 반영된다.
- 변수는 데이터에 이름을 붙인 것이다.
- 자바스크립트에서 스타일 속성 바꾸기
document.querySelectoy('선택자').style.backgroundColor = 'red';
- this는 맥락적으로 값이 달라지는 내장된 변수다.
- 변수 선언할 때 var는 잘 사용하지 않고 let을 더 많이 사용한다.
- 삼항연산자
// 명제 ? 참일 때 : 거짓일 때 a === '3o' ? console.log('true') : console.log('false');
- 자바스크립트의 hoisting : 함수를 정의하기 전에 먼저 호출해도 실행이 되는 기능
- scope : 변수가 어디까지 적용되는지에 대한 개념
- defer : DOMContentLoaded 발생 이전에 실행해야 함을 나타내는 속성
즉, HTML을 모두 파싱한 후 실행되어야할 때 사용
<script src="script.js" defer></script>
오늘도 자바스크립트에 대해서 학습했다! html이나 css처럼 똑같이 온라인 강의가 주어질 줄 알았는데 프리트랙에서 이미 학습한 내용이라 그런지 따로 강의는 안 올라오고 문제집만 올라왔다. 생각보다 문제를 빠르게 풀어서 남은 시간 동안 프리트랙에서 자바스크립트 기초 내용을 정리해보았다!
자바스크립트 기초📎기초 문법 📎내장 객체와 브라우저 객체
오늘도 이어서 자바스크립트 학습을 했는데 실습 강의부터 난이도가 확 어려워져서 당황스러웠다... 어제까지만 해도 자바스크립트 기초 문법을 하더니 오늘은 갑자기 이벤트 리스너가 튀어나왔다... 처음 보는 개념도 너무 많고 추가적으로 개인 공부할게 너무 많아졌다! ㅜㅜ
이고잉님께서 처음부터 세련된 코드를 짜려고 하는게 방해가 될수도 있으니 최대한 원초적인 코드로 가는 것도 좋은 훈련이라고 조언해주셨다!! 메모메모...
- innerHTML / innerText
- innerHTML과 innerText의 차이 - Tag가 나오는 유무
- 배열은 서로 연관된 데이터를 그루핑한 후에 이름을 붙인 것이다.
- 자바스크립트의 인덱스는 0부터 시작한다.
- 함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인 것이다.
- 함수 정의:
function 함수명() {}
- 함수 호출:
함수명()
-> 내장(빌트인) 함수 alert(), prompt(), ...- API (어플리케이션 프로그래밍 인터페이스)
자바스크립트 문제집을 푸는 날이었는데 너무 어려워서 힘들었다ㅠㅠ 해설을 보지 않고는 해결한게 없을 정도... 안 배운 내용도 많이 나와서 수업 끝나고나선 밤새 자바스크립트 문서 부분 공부하고 정리했다. 다음주부터 스터디도 하는 데 스터디 때문에라도 더 공부해야 되니까 확실히 짚고 넘어갈거다!
자바스크립트 DOM / 이벤트📎DOM 📎Node 📎Event
오늘은 수업 말고 6시까시 자기소개 페이지 만들어서 제출해야하는 과제가 있었다. 디자인을 신경쓰다보니 시간도 촉박했다.. 다 만들고 제출했다가 뭔가 마음에 안 들어서 저녁에 갈아엎고 처음부터 다시 만들었다.
내가 만든 자기소개 페이지 🌐Unknown Web