JS
1.[JS] 자바스크립트 작성하기, 기본 용어와 입출력 방법
웹 브라우저에는 자바스크립트 소스를 읽고 처리하는 해석기(JavaScript interpreter)가 있음.자바스크립트 소스 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드를 작성할 수 있음. <script>태그는 웹 문서 안의 어디든 위치할
2.[JS] 자료형 이해하기
자료형(data type)이란?
3.[JS] prompt()문과 parseInt()함수
\*\*<span style="color:
4.[JS] 입력한 숫자가 4의 배수인지 확인하는 프로그램
프롬프트 문을 이용하여 숫자를 입력받음.취소버튼을 누르면 결과를 보여주지 않음. 입력받은 숫자를 4로 나눈 나머지가 0이면 4의 배수이고, 0이 아니면 4의 배수가 아님.확인버튼을 누르면 제대로 된 답이 나오는데, 취소버튼을 누르면 조건2번과 같은 결과가 안나옴. 취소
5.[JS] 함수 알아보기
함수선언 function 함수형() { 명령 } 함수호출 함수명() 또는 함수명(변수)
6.[JS] var를 사용한 변수의 특징
스코프(scope): 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위 지역변수 or 로컬변수(local variable) : 한 함수 안에서만 사용할 수 있는 변수 전역변수 or 글로벌변수(global variable) : 스크립트 소스 전체에서 사용할
7.[JS] let과 const (1)
var 예약어를 사용하는 변수는 함수 영역의 스코프를 가지고, 재할당과 재선언을 할 수 있음. var 예약어를 빠뜨리면 의도하지 않게 전역변수가 되기도 하여 ES6에서는 예약어로 let과 const가 추가되었고, 되도록이면 var예약어는 사용하지 않을 것을 권장함. 예
8.[JS] let과 const (2)
const로 선언한 변수는 상수 변수(constant variable). 상수는 프로그램 안에서 변하지 않는 값을 뜻함. const로 할당한 변수는 <span style="color:- let 예약어를 사용한 변수처럼 <span style="color:전역변
9.[JS] 재사용할 수 있는 함수 만들기
alert()함수처럼 입력을 바꿔 여러 번 사용할 수 있는 성질을 함수의 '재사용성'이라고 함. 함수 선언할 때 매개변수(parameter) 지정하기 인수(argument) : 매개변수가 있는 함수를 호출할 때 실제 값 부분addNumber() 함수를 선언할 때 괄호
10.[JS] 함수 표현식
이름이 없는 함수 함수 자체가 식(expression)이므로 <span style="color:일반적으로 함수는 선언하고 필요할 때마다 호출해서 실행하는 방법을 많이 사용하지만, <span style="color:> 기본형(function() { 명령 } (
11.[JS] 이벤트와 이벤트 처리기
대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행됨. 이처럼 버튼을 클릭하거나 항목을 선택하는 것을 이벤트(event)라고 하고, 이벤트가 발생했을 때 실행하는 함수를 이벤트 처리기라고 함. click : 사용자가 HTML 요소를 클릭할 때
12.[JS] 버튼을 클릭해서 상세 설명 표시하거나 닫기
13.[JS] DOM을 이용한 이벤트 처리기
DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 사용할 수 있음. 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그 중에서 함수 querySelector() 를 사용. querySelector() 의 괄호 안에는 클래스 이름
14.[JS] 객체 알아보기
객체(object) 는 프로그램에서 인식할 수 있는 모든 대상. 자바스크립트에서 객체는 데이터를 저장하고 처리하는 기본 단위. 자바스크립트에서 사용하는 객체 문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도
15.[JS] 내장 객체 - Array 객체와 메서드
자바스크립트 내장 객체에는 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있음. Array 객체와 Date 객체가 대표적임. Array 객체 인스턴스 만들기 - 초기값이 없는 경우 Array 객체 인스턴스 만들기 - 초기값이 있는 경우배열을 만들고 요소 표시하
16.[JS] 자바스크립트의 내장 객체 - Date 객체
Date 객체로 현재 날짜 나타내기 new Date();Date 객체로 특정 날짜 나타내기new Date("2022-08-01")Date 객체로 특정 날짜와 시간 나타내기new Date("2022-08-01T08:00:01")연도, 월, 일 다음에 시간을 표시. 시간을
17.[JS] 브라우저와 관련된 객체 (1)
자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있음. 이러한 작업이 가능한 이유는 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문임. window : 브라우저 창이 열릴
18.[JS] 브라우저와 관련된 객체 (2)
링크를 클릭하거나 웹 문서를 열 때 새 창이 자동으로 뜨게 하는 메서드. 주로 홈페이지의 팝업 창을 띄울 때 사용함. window.open(경로, 창 이름, 창 옵션)경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냄. 창 이름 : 이름을 지정하지 않으면
19.[JS] 브라우저와 관련된 객체 (3)
navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온오프라인 등의 여러 정보가 담겨 있음. 이 정보는 사용자가 수정할 수 없으며, 가져와서 보여줄 수만 있음. 여러 웹 브라우저를 고려할 때 가장 먼저 생각해야 할 분야는 렌더링 엔진임. 아직
20.[JS] 브라우저와 관련된 객체 (4)
브라우저의 주소 표시줄과 관련. location 객체에는 현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있음. location 객체의 프로퍼티hash : URL 중에서 -host: URL의호
21.[JS] 팝업 창에서 클릭한 내용을 메인 창에 나타내기
main.html팝업 창을 popWin이라는 객체로 할당한 후, popWin을 만든 부모(main 창)가 누구인지 브라우저에게 알려 줘야 함. doit-event.html<a>태그에서 링크된 문서를 메인창에 표시함. <a>태그의 href속성값을 인수로 넘겨주
22.[JS] DOM 요소에 접근하고, 속성 가져오기
자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음. DOM은 웹 문서와 그 안의 모든 요소
23.[JS] DOM에서 이벤트 처리하기
\*\*<span style="color: img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결. 이미지를 클릭하면 알림 창이 나타나지만, 이미지 외의 다른 곳을 클릭하면 실행되지 않음. 이번트가 발생했을 때
24.[JS] 라이트 박스 효과 만들기
원하는 사진을 클릭하면 전면에 나타난 후 주변을 어둡게 처리하여 시선을 집중시키는 효과 ① 섬네일 이미지 6개를 화면에 보여줌. ② 섬네일 이미지 가운데 하나를 클릭하면 그 이미지를 라이트 박스 영역에 표시하고 화면에 나타나게 함. ③ 화면에 나타난 라이트 박스 영역을
25.[JS] DOM에서 노드 추가∙삭제하기 (1)
DOM에서 새로운 노드를 만들어주거나 삭제할 때 사용.DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있음. 이때 노드 정보를 여러 개 저장한 것이 노드 리스트임. 배열과 비슷하게 동작. \*\*<span