Web/javascript7 JavaScript 함수 ● 함수 함수는 모든 언어에서 가독성과 유지보수성을 높이기 위해 사용한다. 함수는 리팩토링에서 중요한 수단 중 하나이다. 자바스크립트도 마찬가지로 함수가 있다. function 함수명(매개변수) { 코드 } 위와 같은 형태로 씌이며 반환형이 있는 함수, 없는 함수 모두 구현할 수 있다. 앞서 했던 예제를 함수를 통해 간편화하고 같은 기능의 버튼 여러 개를 간결하게 배치할 수 있다 위의 결과에는 a태그를 넣지 않아서 결과를 볼 수 없다, 그리고 함수 선언 부분의 중복되는 코드를 한번더 함수를 사용해 간략화 한다면 아래와 같이 더 간결하게 작성할 수 있다. 결과로 a태그까지 확인해본다면 주간 모드와 야간 모드 둘다 정상적으로 출력되는것을 볼 수 있다. 위처럼 함수의 사용법은 다양하고 코드의 간결화와 재사용,.. JavaScript 배열 ● 배열 JavaScript는 타언어와 마찬가지로 배열이 존재하며, 인덱스, 사용법 등이 유사하다. var 배열명 = ['요소', '요소', ...] 으로 선언하며 선언과 동시에 초기화, 혹은 빈 배열 선언이 가능하다. 배열은 반복문과 함께 사용하면 더 효율적으로 코드를 작성할 수 있다. ● 반복문과 배열을 활용한 프로젝트 개선 JavaScript를 활용한 웹 페이지 nightmode, daymode 위의 코드에서 document.querySelector()는 html문서 내에서 ()내의 값과 일치하는 첫번째 태그를 반환한다. ()내의 값과 일치하는 태그가 없다면 null을 반환한다. 이후의 .style.은 앞의 태그의 스타일 속 devwon-1999.tistory.com 해당 프로젝트에서 진행했던 코드.. JavaScript 반복문 ● 반복문 자바스크립트는 타언어와 마찬가지로 반복문은 크게 for문 while문이 있다. continue와 break도 마찬가지로 존재한다. ● for for(초기 값; 조건; 증감 값) { 코드 } 위는 for문법의 원형이며 조건이 참일 경우 {} 내부 코드를 순차적으로 실행시켜준다. ● while while (조건){ 코드 } 위는 while문법의 원형이며 조건이 참일 경우 {} 내부 코드를 순차적으로 실행시켜준다. 0부터 9까지 총 10번 반복하는 결과를 나타낼 수 있다. 반복문은 변수 혹은 조건문과 함께 사용된다. 위의 while문 내부의 ` ` 템플릿 리터럴(Template Literal)로 문자열 표기법 중 하나이며, 일반 ' ', " " 와 다르게 표현식 삽입이 가능하다. ${ }를 통해서 .. JavaScript 조건문 ● 조건문 자바스크립트의 조건문은 if(조건) { 참일 경우 실행할 코드1; } else { 거짓일 경우 실행할 코드2; } 로 작성되며 조건이 참일경우 코드1을 실행하고 거짓일경우 코드 2를 실행한다. ● 조건문 활용 JavaScript를 활용한 웹 페이지 nightmode, daymode 위의 코드에서 document.querySelector()는 html문서 내에서 ()내의 값과 일치하는 첫번째 태그를 반환한다. ()내의 값과 일치하는 태그가 없다면 null을 반환한다. 이후의 .style.은 앞의 태그의 스타일 속 devwon-1999.tistory.com 조건문을 활용하여 위의 링크에서 했던 작업을 편리하게 변경할 것이다. 조건문을 사용하여 id를 기준으로 해당값이 night인 경우와 그렇지 않.. JavaScript 자료형, 변수, 연산자 ● 자료형 Number: 숫자 형식 String: 문자열 형식 (" ", ' ')로 묶여 있다. Boolean: 참, 거짓 형식(true, false) Undifined: undifined 값만 갖는 형식 (자바스크립트에서 undifined은 값이 아직 할당되지 않은 상태를 나타낼때 사용한다.) Null: null 값만 갖는 형식 (자바스크립트에서 null은 존재하지 않는 값, 비어 있는 값, 알 수 없는 값을 나타낼때 사용한다.) Symbol: 객체의 속성 키로 사용하기 위한 값이며 변경이 불가능한 것이 특징이다. Object: 복잡한 데이터 구조를 표현할 때 사용한다. ● 변수 변수: 변할 수 있는 값이다. var name = "Devwon"; 위 코드에서 var은 변수임을 나타내는 예약어이고 nam.. JavaScript를 활용한 웹 페이지 nightmode, daymode 위의 코드에서 document.querySelector()는 html문서 내에서 ()내의 값과 일치하는 첫번째 태그를 반환한다. ()내의 값과 일치하는 태그가 없다면 null을 반환한다. 이후의 .style.은 앞의 태그의 스타일 속성을 다루겠다는 의미이다. backgroundColor은 뒷 배경, color는 글자의 색상이다. css에서는 background-color이지만, javascript에서는 backgroundColor을 나타낸다. 결과사진과 같이 잘 되는 모습이다. 이전 1 2 다음
