Frontend/Javascript (26) 썸네일형 리스트형 조건문과 반복문 조건문 - if // if if(조건식) { // 조건의 결과 참일 때 수행되는 문장; // 1줄인 경우 괄호({}) 생략 가능 } // if - else if(조건식){ // 조건의 결과 참일 때 수행되는 문장; } else { // 조건의 결과 거짓일 때 수행되는 문장; } // if - else if - else if(조건식1){ // 조건식1의 결과 참일 때 수행되는 문장; } else if (조건식2){ // 조건식1의 결과가 거짓이면서 // 조건식2의 결과 참일 때 수행되는 문장; } else { // 조건식1,2 모두 거짓인 경우 수행되는 문장; } // 중첩 if 문 if(조건식1){ // 조건의 결과 참일 때 수행되는 문장; if(조건식2) { // 조건식1의 결과가 참이면서 // 조건식.. [][][] 화살표함수 객체 객체 중괄호를 작성하고 키와 값으로 구성된 프로퍼티가 들어감 각 프로퍼티는 쉼표로 구분하고, 마지막 쉼표는 없어도 되지만 있는게 수정/삭제/이동 시 용이 객체의 접근은 . 또는 [ ] 사용 // 객체 작성 const human = { name:'mark', age:33, } // 객체 접근, 추가, 삭제 human.name // mark (접근) human['age'] // 33 (접근) human.gender = 'male'; // (추가) human['hairColor'] = 'black; // (추가) delete human.hairColor; // (삭제) 단축 프로퍼티 프로퍼티 이름과 변수명 동일하기 때문에 축약 사용 가능 in 프로퍼티가 존재하는지 확인 메서드 : 객체 프로퍼티로 할당된 함수 .. 비교연산자와 논리연산자 비교연산자 - 동등 연산자와 일치 연산자 == : 값만 비교 (동등 연산자) === : 타입까지 비교 (일치 연산자) const a = 1; const b = "1"; console.log(a == b); // true console.log(a === b); // false // == 동등 연산자 // ===는 타입까지 비교 -> 일치 연산자 논리 연산자 or : 첫 번째 true를 발견하는 즉시 평가를 멈춤 and : 첫 번째 false를 발견하는 즉시 평가를 멈춤 -> 프로그램 효율 측면에 있어서 어떤 순서로 평가(조건)를 배치하는지가 중요 우선순위 : and가 or보다 우선순위 높아서 먼저 평가됨 형변환 형변환 prompt로 입력받은 값은 무조건 문자형 숫자형이 아니더라도 나누기같은 표현식은 숫자형으로 자동적으로 변환되어 계산됨 = 자동 형변환 ex) "6" / "2" = 3 편하다고 생각할 수 있으나, 이러한 작업은 원인을 찾기 힘든 에러를 발생시킬 수 있으므로 항상 의도를 가지고 원하는 타입으로 변환해주는 것 권장 ( = 명시적 형변환 ) 명시적 형변환 String() 괄호 안의 타입을 문자형으로 바꿔줌 Number() 괄호 안의 타입을 숫자형으로 바꿔줌 사용자로부터 입력받은 값이 문자형일 경우 자주 사용 "1234asd"와 같이 글자가 들어있는 값이 들어가면 NaN반환 true는 1 false 0 반환 Boolean() 숫자0, 빈 문자열, null, undefined, NaN을 제외한 나머지 모두.. 데이터 입력과 출력 / alert 데이터 출력 window.alert(내용) : 내용을 알림창(경고창)으로 출력 console.log(내용) document.write(내용) : 화면(문서)에 내용 출력 DOM(문서 객체 모델) 사용 : 예: body console.log("hello"); console.log("태그 출력"); // 태그도 문자열의 일부로 인식 document.write("제목"); // 태그 반영되어 출력 document.body.innerHTML += "DOM 객체 innerHTML 속성 사용해서 출력"; 데이터 입력 confirm() 함수로 입력 받기 prompt() 함수로 입력 받기 getElementsByTagName() : 태그 이름 사용 태그의 value 속성 사용 DOM (문서 객체 모델) 사용 confi.. 정적 / 동적 타이핑 언어 정적 타이핑 언어 변수의 자료형을 컴파일 시에 결정 (C, C++, Java 등) 선언한 변수의 자료형에 따라 값 저장 선언의 의미 : 컴파일러에게 알린다 선언의 이유 : 실행 시 운영체제로부터 메모리 할당 받기 위해 얼마만큼 필요한지 확보하기 위해 정수형 변수 선언 -> 4바이트 값을 저장하기 위한 공간 확보하도록 알림 -> 컴파일러가 운영체제에게 공간 확보 실행 시에 값을 저장 int a; //변수의 선언 int b = 10; // 변수의 선언과 동시에 값 저장 : 변수 초기화 동적 타이핑 언어 변수의 자료형을 실행 시 결정 자료형 없이 변수에 값 저장 JavaScript, Python 등 var name = “홍길동”; num = 100; 변수와 데이터 타입 / 지역변수와 전역변수 / var let const 차이 / 호이스팅 (Hoisting) 변수 프로그램 실행 중에 값을 저장하기 위한 메모리 내의 임시 기억장소 식별자 사용 규칙 (변수명, 함수명 등) 변수는 문자와 숫자로만 구성 특수문자는 $와 _만 사용 첫 글자는 숫자가 될 수 없음 한글 사용 가능하긴 하나, 영문 사용 권장 예약어(키워드)는 사용할 수 없음 대소문자 구별 가급적 상수는 대문자로 선언 읽기 쉽고 이해할 수 있도록 선언 변수 선언 var let (ES6 이후 보완하기 위해 추가된 변수 선언 방식) const (ES6 이후 보완하기 위해 추가된 변수 선언 방식) 변수를 필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 됨 변수의 데이터 타입은 실행 시 결정 (동적 타이핑) 명시적으로 선언하는 경우에는 예약어 var 사용 (명시적 선언 권장) //명시적 선언.. JavaScript 기본 개념 및 구조 자바 스크립트 (JavaScript) 정식명칭 : ECMA스크립트 (ECMAScript) ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 동적인 웹 페이지를 작성하기 위하여 사용되는 언어 웹 표준 프로그래밍 언어 모든 웹 브라우저에서 자바스크립트 지원 웹 브라우저 뿐 아니라 스마트폰 용 애플리케이션 개발 등 각종 분야에서 능력과 가치를 인정 받고 있음 초기에는 브라우저에 내장되어 제한된 기능만 지원하였으나, Ajax 기술과 함께 영향력이 증가하여 전세계에서 가장 많이 사용되는 언어 자바스크립트의 기능 HTML이 지원하지 못하는 다양한 기능 지원 동적인 움직임 / 이벤트 발생 처리 / 경고 메시지 출력 / 데이터 유효성 확인 / 멀티미디.. 이전 1 2 3 다음