개발/JavaScript (8) 썸네일형 리스트형 [JavaScript] 자바스크립트 변수의 이해와 사용 자바스크립트 변수의 이해와 사용 변수란? "데이터를 담아두는 그릇" 예를 들어 사과판매 어플리케이션을 개발한다고 가정하였을때 사과의 갯수(count), 금액(amount) 등 필요한 데이터를 어디간에 두고 사용해야한다. 이때 변수라는 그릇을 사용하면 해당 자료를 가지고 갯수를 새거나 연산을 할때 사용할수 있다. 변수선언 변수선언은 아래와 같다. /* var 변수명 [=초기값] */ //1. 한번에 하나의 변수만 선언 var count; //2. 한번에 여러개의 변수를 선언 ( ',' 로 구분 ) var count, amount; //2. 변수 선언 과 함께 초기화 var count = 10; 위와 같이 변수를 선언하는 방법은 여러가지가 있다. 변수명 앞의 var 는 붙이지 않아도 에러가 발생하지 않지만 .. [JavaScript] JavaScript (자바스크립트) 란 ? JavaScript (자바스크립트) 란 ? 요새 AngularJs , NodeJs 등 공부를 하면서 JavaScript를 외면하였지만 결국은 자바스크립트를 기본부터 다시 봐야겠다는 생각이 들었다. 그래서 자바스크립트가 무엇인지에 대해 먼저 살펴보도록 하겠다. JavaScript는 Netscape communication 의 이해 개발된 브라우저 전용 스크립트 언어이다. 현재에 이르기까지 JavaScript 는 초기부터 많은 발전이 되어왔는데 초기에는 지나친 스크립트 코드 남용으로 사람들 에게 안좋은 인식이 생겼으나 Ajax (Asynchronous JavaScript and XML) 가 생겨나고 국제적인 표준화 단체인 ECMA 에 의해 표준화 작업이 이루어짐에 따라 현재에 있어서는 웹개발자 라면 기본적으.. [JavaScript] addEventListener() , 이벤트리스너 등록 addEventListener() , 이벤트리스너 등록 addEventListener() 는 document내에 특정요소에 event를 등록할때 사용합니다. 간단한 사용예제는 아래와 같습니다. js var btn = document.getElementById("btn1"); btn.addEventListener("click",btnClick,false); function btnClick(e){ alert("Click!"); } html Click! 위의 예제는 한개의 버튼에 이벤트를 등록하는 방법입니다. 그런데 태그에 직접 onclick="" 을 쓰면되는데 위와같이 하는 이유는 상황에 따라 다른 이벤트를 발생할수있고동일한 이벤트가 발생하는 버튼이 여러개있을때 버튼에 다 직접 입력하는것보다위와같이 작성하는.. [JavaScript] querySelector() , querySelectorAll() 자바스크립트 요소접근 querySelector() , querySelectorAll() 요소접근 querySelector() querySelector 는 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾습니다. (#sections) -> sections 아이디를 가진 요소를 찾습니다(.section) -> section 클래스명을 가진 요소를 찾습니다 반환객체는 한개의 요소만 찾을수있으며 동일한 클래스명 을 가진 객체가 있을경우 html문서내의 첫번째를 나타나는 요소를 반환합니다. js var section = document.querySelector("#sections .section"); section.style.border = "1px solid #ff0000"; html 1 1-1 1-2 1-.. [JavaScript] getElementsByClassName() 함수 , 자바스크립트 클래스명 접근 getElementsByClassName() 함수 , 자바스크립트 클래스명 접근 이 함수는 태그의 class="" 속성을 사용하여 접근한다. 동일한 class명이 존재할수 있기때문에 ( id속성은 html 문서에 동일한 id속성이 존재하면 안된다..) id 속성을 사용하여 접근하는 getElementById() 와 달리 getElementsByClassName() 은 컬렉션 객체를 반환한다. 따라서 for문을 사용하거나 특정 index에 위치한 element를 반환받아 사용할수있다. 사용예는 아래와 같다. js var section1s = document.getElementsByClassName("section1"); var section2s = document.getElementsByClassName(.. [JavaScript] getElementsByTagName() 함수 , 자바스크립트 태그명 접근 getElementsByTagName() 함수 , 자바스크립트 태그명 접근 이 함수는 태그의 있는 div, li, p 와 같은 특정 태그명을 가지고 있는 element 의 집합을 가져오는 함수이다. 따라서 반환되는 값은 HTML컬렉션 객체이며 for문 등을 사용하여 element 객체를 사용할수있다. 사용예는 아래와 같다. js var ols = document.getElementsByTagName("ol"); var lis = document.getElementsByTagName("li"); var divs = document.getElementsByTagName("div"); for( var i = 0; i < divs.length; i++ ){ var div = divs.item(i); div.st.. [JavaScript] innerHTML, document.write(), alert(), console.log() 사용법 innerHTML, document.write(), alert(), console.log() 사용법 innerHTMLinnerHTML 을 사용하면 HTML 문서안에는 태그의 내용을 가져오거나 변경할수있다. document.getElementId() 또는 document.getElementName() 과 같이 Element 객체에 불러와 사용한다. js html hi click! 위와 코드에서는 sample.innerHTML 은 태그안의 내용을 가져오는것이며 sample.innerHTML = "bye" 는 태그안의 내용을 bye 로 변경할수있다. document.write()document.write()는 문서안의 텍스트 또는 연산된 숫자를 넣을수있다. window.alert()window.alert() .. [JavaScript] getElementById() 함수 , 자바스크립트 id 접근 getElementById() 함수 , 자바스크립트 id 접근 이 함수는 태그에 있는 id 속성을 사용하여 해당 태그에 접근하는 함수이다. 만약 해당하는 id 를 가진 태그가없을경우 null 에러가 발생한다. 사용예는 아래와 같다. js html hi click! 예제에서는 버튼 클릭할때마다 태그의 내용을 가져와 비교후 hi 일때는 bye 로 bye 일때는 hi 로 변경하도록 하였다. 위와같이 해당하는 태그의 접근하여 동적으로 html 를 변경이 가능하다. 또한 getElementById() 함수를 사용하여 반환된 객체를 변수를 담아놓고 여러번 사용이 가능하다. 이전 1 다음
