THE 나은 웹사이트

1. 객체 리터럴 ** 객체 리터럴이란 중괄호로 묶여있고 key 값과 value값의 한 쌍으로 묶어 저장할 수 있는 저장소 역할이다 (1) 객체 리터럴 기본 형태 let obj = { name : 'k', age: 20, hobby : 'soccer', } let name = obj.name; let age = obj.age; let hobby = obj.hobby; obj.country = 'Korea'; console.log(name, age, hobby, country); // k 20 soccer Korea 출력 -- 객체 리터럴 내 key값과 value값의 한 쌍은 콤마(,)로 구분한다. -- 객체 리터럴 내부 value값에 접근할 때에는 2가지 방법 1) 객체이름.key값 2) 객체이름[ 'k..

1. 함수 ** 함수를 사용하는 이유? : 반복적인 작업을 줄여주고 재사용성 증가를 위해 (1) 함수의 기본 형태 function a(){ // 함수 선언문 내용 } let b = function(){ // 함수 표현식 내용 } let c = ()=>{ // 화살표 함수 내용 } (2) 함수의 매개변수와 인수 -- 함수 호출 시 인수로 괄호안에 값을 넣어주면 함수 매개변수로 받을 수 있다 function a(first, second){ console.log(first+second); } a(1,2); // 3출력 function prc(a,b,c,d,e,f){ console.log(arguments); } prc(1,2,3,4,5,6); // Arguments(6) [1,2,3,4,5,6] 콘솔에 출력 ..

1. 배열이란? - 여러가지 데이터를 저장하는 저장소 역할 let fruits = ['orange', 'watermelon', 'grape', 'apple']; ** 배열에 있는 값을 꺼내거나 수정하려면 [ ]를 이용한다. let fruits = ['orange', 'watermelon', 'grape', 'apple']; let one = fruits[0]; let two = fruits[1]; fruits[3] = 'melon'; console.log(one, two, fruits); // orange watermelon ['orange', 'watermelon', 'grape', 'melon'] 출력 [여러가지 배열 메소드] ** 배열이름은 편의상 arr로 함 - arr.unshift(값) : 배열..

1. for문 - for문의 기본형태 for(초기문;조건문;증감문){ 동작식; } * 초기문은 보통 변수를 선언 * 조건문은 조건이 false가 될 때까지 동작식 반복 수행 * 증감문은 선언한 변수를 증감해줌 for(let i=0;i

1. if문 (1) if문의 기본형태 if(조건){ 내용 // 조건이 참일 때 실행 } if(조건){ 내용 // 조건이 참일 때 실행 }else{ 내용 // 조건이 거짓일 때 실행 } if(조건1){ 내용 // 조건 1이 참일때 실행 }else if(조건2){ 내용 // 조건 1이 거짓이고 조건 2가 참일 때 실행 }else{ 내용 // 조건 1과 조건 2 둘다 거짓일 때 실행 } -- 조건을 불리언값으로 바꾸어 true이면 실행 false이면 실행하지 않거나 else if 나 else의 코드 내용이 실행된다. (2) if문 예제 let a = 3; let b = 2; let c = a+b; if(c === 3){ console.log('c = 3'); }else if(c === 5){ console.l..

1. 산술연산자 + : 더하기 연산자 - : 빼기 연산자 * : 곱하기 연산자 / : 나누기 연산자 ** : 거듭제곱 연산자 % : 나머지 연산자 2. 할당연산자 : '='을 통해 어떠한 값을 피연산자에 할당한다. 3. 논리연산자 && : and의 의미 ||: or의 의미 ! : not의 의미 4. 비교연산자 > : 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우를 의미함 =: 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같음을 의미함 b); // true 출력 console.log(!c); // false 출력 console.log(a == b); // false 출력 console.log(a == d) // true 출력 console.log..

1. 자료형 (1) 문자열(string) : 자바스크립트에서 문자열은 따옴표로 감싼다. 따옴표의 종류에는 ' '(작은 따옴표), " "(큰 따옴표), ` `(백틱)이 있다. 백틱의 경우 ${ }을 통해 변수를 입력할 수 있다. let a = 'Kim'; let b = 'Park'; let age = 20; let c = `${b}의 나이는 ${age}세`; (2) 숫자형 : 숫자형은 정수나 실수, NaN, Infinity를 나타냄. 숫자형끼리 산술연산자를 이용하여 연산이 가능하다. NaN은 Not a Number의 약자로 숫자가 아님, Infinity는 무한대를 나타낸다. let a = 13; let b = 12; console.log(a+b); // 25출력 (3) 불린형 : 값으로는 true, fal..

1. 변수란? 변수는 어떠한 값을 저장하는 저장소 역할이다. 변수는 let, var, const로 선언할 수 있으며 대입연산자 '='을 통하여 변수명에 변수 값을 저장할 수 있다. var a = 1 let b = 2 const c = 3 1,2,3이라는 값이 각각 변수명 a,b,c에 저장되었다. ** var의 경우 호이스팅등의 문제로 요즘에는 잘 사용하지는 않는다. ** 변수명 작성시 주의점 1. 변수명의 첫글자는 숫자가 될 수 없다. 2. 특수기호는 $ 또는 _ 을 제외한 다른 문자는 사용할 수 없다. 3. 자바스크립트 예약어는 변수명으로 쓸 수 없다 ex) let , function, while등 ** 변수명은 변수가 무엇을 담고 있는지 잘 설명할수 있도록 작성하는 것이 바람직하다. 2. 변수 값 수..

1. script 태그 javascript 코드 구현을 하기 위한 태그 -- 내부 script : 코드가 비교적 짧을 때 사용, body태그 내부에 위치 ** 웹 페이지를 실행했을 때 Hello World! 라는 경고창(alert)을 띄운다. 코드가 끝나는 부분에 세미콜론을 찍어 다른 코드와 구분 -- 외부 script : 외부 스크립트 파일 연결시 src속성을 통해 js파일의 경로를 적어준다. ** 자바스크립트의 코드 양이 많을 경우 외부 파일을 따로 생성하여 html과 구분하여 주는 것이 좋다. 2. 콘솔 창 사용하기 자바스크립트를 처음 작성하다 보면 많은 에러들을 마주하게 된다. 그런 에러들이 어디서 발생되었는지 간단하게 알려주는 도구가 있는데 chrome 브라우저의 개발자도구이다. [마우스 오른쪽..