본문 바로가기

Programming

 (99)
제어 대상 찾기 ( getElementsByClassName ) 두번째로 소개할 태그(엘리먼츠) 조회방법은 ClassName이다. 말 그대로 클래스의 이름을 기준으로 조회한다. 여기 문서를 보면 li태그중 2개의 태그만 클래스의 값이 'active'다. HTML에서는 클래스라고 하는것이 자바스크립트에서는 클래스 네임이라는 표현을 쓴다. 14행에서 인자로 전달된 값('active')에 해당되는 클래스 네임을 갖고있는 엘리먼트들을 조회해서 그것을 유사배열에 담는 메소드다. 그렇게 해서 담긴 lis를 for문으로 처리하면 앞서봤던 getElementsByTagName에서 본것과 같이 동일하게 처리된다.
제어 대상 찾기 ( getElementsByTagName ) 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. 문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. 첫번째로 소개할 getElementsByTagNaem은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 element를 조회할 수 있다. 예제 코드를 보자 8행부터 12행까지 ul이라고 하는 리스트의 element가 있다. 14행을 보면 document객체의 getElementsByTagName이라는 메서드를 호출하고있다 docum..
BOM ( Location객체 , Navigator 객체 ) Location객체는 문서의 주소와 관련된 객체로 Window 객체의 property다. 이 객체를 이용해서 윈도우의 문서 URL을 변경할 수 있고 , 문서의 위치와 관련해서 다양한 정보를 얻을수 있다. 콘솔에 적어보자. location.href //현재 window의 문서가 위치하는 URL을 출력 이 정보를 alert() , console.log() 등을 통해 출력하는것도 당연히 가능하다. URL Parsing location객체는 URL을 의미에 따라 별도의 프로퍼티들을 제공한다. location.protocol //현재 윈도우의 브라우저창에 사용하는 프로토콜을 알아냄 location.host // host 식별 ( 컴퓨터 식별) location.port // port 식별 ( 컴퓨터 속의 서버 소프..
BOM ( alert() , confirm() , prompt() ) BOM의 예시들을 알아보자. HTML은 form을 통해서 사용자와 커뮤니케이션할 수 있는 기능을 제공한다. 자바스크립트에는 사용자와 정보를 주고 받을 수 있는 간편한 수단을 제공한다. 첫번째로 alert에 대해 알아보자. alert은 경고창이라고 부른다 , 사용자에게 정보를 제공하거나 디버깅등의 용도로 많이 사용한다. alert의 사용법은 앞서 설명했으니 패스한다. 두번쨰는 confirm이다. 예제를 살펴보면 스크립트 부분에서if문의 조건을 적어주는 부분에 confirm을 실행시켰다. confirm 또한 if와 같이 분기적인 흐름에 이용된다. 참값의경우 ok를 alert 시키고 , 거짓의 경우 cancel을 alert 시키도록 해놨다. 실행해보자. 실행시키면 다음과같이 확인 / 취소를 선택할수 있는 버튼..
BOM (Browser Object Model) BOM(Browser Object Model)이란 웹브라우저의 프레임을 추상화하여 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Windows의 property와 method들을 통해서 제어할 수 있다. 따라서 BOM에 대한 수업은 Window 객체의 property와 method의 사용법을 배우는 것이라고 해도 과언이 아닐것이다. 먼저 전역객체인 Window 객체에 대해 알아보자. Window객체는 모든 객체가 소속된 객체이고 , 전역객체 이면서 , 창이나 프레임을 의미한다. 콘솔을 통해 예시를 살펴보자. 첫 행에서 alert함수를 사용했다. 3번째행에서 window.alert함수를 사용했다.그러나 위 두 함수의 효과는 같다 , window 객체는 식별자 window를 통해서..
HTML에서 Javascript 로드하기 JavaScript로 웹페이지를 제어하기 위해서는 JavaScript를 로드해야 한다.로드를 하는 방법은 여러가지가 있다. 첫번째 방식 , inline방식 inline 방식은 태그에 직접 자바스크립트를 기술하는 방식이다. 장점은 태그에 연관된 스크립트가 분명히 드러난다는 점이다. 하지만 정보(HTML)와 제어(JavaScript)가 섞여있기 때문에 정보로서의 가치가 떨어진다. 위 소스를 보면 HTMl 기본 프레임으로 구성되어 있다. 우리가 여태 봐왔던 script태그는 없다 , 다만 8행을 보면 onclick속성에 값으로 들어가있는 자바스크립트 코드를 실행하게 되어있다. onclick은 HTML속성이고 , alert()은 JavaScript의 문법이다. 8행을 해석해보면 다음과 같다 , button을 만..
반복문 // 개행을 의미하는 HTML 태그document.write() //웹 페이지에 문자열등을 출력하는 함수 , (c언어의 printf와 비슷한 개념) string() // 숫자 등의 다른 데이터타입의 자료들을 문자의 형태로 변환하는 함수 자바스크립트의 반복문은 for문과 while문을 제공하며 C언어에서 배운 문법과 같다. 반복문 내에서 break; //반복문을 즉시 종료시킴. continue; //실행하고 있던 반복만 종료시키고 나머지 반복은 마저 실행함.
조건문 일치 연산자 ( ===) : 데이터의 타입과 값까지 똑같은 경우 참을 반환 , ex)(1===1) //true ('1'===1) //false 조건문 : 주어진 조건에 따라서 application을 다르게 동작하게 하는것 . 문법을 살펴보자 if(true) {조건 '참'일시 실행 } 조건문을 사용할땐 Boolean값을 기준으로 움직임. c언어와 같이 else , else if 문 또한 제공 이번에는 에디터를 이용해서 조건문을 중첩하여 코드를 짜보자. prompt() : 사용자에게 입력값을 받을수 있도록 프롬프트 창을 띄워줌.prompt함수를 이용하여 로그인 관련 인증 코드를 간략하게 짰다.실행해보자. ID를 입력해주고 비밀번호를 입력해줬다. 로직대로 실행되었다. 이번엔 논리 연사자에 대해 정리하자 . (..

티스토리툴바