Javascript (모던 자바스크립트)
1.Javascript 기초 (0) - 자바스크립트란.
인프런의 렛츠기릿 자바스크립트고민을 많이하다가 그냥 이걸로 듣기로 했다...!!사용IDE : vs설치 참고모던 자바스크립트모질라 자바스크립트
2.Javascript 기초 (1) HTML 연결하기: <script> 태그
🤔들어가면서🤔 ➕ 엔진동작 과정 엔진이 스크립트를 읽는다. (파싱) 읽어들인 스크립트를 기계어로 전환한다. (컴파일)기계어로 전환된 코드를 실행한다. 📕 js와 html의 연결 방법 📖 html파일 내에 스크립트를 직접 작성 `` 태그를 이용해 html파일
3.Javascript 기초 (2) HTML 연결하기: script 태그의 위치에 따른 차이점
1.<head>태그 내에 <script>선언하기2\. <body> 태그 끝에 <script>선언하기3\. <head> 태그 + async 속성 추가4\. <head> 태그 + defer 속성 추가 엔진이 스크립트를 읽는다. (파싱)읽어드
4.Javascript 기초 (3) 코드구조
자바스크립트는 줄바꿈이 없으면 대부분의 경우 세미콜론을 자동삽입해서 처리한다.하지만 세미콜론을 자동삽입하지 않는 경우가 있고 오류로 이어질 수 있기 때문에 문장에 세미콜론(;)을 넣어야한다.스크립트의 내용을 설명해주는 기능으로 쓰는 문장, 자바스크립트엔진은 주석을 무시
5.Javascript 기초 (4) 변수와 상수
자바스크립트는 사용자나 서버로부터 입력받는 정보를 처리하는 방식으로 동작해 사용자의 정보나 메시지의 정보를 저장하는 변수가 필요하다. 데이터를 저장할 때 쓰이는 이름이 붙은 저장소이다. 상품이나 방문객등의 정보를 저장할 때 변수를 사용한다.let이란 키워드를 사용해 변
6.Javascript 기초 (5) 자료형, typeof연산자
⚠️ 자바스크립트에서 변수는 자료형과 상관없이 데이터를 가질 수 있다.따라서 변수는 문자열을 저장했다가 숫자형을 저장할 수 있다.자바스크립트는 동적타입언어이다.동적타입 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 말한다.자바스크립트는
7.Javascript 기초 (6) alert, prompt, confirm
사용자는 확인 버튼을 누르기 전까지는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다.모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.메시지를 보
8.Javascript 기초 (7) 형변환
자료형을 변환하는 것을 말한다.자바스크립트에서 함수와 연산자에 전달되는 값은 적절한 자료형으로 자동변환된다.명시적으로 개발자가 형변환하는 경우도 있다.alert메서드의 매개변수는 문자형이다. 따라서 다른형의 값을 전달받으면 이 값은 문자형으로 자동 형변환된다.연산을 하
9.Javascript 기초 (8) 연산자
\+ : 덧셈 연산자\- : 뺄셈 연산자\* : 곱셈 연산자/ : 나눗셈 연산자 (js는 실수와 정수를 구분하지 않기 때문에 5/3 = 1.666, 4/2 = 2) % : 나머지연산자 (나머지를 정수로 반환)\*\* : 거듭제곱연산자 (실수로도 가능하기 때문에 제곱근을
10.Javascript 기초 (9) 조건문
단순히 괄호 안의 조건이 true일때 코드블록을 실행한다.⚠️ 단일수행문일 경우 괄호로 감싸지 않아도 되지만 가독성을 위해 사용하는 것이 좋다.괄호의 조건문이 불린형이 아닐 때 형변환을 통해 평가한다.falsy: 0, 빈 문자열"", null, undefined, Na
11.Javascript 기초 (10) 논리연산자
연산자 설명&& : 두 항 모두 참이어야 참이다.¦¦ : 둘 중 하나만 참이여도 참이다.! : 참인 경우 거짓으로 바꾸고, 거짓인 경우 참으로 바꾼다.만약 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다.불린형으로 변환false : 0, null, unde
12.Javascript 기초 (11) 병합연산자 ??
??여러 피연산자 중 그 값이 확정된 피연산자를 반환하며, 그런 피연산자가 하나도 없으면 마지막 피연산자를 반환한다.1\. 값이 정해진 변수를 간편하게 찾아낼 수 있다.2\. 변수에 기본값을 할당하는 용도로 사용할 수 있다.|| : 여러 값들 중 첫번째 truthy 값
13.Javascript 기초 (12) 반복
condition(조건)이 truthy 이면 반복문 본문의 코드가 실행됩니다.👉 condition이 falsy되면 반복문이 멈춘다.condition이 반복문 본문 아래로 간다.조건이 truthy인 동안엔 본문이 계속 실행된다 .condition이 falsy되면 반복문
14.Javascript 기초 (13) switch문
x와 동일한 case문을 실행한다.x변수가 아닌 표현식이 올 수 있다. 표현식 실행 후 최종 값으로 판단한다.value1switch의 x와 자료형까지 동일할 때 case문을 실행한다. (엄격한 동치비교)break문을 만나거나 switch 문이 끝나면 코드의 실행은 멈춥
15.Javascript 기초 (14) 함수
😊들어가면서😊 📕 함수 함수를 만들고 나면 선언을 통해 사용할 수 있다. 중복 코드를 줄일 수 있다. ex) alert(message), prompt(message, default), confirm(question) 📖 함수 선언 function , 함수aud
16.Javascript 기초 (15) 함수 표현식
❤️🔥들어가면서❤️🔥 ➕ 함수를 만드는 방법 함수를 만드는 방법에는 두개의 방법이 있다. 저번 글에서는 함수 선언문방식을 사용했고 이번 글에서는 함수 표현식에 대해서 알아보겠다. 함수 선언문 방식 함수 표현식 방식 함수를 만들고 그 함수를 변수에 할당하기
17.Javascript 기초 (16) 화살표 함수 기본
함수를 만드는 간단한 방법인데, =>를 사용해서 함수를 만들 수 있다.변수명 : 함수가 저장된다. ⚠️ 코드의 결과가 저장되는 것이 아니다.매개변수 : 인수가 하나 밖에 없다면 괄호를 생략할 수 있다. 인수가 하나도 없을 때는 생략할 수 없다.코드 : 결과를 반환한다.
18.Javascript 기초 (17) 디버깅 방법
\[참고 영상](https://www.youtube.com/watch?v=2GhfkfcoFr4)\[참고 사이트](https://ko.javascript.info/debugging-chrome)🤔 디버거를 하면 뭐가 좋을까? 👉 해당 시점의 변수 값
19.Javascript 기초 (18) 코딩 스타일
좋은 코드에 대해서이는 모던스타일에서 추천하는 코딩 스타일이다. 무조건적으로 따를 필요는 없다고 하지만 공동의 프로젝트에서 코드스타일을 맞추는건 읽기에도 좋을 것 같다.🤔 if문의 한 줄 짜리 수행문을 어떻게 하면 좋을까?😤 필요없는 중괄호 중괄호가 필요하지 않기
20.Javascript 기초 (19) 좋은 주석
🙅♀️ 좋지 않은 주석코드에서 일어나는 일 -> 코드가 불분명하게 적어라(함수를 활용해서!)🙆 좋은 주석 아키택처함수 용례와 매개변수 정보를 담고 있는 주석당장봐선 명확해 보이지 않는 해결방법에 대한 설명🗒️ 함수 용례 작성 문법
21.Javascript 기초 (20) 좋지 않은 코드
짧다고 좋은 코드가 아니다. 가독성을 고려해야한다.한글자의 코드는 변수를 찾기 힘들고, 코드에디터의 "검색"기능 활용을 힘들게 만든다.또한 for문의 변수는 i가 적절하다.변수의 이름을 간단하게 하기 위해서 약어를 쓰는 것은 좋지 않다.흔하게 num이란 변수명을 지정할
22.Javascript 기초 (21) 객체