각진 세상에 둥근 춤을 추자

갑자기 자동 완성이 되지 않을 때 그 많은 코드를 언제 하나하나 입력하나 싶기도 하고, 또 정확하게 입력할 수 있을까 싶기도 해 난감하다. 1번 solution (1) 왼쪽 하단 톱니바퀴 아이콘 클릭 - Settings (2) Extensions - Emmet - Trigger Expansion On Tab 체크 2번 solution (1) 하단의 언어 표기가 'HTML'로 되었는지 확인. 다른 언어라면 클릭 후 html 검색 후 클릭 3번 solution (1) 왼쪽 톱니바퀴 아이콘 - Settings - Update - Update:mode 를 none으로 바꾼 후 VSCode 재시작 1번 설루션이 안 되면 2번, 2번 설루션이 안 되면 3번까지 적용한 후 VSCode를 재시작하면 자동완성 기능이 된다.

브라우저 객체 브라우저에 내장된 객체를 브라우저 객체라고 한다. 브라우저 객체는 다음 그림과 같이 계층적 구조로 이루어져 있다. window 객체 window는 브라우저 객체의 최상위 객체이다. 메서드 종류 설명 open("URL", "새 창 이름", "새 창 옵션") URL 페이지를 새 창으로 나타낸다. alert(data) 경고 창을 나타내고 데이터를 보여준다. [확인]버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행한다. prompt("질문", "답변) 질문과 답변으로 질의 응답창을 나타낸다. confirm("질문 내용") 질문 내용으로 확인, 취소 창을 나타낸다. [확인] -> true 반환 [취소] -> false 반환 moveTo(x, y) 지정한 새 창의 위치를 이동한다. res..

문자열 객체(String Object)는 문자형 데이터를 객체로 취급한다. let 참조 변수 = new String(문자형 데이터) let 참조 변수 = 문자형 데이터 let str1 = new String("Hello"); let str2 = "Hello"; 문자열 객체의 메서드와 속성은 다음과 같다. 종류 설명 charAt(index) 인덱스 번호에 해당하는 문자 반환 let str ="hello this is JS".str.charAt(2); -> 'l'을 반환함 indexOf("찾을 문자") 왼쪽부터 제일 먼저 일치하는 문자의 인덱스 번호를 반환 만약 찾는 문자가 없다면 -1을 반환 let str="hello this is JS".str.indexOf(is); -> 11 반환 lastIndexOf..

변수에는 데이터가 하나씩 저장된다. 여러 개의 데이터를 하나의 장소에 저장하려면 배열 객체(Array Object)를 생성한다. // 방법1 let 참조변수 = new Array(); 참조변수[0]=값1; 참조변수[1]=값2, 참조변수[2]=깂3, ... 참조변수[n-1]=깂n; // 방법2 let 참조변수 = new Array(값1, 값2, 값3, ... 값n); // 방법3 let 참조변수 = [값1, 값2, 값3, ... 값n]; [예제1] 배열 객체 생성 및 저장된 데이터 출력 배열 객체에서 사용하는 메서드와 속성은 다음과 같다. 종류 설명 join(연결문자) 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환 reverse() 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환 s..

자바스크립트 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학 객체(Math Object)가 있다. 종류 설명 Math.abs(숫자) 숫자의 절댓값을 반환 Math.max(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 가장 큰 값을 반환 Math.min(숫자1, 숫자2, 숫자3, 숫자4) 숫자 중 가장 작은 값을 반환 Math.pow(숫자, 제곱값) 숫자의 거듭제곱을 반환 Math.random() 0~1 사이의 난수를 반환 Math.round(숫자) 소수점 첫째 자리에서 반올림하여 정수를 반환 Math.ceil(숫자) 소수점 첫째 자리에서 무조건 올림하여 정수를 반환 Math.floor(숫자) 소수점 첫째 자리에서 무조건 내림하여 정수를 반환 Math.sqrt(숫자) 숫자의 제곱근값을 반환 Math..

자바스크립트는 객체 기반 프로그래밍 언어이다. 자바스크립트의 객체에는 내장 객체, 브라우저 객체 모델(BOM, Browser Object Model), 문서 객체 모델(DOM, Document Object Model)등이 있다. 내장 객체(Built-in Object)는 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해 사용할 수 있다. 내장 객체는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다. 내장 객체를 생성하는 기본형은 다음과 같다. 참조 변수(인스턴스 이름) = new 생성함수() 간단한 예제를 통해 내장 객체 생성에 대해 알아본다. [예제] 날짜 정보 객체 날짜, 시간 관련 정보를 제공받고자 할 때는 날짜 객체(Date Object)를 생성한다...

선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때, 그에 해당하는 코드를 실행한다. let 변수 = 초깃값; switch(변수){ case 값1: 코드1; break; case 값2: 코드2; break; case 값3: 코드3; break; ... default: 코드5; } 변수에 저장된 값은 switch문을 만나면 case의 값과 비교, 검사한다. 만약 변수의 초깃값이 case 값1과 일치하면 코드1을 실행하고 break를 통해 switch문을 종료한다. 만약 일치하는 case 값이 없다면 마지막 default의 코드5를 실행하고 switch문을 종료한다. 간단한 예제를 통해 switch문을 이해해 본다.

제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다. 제어문에는 조건 만족 여부에 따라 코드를 제어하는 조건문, 변수 일치에 따라 코드를 제어하는 선택문 그리고 특정 코드를 여러 번 반복해서 실행하는 반복문이 있다. 조건문에는 if문, else문, else if문이 있고, 선택문에는 switch문, 반복문에는 while문과 for문이 있다. if문 if문은 조건식을 만족(true)할 경우에만 코드를 실행한다. if(조건식){ 자바스크립트 코드; } (예제1) (예제2) if-else문 조건식을 만족할 경우와 만족하지 않을 경우에 따라 실행되는 코드가 다르다. if(조건식){ 자바스크립트 코드1; }else { 자바스크립트 코드2; } (예제1) (참고) confirm() 메서드 confi..

적정 체중 구하기 테스트의 작동 원리는 다음과 같다. 적정 체중 = (신장 - 100) X 0.9 은지의 신장은 165cm이고 체중은 65kg이라고 했을 때 체중 상태를 알아 본다. 은지의 적정 체중을 계산하면 다음과 같은 결과가 나온다. 신장: 165(cm) 체중: 65(kg) 적정 체중: (165-100) X 0.9 = 58.5 (kg) 결과: 적정 체중은 58.5kg이며, 현재 적정 체중에서 6.5kg 초과한 것을 알 수 있다. (물론 근육량을 포함하지 않은 신장과 체중 수치만으로는 적정 체중을 가늠할 수 없다.) (1) step1_heiweight.html 은지의 신장에 맞는 적정 체중을 출력하는 프로그램을 작성한다. (2) 은지의 신장과 체중이 바뀌었다. 새로워진 신장과 체중을 입력받은 후 적정..

변수에 저장되는 데이터의 가공을 위해 연산자(Operator)를 사용한다. 연산자에는 산술, 증감/감소, 복합 대입, 관계, 논리, 일치, 조건 연산자 등이 있다. 산술 연산자 문자 결합 연산자 문자 결합 연산자는 연산 대상 데이터가 문자형 데이터이다. 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다. 대입 연산자 증감 연산자 증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 1씩 감소시키는 감소 연산자(--)가 있다. 비교 연산자 논리 연산자 삼항 조건 연산자 삼항 조건 연산자는 조건식(true or false)의 결과에 따라 실행 결과가 달라지는 삼항 연산자이다.