Web/JavaScript (5) 썸네일형 리스트형 자바스크립트 유용한 정보 1. 삼항 조건 연산자(ternary operator) 세 개의 피연산자를 취할 수 있는 방법이다. 자바스크립트에서는 한 번에 세 개의 피연산자를 취하는 유일한 방법이다. 사용방법도 어렵지 않다. var age = 29; var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19"; console.log(canDrinkAlcohol); // "True, over 19" age라는 var 변수를 선언해주고, 그 값으로 29를 입력해준다. 그리고 나서 술을 마실 수 있는 나이인지 확인하는 함수를 만들고 age라는 변수가 19보다 클 때(true)에는 "True, over 19"을, age라는 변수가 19보다 작을 때(false)에는 "Fals.. Scope 스코프(범위, Scope)는 코드가 실행되고 있을 때, 어떤 변수에 접근할 수 있는지에 대한 답을 알려준다. 자바스크립트에서는 기본설정(default)으로 window 오브젝트에 있는 root scope 설정되어 있다. 예를 들어, 개발자 도구의 콘솔탭에서 콘솔창에 test를 출력하는 함수 aa를 정의한다. 그러면 window 객체의 내부에 함수 aa가 생긴 모습을 확인할 수 있다. 함수 aa가 정의되면서 window를 부모로 두기 때문에, root scope는 parent scope라고 부르기도 한다. 그렇다면 다음과 같은 상황에서는 어떻게 될까? 함수 bb가 있다. 내부에는 변수 a가 hello라는 문자열로 초기화되어 있다. 이 상황에서 콘솔창에 변수 a를 출력을 할 수 있을까? 출력을 할 수 없었다.. DOM을 이용해서 To Do List 만들기 자바스크립트와 DOM을 이용해서 레이아웃이나 다른 스타일의 추가 없이 간단하게 To Do List를 만들어보자. 먼저 다음과 같이 index.html 파일을 만들어주고, style.css 파일과 script.js 파일을 준비해주자. 아무런 기능이 없는 이 페이지에 다음과 같은 기능을 추가시킬 것이다. 1. 리스트 추가시키기 : 할 일을 입력하고 마우스로 입력 버튼을 클릭하거나 키보드의 엔터키를 입력하면 작성한 내용을 리스트의 마지막에 추가시키기. 2. 리스트 삭제하기 : 각 리스트 옆에 삭제 버튼을 만들어서 클릭하면 해당 리스트가 삭제되게 만들기. 3. 취소선 만들기 : 리스트를 마우스로 클릭하면 리스트의 내용에 취소선을 만들기. 1. 리스트 추가시키기 가장 먼저, HTML DOM을 이용해서 자바스크립트.. HTML DOM (Document Object Model) 웹 페이지가 로드되는 순간에, 브라우저는 해당 페이지의 Document Object Model 을 생성하게 된다. HTML DOM 모델은 객체의 트리로 구성되어 만들어지게 된다. DOM 모델과 함께라면 자바스크립트는 동적인 HTML을 구성할 수 있게 된다. 자바스크립트는 페이지 내부의 모든 HTML 요소(elements)들을 바꿀 수 있다. 자바스크립트는 페이지 내부의 모든 HTML 속성(attributes)들을 바꿀 수 있다. 자바스크립트는 페이지 내부의 CSS 스타일을 바꿀 수 있다. 자바스크립트는 존재하는 HTML의 요소와 속성을 제거할 수 있다. 자바스크립트는 새로운 HTML 요소와 속성을 추가할 수 있다. 자바스크립트는 페이지 내부에 존재하는 모든 HTML 이벤트에 반응할 수 있다. 자바스크립트.. 자바스크립트 기초 HTML이 웹의 뼈대를 만들고, CSS가 웹의 표현 방식을 추가했다면, 자바스크립트(JavaScript)는 웹을 동적으로 작동할 수 있게 만들어 주는 중요한 요소이다. 1. 자바스크립트의 타입들 자바스크립트에서는 변수로 var(variables)를 사용한다. 숫자, 문자, 함수 등을 가리지 않고 담을 수 있다. 아래에서 var은 각 타입을 담는 변수로 활용된다. 변수명은 첫 글자로 문자나 $, _ 으로 시작해야 한다. 1-1. 숫자(Number) 자바스크립트는 정수와 실수를 따로 구분하지 않는다. 대신 모든 수를 실수로 표현한다. e표기법도 사용이 가능하다. var intNum = 10; var floatNum =3.1415; var veryBigNum = 10e5; var verySmallNum = 1.. 이전 1 다음
