코딩 공부 코딩 공부

조건문 조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어합니다. 조건문의 종류에는 if 문, else 문 그리고 else if 문이 있습니다. if 문 if 문은 조건식을 만족(true)할 경우에만 코드를 실행합니다. 조건식은 앞에서 배웠던 Boolean() 내장 메서드와 마찬가지로 그 어떤 데이터를 입력해도 true 또는 false를 반환합니다. 기본형 if(조건식){ 자바스크립트 코드; } 예제 var num=100; if(num= 9 && mon =6 && mon = 3 && mon

연산자 연산자란 프로그래밍에서 연산에 쓰이는 기호들입니다. 연산자에는 산술연산자, 문자 결합 연산자, 대입 연산자, 증감 연산자, 비교 연산자, 논리 연산자가 있습니다. 산술연산자 산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다. 산술 연산자는 연산 대상 데이터가 반드시 2개 있어야하는 이항 연산자입니다. 산술 연산자의 종류와 기본형 종류 기본형 설명 + A+B 더하기 - A-B 빼기 * A*B 곱하기 / A/B 나누기 % A%B 나머지 산술 연산자 예제 결과 문자 결합 연산자 문자 결합 연산자는 피연산자가 문자형 데이터 입니다. 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다. 더하기 연산자에 피연산자로 문자형 데이터가 한 개라도 포함되어 있..

데이터 타입(자료형) 변수에는 여러가지 유형이 들어갈 수 있습니다. 프로그램 언어에 있어 가장 기본적인 요소이며, 데이터 타입이라고 합니다. 데이터 타입에는 숫자, 문자열, 논리값, 특수값, 심벌, 객체, 배열 함수 등을 표현할 수 있습니다. 숫자(Number) 숫자형(Number) 데이터는 단어 의미 그대로 숫자를 의미합니다. 만약 "100"과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터입니다. 이 경우에는 Number("100")를 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있습니다. var 변수 = 숫자; 또는 Number("문자형 숫자"); var s = 100; var t = Number("500"); //"500" -> 500 문자열(String) 문자형(String..

변수란? 변수(variables)는 변하는 데이터(값)을 저장할 수 있는 메모리 공간 변수에는 데이터가 오직 한 개만 저장된다. 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워지게 된다. 변수에 저장할 수 있는 데이터의 종류로는 문자형(Srting), 숫자형(Number), 논리형(Boolean), 그리고 빈(Null) 데이터가 있다. 변수 선언 방법 변수를 선언할 때에는 var 키워드를 변수명 앞에 붙인다. 변수명은 한글 사용X / 영문 / 숫자 / 일부 특수 문자(_,$)만 가능 변수를 선언하면 변수명으로 데이터를 저장할 수 있는 공간이 생성. 변수 선언 예제 { var x = 100; var z = "javascript"; document.write(typeof x); //num..

자바스크립트 선언문 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것이라고 이해하면 됩니다. 라는 태그로 종료된 곳까지를 스크립트 영역이라고 부릅니다. 기본형 선언문은 자바스크립트 주석처리 자바스크립트 선언문 안에서 코드가 아닌 설명글을 넣고 싶을 때는 주석 처리를 하면 됩니다. 이때 한 줄 주석일 경우에는 '//한 줄 설명글'로 작성하고, 여러 줄 주석일 경우에는 '/*여러 줄 설명글*/'로 작성하시면 됩니다. //한 줄 설명글인 경우 /* 설명글이 여러 줄인 경우 이렇게 처리합니다. */ 코드 입력시 주의사항 1. 자바스크립트는 대소문자를 구분하여 작성합니다. 날짜 객체 생성: New date();(X) 날짜 객체 생성: enw Date();(O) 2. 코드 한 줄을 작성한 후에는 세미콜론(;)..

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 //a {num:1, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {num:2, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num:3, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num:4, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {nu..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 //slider01 const sliderWrap = document.querySelector(".slider__wrap") //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img") //sliderImg에 div 태그 .slider_img 저장 const slider = document.querySelectorAll(".slider") //slider에 div 태그..

const cssProperty = [ //'CSS 속성 설명' 데이터를 cssProperty 배열에 객체 형태로 저장 //a {view:9, name:"all", desc:"all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다."}, {view:20, name:"animation", desc:"animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {view:30, name:"animation-delay", desc:"animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {view:40, name:"animation-direction", desc:"animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다...