Jun's TID

input 태그의 onkeydown 속성을 이용하여, 키보드 키가 눌렸을 때 특정 동작이나 연산을 수행하게끔 할 수 있다. 예제는 keyHandler 함수를 작성하여 직전에 누른 키의 값과 코드를 출력하도록 구현했다. 텍스트 필드에 키보드 값 입력 눌린 키 : 눌린 키 코드:

location 객체가 가지고 있는 replace함수는 해당 페이지로 이동하는 것이 아닌 "변경"해준다. 따라서 브라우저에서 호출한 페이지로 이동하지만, 뒤로가기 버튼은 사용할 수 없다. 현재 페이지 네이버로 변경

navigator와 비슷하게, location 객체를 사용하여 해당 문서의 정보 또한 확인할 수 있다.

setInterval 함수를 사용하여 스크립트 내에서 특정 함수를 반복 호출할 수 있다. setInterval함수는 다음과 같이 사용한다. setInterval(함수명, 밀리초 시간) 즉, 다음과 같이 코드를 작성하여 현재 시간을 계속 업데이트하여 디지털 시계를 구현할 수 있다.

스크립트 내부의 브라우저 객체가 존재하기 때문에 navigator 메서드를 사용하여 현재 브라우저의 정보를 얻을 수 있다. 코드는 다음과 같이 작성했다. 결과는 보시다시피 각 브라우저마다 다른 값을 가지고 있다는 것을 확인할 수 있다. 이를 확인하여 적용할 css를 골라 적용시킬 수 있다.

checkbox를 모두 호출하여 체크 값을 확인한 후에 checkbox.value를 가격에 더해주는 간단한 예제이며, 이벤트 리스너에서 쓰이는 this의 개념이 조금 헷갈려서 코드를 remind하기 위한 포스팅이다. ◎javascript var price = 24000; var sideMenu = document.querySelectorAll(".checkbx"); var total = document.querySelector("#total"); for(var i = 0; i < sideMenu.length; i++){ sideMenu[i].onclick = totalPrice; } function totalPrice() { if(this.checked == true){ price += parseInt(..

자바 스크립트를 이용하여 input 태그의 value 값을 저장하고, 그 값을 다른 input 태그의 value에 삽입하는 간단한 예제이다. 바로 코드를 보자. (css는 주요 내용을 포함하고 있지 않기 때문에 생략) ◎order-result.js var check = document.querySelector("#shippingInfo"); check.addEventListener("click", function checkFunction() { if (check.checked == true) { var bName = document.querySelector("#billingName").value; var bTel = document.querySelector("#billingTel").value; var ..

이번 포스팅은 자바스크립트에서 form 태그 내부의 select 태그가 선택한 값을 호출하고, 그 값을 출력하는 간단한 Form 예제를 구현하려고 한다. 우선 form 태그 내에서 select의 option 인자들은 생성되는 순서에 따라 0번부터 자동으로 index번호가 부여된다. 이 index 번호는 스크립트의 selectedIndex 함수로 호출이 가능하다. 코드를 한번 보자. (css는 주된 내용이 아니므로 생략) ◎getForm.js var selectMenu = document.testForm.major; function displaySelect(){ var selectedText = selectMenu.options[selectMenu.selectedIndex].innerText; alert(..

자바스크립트에서 클라이언트가 버튼을 클릭했거나, 입력 창에 값을 입력하는 등의 동작을 했을 경우, 이벤트 리스너를 활용하여 해당 이벤트에 맞는 동작을 수행하도록 구현할 수도 있다. 이벤트 리스너를 사용하는 방법은 크게 두가지가 있다. 1. var addBtn = document.querySelector("#add"); //버튼의 id 값 addBtn.addEventListener("click", addList); // add 버튼을 클릭 했을 때, addList 함수 호출 2. var addBtn = document.querySelector("#add"); //버튼의 id 값 addBtn.click = addList; 바로 예제를 한번 확인해보자. 예제: 버튼 클릭 이벤트를 사용하여 입력 항목을 리스트에..

자바스크립트의 Date 클래스를 활용하여 간단한 D-Day 페이지를 구성해봤다. 폰트는 구글 API 를 사용했으며, 시작일은 하드 코딩으로 자바스크립트 내에서 선언하였다. ◎d-day.css @import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Jua'); * { box-sizing: border-box; } .container{ width:450px; margin:0 auto; /* background:url(images/heart.png) no-repeat 5px -100px; background-size:500px; */ border:1px solid #ccc; border-radius:2%; box-shadow:2px 2px 5p..