공부를 합니다/언어 (Language) (26) 썸네일형 리스트형 WEB2 - JavaScript_16-20 배열과 반복문 16. 반복문 예고 링크의 색상도 테마에 맞춰서 바꾸고 싶을 때 (day: blue, night: powderblue): 반복문을 이용해서 모든 링크 element 의 색상을 바꾸는 작업을 반복할 수 있다. 17. 배열 (Array) 프로그래밍은 많은 데이터를 다루기 때문에 연관된 데이터를 정리해서 담을 수 있는 수납함 역할을 하는 배열(array) 이 존재한다. 배열은 대괄호([])를 사용해서 만든다. /* 변수 coworkers에 배열을 대입 */ /* 배열을 이루는 elements는 comma를 이용해 구분 */ var coworkers = ['egoing', 'leezche'] 배열안의 각 데이터는 index를 이용해 호출한다. /* 첫 번째 요소: egoing을 출력 */ document.wri.. WEB2 - JavaScript_15 리팩토링(Refactoring) 15. 리팩토링 (Refactoring) 코드를 일차적으로 완성한 뒤 비 효율적인 부분을 제거하고 코드를 개선하는 작업. 전 강의에서 작성한 코드를 보면 중복된 부분이 많다. if (document.querySelector('#night_day').value === night) { document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; document.querySelector('#night_day').value = 'day'; } else { docum.. Language_Navigator JavaScript [생활코딩] WEB2 - JavaScript WEB2 - JavaScript_11-14 조건문 11. 조건문 예고 프로그래밍 언어를 이용하면 조건에 따라 다른 순서로 기능을 실행할 수 있다. 조건문을 이용하면 이전에 만들었던 day & night 버튼을 1개의 버튼으로 합칠 수 있다. 12. 비교 연산자와 Boolean 데이터 타입 두 개의 값을 비교할 수 있은 연산자가 있다. 이를 비교 연산자라고 한다. a === b는 a와 b가 같은 값인지 비교한다. a와 b가 같으면 true를 반환한다. (e.g 1 === 1) a와 b가 다르면 false를 반환한다. (e.g 1 === 2) a < b는 a가 b보다 작은 값인지 비교한다. a가 b보다 작으면 true를 반환한다. (e.g 1 < 2) a가 b보다 작지 않으면 false를 반환한다. (e.g 2 < 1) 이처럼 반환 값으로 true 혹은 f.. WEB2 - JavaScript_10 프로그램, 프로그래밍, 프로그래머 10. 프로그램, 프로그래밍, 프로그래머 JavaScript는 프로그래밍 언어이다. HTML은 컴퓨터 언어이기는 하지만 프로그래밍 언어는 아니다. 프로그램(Program)에는 '순서'가 존재한다. HTMl은 만드려는 것을 묘사하는 것이 목적이기 때문에 '프로그래밍' 언어는 아닌 것이다. 사람들은 시간 순서대로 실행되어야 할 기능을 효율적으로, 실수없이 수행하기 위해 프로그래밍 언어를 고안했고, 수행할 일을 프로그래밍 언어에 따라 작성해서 컴퓨터에 전달했다. 프로그래밍 언어를 사용하면 다음과 같은 일들을 할 수 있다. 조건에 따라 다른 순서로 기능을 실행 특정 기능을 반복해서 실행 복잡해진 기능과 순서를 보다 간결하게 정리. WEB2 - JavaScript_7-9 웹 브라우저 제어 7. 웹 브라우저 제어 웹 페이지의 디자인은 CSS를 이용해서 바꿀 수 있다. 위처럼 작성하면 웹 페이지는 항상 검정색 배경과 하얀색 글씨를 유지한다. 웹 브라우저의 테마(배경과 글씨 색)를 '클릭했을 때'만 바꾸고 싶다면 다음 두 가지를 실행해야한다. CSS로 변경할 디자인을 작성 JavaScript로 제어하려는 태그를 선택해서 CSS를 변경 8. CSS 기초 이전에 CSS 강의를 별도로 수강했으므로 생략. 9. 제어할 태그 선택하기 웹 페이지의 테마(day & night)를 바꾸기 위한 버튼은 다음과 같이 만들 수 있다. Night 버튼만. 제어 버튼을 생성 클릭했을 때 전환을 주기 위해 onclick 값으로 JavaScript를 입력한다. 태그를 선택해서 CSS를 변경 3번의 oncl.. WEB2 - JavaScript_5-6 데이터 타입, 변수와 대입연산자 5. 데이터 타입 - 문자열과 숫자 컴퓨터 프로그래밍에서는 데이터를 효과적으로 처리하기 위해 자료형(Data type)을 분류한다. JavaScript에도 data type이 존재한다. Primitive data type: Boolean, Null, Undefined, Number, String, Symbol Objects 이 중 가장 자주 쓰이는 Number과 String을 비교 Number 숫자를 그대로 입력. 연산이 가능하다. Console에 1+1을 입력하면 결과 값으로 2를 반환. document.write(1+1) + 외에도 다른 산술 연산자를 사용해서 계산을 할 수 있다. 1 + 1 → 2 2 - 1 → 1 2 * 4 → 8 6 / 2 → 3 String 따옴표(', ") 안에 "입력.. WEB2 - JavaScript_2-4 HTML과 JavaScript의 만남 2. Script 태그 JavaScript는 HTML을 기반으로 동작한다. JavaScript를 전혀 다른 언어인 HTML과 어떻게 같이 사용할 수 있을까. : JavaScript vs HTML 텍스트는 HTML에 직접 입력해도 사용할 수 있지만 JavaScript가 HTML에 비해 동적으로 수행할 수 있는 여지가 더 많다. 1+1 3. 이벤트 (Event) JavaScript가 사용자와 상호작용하기 위한 핵심기능. onclick의 속성값을 기억하고 있다가 '클릭했을 때' 코드를 실행 위의 '클릭'처럼 웹 브라우저에서 일어나는 일중 대표적인 것을 추려 EVENT라고 한다. Example: onclick - 클릭할 때, onchange - 내용 변화가 있을 때, onkeydow.. 이전 1 2 3 4 다음