1. HTML 작성 ◀ ▶ 2. CSS 작성 3. JavaScript 작성 이미지 슬라이딩을 위한 function 작성 : 변수 num을 선언한 뒤, 조건문을 사용하여 변수값을 변경하였다. 변경한 변수값은 document.getElementById로 불러온 요소의 이미지 주소(파일명)에 사용되었다. 파일명이 img0, img1, img2 이므로 존재하지 않는 파일명이 생성되는 것에 대응하기 위한 분기 처리를 하였다. 변수값이 3이될 경우 0, 변수값이 0보다 작아질 경우 2로 작성하여 loop될 수 있게 하였다. 함수 안에 return false;를 선언하여 a태그의 링크 기능인 href의 실행을 막았다. var num = 0; function next() { num ++ if(num === 3) { n..

document.createElement() script 부분에서 메서드를 이용해 DOM에 마크업 요소를 추가할 수 있다. 이렇게 만든 요소는 따로 추가하는 작업을 거치지 않는다면 DOM에 추가되지 않고 메모리에만 존재한다. parent.appendChild(element); 만들어진 element는 appendChild 메서드를 통해 DOM에 추가를 해줘야 한다. 또, DOM 요소 생성 시 태그 뿐 아니라 텍스트 노드도 생성이 가능하며 마찬가지로 appendChild를 통해 부모 태그에 넣어줄 수 있다. onclick = function() { // 1. #h1space 변수 저장 (저장 위치) var click1 = document.getElementById("h1space"); // 2. #crea..

HTML 웹 페이지는 일종의 문서다. 여러가지 프로그래밍 언어가 접근할 수 있게 만든 문서 인터페이스를 DOM이라고 부르는데, DOM이란 문서 객체 모델(Document Object Model)의 준말이다. HTML,CSS,JavaScript를 통해 DOM 구조에 접근하여 문서 구조, 스타일, 내용을 변경한다. 선택자 원거리 선택자 getElementById getElementByTagName 근거리 선택자 parentNode childNode children firstChild previousibling nextSibling DOM이 없다면 스크립트 언어는 웹 페이지에 대한 정보를 갖지 못하게 된다. 자바스크립트에서는 를 작성하여 문서 자체를 조작하거나 window elements를 위한 API를 사용..

function catName(name) { console.log("제 고양이의 이름은" + name + "입니다.")' } catName("호랑이"); /* 결과 : "제 고양이의 이름은 호랑이입니다." */ catName("호랑이"); function catName(name) { console.log("제 고양이의 이름은" + name + "입니다."); } /* 결과: "제 고양이의 이름은 호랑이입니다." */ 자바스크립트에서는 함수의 호출이 함수 자체보다 앞서 존재하더라도 코드가 동작한다. JS에서는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당하기 때문이다. 이 현상을 JS의 Hoisting이라고 부른다. 호이스팅의 대상은 오직 "선언"이다. 선언 없이 호출 후 초기화를 진행한다..

자바로 찍었던 별을 자바 스크립트로도 찍어보았다. 조건문, 반복문, break와 continue 구문, 연산, 클래스 만드는 법까지 자바랑 다 똑같은데..? 반복문을 이용하여 태그의 값을 자동화할 수도 있다. js에서의 클래스 목적도 자바와 마찬가지로 변수와 메서드를 같은 소속으로 담아 사용하기 위함이며 미리 만들어져 있는 내장 클래스를 쓸 수도 있다. 아래는 내장되어있는 Date 클래스를 선언하여 메소드를 이용해본 연습 코드이다. document.write("현재날짜/시간정보"); var today = new Date(); // 날짜 관련 객체 활용, 현 시각날짜정보를 얻기 위해 생성 var nowyear = today.getFullYear(); // 연도 var nowmonth = today.getM..

JS는 HTML 문서의 메인 메서드같은 역할을 한다. JS의 변수는 모든 자료형을 다 var라는 키워드로 통일시켜서 사용한다. 이렇게 변수에 자료형이 부여되지 않는 언어를 가르켜 동적 타입 언어라고 부른다. (cf. 자바는 정적 타입 언어) ES 6에서 let과 const가 등장하였으나, 기초 문법 학습 시에는 예제 코드를 var로 통일하여 작성하고자 한다. var num = 10; // int도 var var txt = "자바스크립트"; // string도 var var bool = true; // boolean도 var var blank = null; // var에 null로 작성되는 빈 데이터 삽입 JS에서 비교 연산자는 ===와 !==를 써준다. 자바에서 처럼 ==와 !=로 비교하면 자료형을 고려..