Jun's TID

스크립트 내부의 브라우저 객체가 존재하기 때문에 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..

자바스크립트도 마찬가지로 객체를 생성하면서 동시에 생성자를 선언해줄 수 있다. 이 때, 맴버 변수나, 메서드들은 반드시 this를 사용하여 선언해줘야 한다. 예제를 확인해보자. ◎quiz-2.js var circle1 = new Circle(r); document.write("반지름이" + r + "cm 일 때" + " 원의 둘레: 약" + circle1.circumference() + "cm 원의 넓이 : 약" + circle1.area() + "cm2"); //Circle 객체 생성자 선언 function Circle(radius) { // Circle 객체의 멤버 변수 선언 this.radius = radius; //Circle 객체의 메서드 선언 this.circumference = functio..

자바스크립트도 마찬가지로 객체지향언어이기 때문에 객체를 생성하여 활용할 수 있다. 객체는 다음과 같은 형식으로 생성할 수 있다. var member = {name: 춘햄, age : 27}; 생성한 객체는 다음과 같이 사용할 수 있다. ◎member.js var member = { id: 123, name: "choonham", age: 27, address: "incheon" }; ◎member.html

사실, 한참 전에 풀이를 시작했는데, 연결리스트의 조회나, 삭제와 같은 기능의 구조를 이해하고 구현해서 문제에 적용시키는데 굉장히 오랜 시간이 걸렸다. 자바의 경우 Util 패키지에서 해당 자료 구조의 객체를 지원하지만, 파이썬은(아마 내 생각엔) 리스트가 어느 정도 연결리스트의 역할을 하기 때문에 굳이 내장 객체를 지원하지 않는 것 같다. 바로 풀이를 보자. class ListNode: def __init__(self, data): self.val = data self.next = None class LinkedList: def __init__(self): head_node = ListNode(None) self.head = head_node self.tail = head_node self.num_of..

기본적으로 HTML 태그들은 작성되는 순서대로 위에서 아래로 나열되지만 style 속성을 display:inline-block 로 지정해주게 되면, 세로에서 가로로 객체들이 나열된다. ◎gugudan.css div { display:inline-block; /*가로로 나열*/ padding:0 20px 30px 20px; margin:15px; border:1px solid #ccc; line-height:2; } div h3 { text-align:center; font-weight:bold; } ◎gugudan.html 구구단 깔 - 끔