티스토리

Binary World

검색하기

블로그 홈

Binary World

jhmocu.tistory.com/m

이진법으로 구성하는 새로운 세상

구독자: 0

방명록 방문하기

주요 글 목록

자바스크립트 이벤트(Event) 06 - Event Capturing: 이벤트 처리 순서가 부모 요소 -> 자식 요소- Event Bubbling: 이벤트 처리 순서가 자식 요소 -> 부모 요소 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253JavaScriptdiv { border: 1px solid grey; padding: 20px;}p { border: 1px dotted red;} Event Capturing/Bubbling Event Capturing: 부모 -> 자식 Event Bubbling: 자식 -> 부모 var div1 = document.getElementById('div1');var p1 = d.. 공감수 0 댓글수 0 2017. 4. 7.
자바스크립트 이벤트(Event) 05 * 이벤트 핸들러 등록 방법1:- element.event = function() {}; * 이벤트 핸들러 등록 방법 2:- element.addEventListener(event, function, useCaption);- event: 이벤트 이름(click, mouseover, ...)- function: 이벤트 핸들러(리스너) -> 필수- useCaption: true/false -> 선택(기본값은 false)- 장점: 하나의 이벤트에 여러개의 이벤트 핸들러를 등록할 수 있음 123456789101112131415161718192021222324252627282930313233343536373839JavaScript 자바스크립트에서 이벤트 핸들러 등록 방법버튼 1 var output = docume.. 공감수 0 댓글수 0 2017. 4. 7.
자바스크립트 이벤트(Event) 04 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758JavaScript#para { border: 1px solid grey; width: 200px; height: 100px; font-size: 2em; text-align: center;} HTML 마우스 이벤트마우스를 올려 보세요...... // onmouseover: 마우스 커서가 영역 위로 올라왔을 때// -> 배경색 바꿈. "마우스를 눌러주세요..." 라고 변경function mouseOver(para) { para.style.backgroundColor = 'lightpink'; para.innerHTM.. 공감수 0 댓글수 0 2017. 4. 7.
자바스크립트 이벤트(Event) 03 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263JavaScript HTML event 빨강 녹색 파랑 // onfocus: 포커스를 받았을 때// -> 입력상자(input)의 배경색을 바꿈function changeBgColor(input){ input.style.backgroundColor = 'lightyellow';} // onblur: 포커스를 잃었을 때// -> 입력상자(input)의 배경색을 원래대로 바꿈function resetBgColor(input){ input.style.backgroundColor = 'white';} // .. 공감수 0 댓글수 0 2017. 4. 7.
자바스크립트 이벤트(Event) 02 * button 태그의 type 속성:1. button: 클릭할 수 있는 버튼2. submit: form의 데이터들을 서버로 전송(type 속성의 기본값!)3. reset: form의 입력된 데이터들을 리셋(지움) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394JavaScripth1{ background-color: pink; color: white; font-size: 2.5em; /* 250% */ text-align: center.. 공감수 0 댓글수 0 2017. 4. 7.
자바스크립트 이벤트(Event) 01 1. HTML 태그안에서 이벤트 속성(attribute)에 이벤트 처리 코드를 직접 작성2. HTML 태그의 이벤트 속성에 함수를 설정하고, script에서 함수를 구현3. script 안에서 이벤트 리스너(핸들러)를 등록 12345678910111213141516171819202122232425262728293031323334353637383940JavaScript JavaScript를 사용한 HTML 이벤트 처리 onclick 이벤트에서 코드를 직접 작성다이얼로그(pop-up) 띄우기onclick 속성에서 JS 함수 호출script에서 이벤트 리스너를 등록 function change(para){ // var para = document.getElementById('para'); // content .. 공감수 0 댓글수 0 2017. 4. 7.
자바스크립트 요소(Element) 찾기 * JavaScript를 사용해서 HTML element를 찾는 방법: 1. getElementById('id') 2. getElementsByTagName('tagName') 3. getElemnetsByClassName('className') 4. CSS 선택자: querySelectorAll('선택자'), querySelector('선택자') 5. HTML object collection : body, form, images, anchors, ... 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051JavaScript#p1 { border: 1px solid grey;} HTML 요소.. 공감수 1 댓글수 1 2017. 4. 6.
자바스크립트 DOM(Document Object Model) 123456789101112131415161718192021222324252627282930313233343536373839404142JavaScript DOM(Document Object Model)여기는 단락입니다. var output = document.getElementById('output');var para = document.getElementById('para1');output.innerHTML += 'tagName: ' + para.tagName + ' ';output.innerHTML += 'parentElement: ' + para.parentElement + ' ';output.innerHTML += 'children: ' + para.children + ' ';output.inne.. 공감수 0 댓글수 0 2017. 4. 6.
자바스크립트 날짜표현(Date) 12345678910111213141516171819202122232425262728293031323334353637383940JavaScript JavaScript Date var output = document.getElementById('output'); // 현재 시간var curDate = new Date()output.innerHTML += curDate.toString() + ' ';output.innerHTML += curDate.toUTCString() + ' ';output.innerHTML += curDate.toDateString() + ' '; // 특정 시간의 Date 객체 생성var today = new Date(2017, 3, 6, 1, 20, 30);output.innerH.. 공감수 0 댓글수 0 2017. 4. 6.
자바스크립트 숫자변환 1234567891011121314151617181920212223242526javascript JavaScript Number var output = document.getElementById('output'); output.innerHTML += parseInt('10 20 30') + ' ';output.innerHTML += parseInt('year 2030') + ' ';output.innerHTML += parseInt('1.23') + ' '; output.innerHTML += parseFloat('10 20 30') + ' ';output.innerHTML += parseFloat('year 2030') + ' ';output.innerHTML += parseFloat('1.23') +.. 공감수 0 댓글수 0 2017. 4. 6.
자바스크립트 문자열(String) 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687JavaScript JavaScript String 메소드 var output = document.getElementById('output'); var str1 = '안녕하세요'; // 문자열 상수(String literal)var str2 = '안녕하세요';if (str1 == str2){ output.innerHTML += '같은 객체 ';} else { output.innerHTML += '다른 객체 ';} .. 공감수 1 댓글수 0 2017. 4. 6.
자바스크립트 프로토타입(Prototype) - 생성자 함수의 프로토 타입을 변경할 수 있음 12345678910111213141516171819202122232425262728293031323334353637JavaScript생성자 함수 prototype 변경 var output = document.getElementById('output'); // 생성자 함수function Unit(name, money){ this.name = name; this.money = money;} // 생성자 함수의 proto type을 변경:Unit.prototype.gas = 0;Unit.prototype.attack = function() { output.innerHTML += this.name + '가 공격합니다!!'}; var unit1 = new Unit.. 공감수 0 댓글수 0 2017. 4. 6.
자바스크립트 프로퍼티(Property) 02 - 객체의 프로퍼티를 삭제/추가 할 수 있음 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849JavaScript JavaScript Object Property var output = document.getElementById('output'); function Unit(name, money){ this.name = name; this.money = money;} var unit1 = new Unit('probe', 50);for (x in unit1){ output.innerHTML += x + ' : ' + unit1[x] + ' ';}output.innerHTML += ''; // 생성된 .. 공감수 0 댓글수 0 2017. 4. 6.
자바스크립트 프로퍼티(Property> 01 - 자바스크립트는 객체(object)가 생성된 이후에 프로퍼티를 추가/삭제할 수 있음! 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647JavaScript 자바스크립트 객체의 프로퍼티 추가/삭제 var output = document.getElementById('output'); // 자바스크립트는 객체(object)가 생성된 이후에 프로퍼티를 추가/삭제할 수 있음!var unit1 = { name: 'scv', money: 50};for (x in unit1){ output.innerHTML += x + ' : ' + unit1[x] + ' ';}output.innerHTML += ''; unit1... 공감수 0 댓글수 0 2017. 4. 6.
자바스크립트 메소드(Method) - 함수를 이용하여 정보 출력 1234567891011121314151617181920212223242526272829303132333435363738394041JavaScriptJavaScript Method: 객체가 가지고 있는 함수 var output = document.getElementById('output'); // 생성자 함수function Unit(money, gas, ph) { /* property */ this.money = money; this.gas = gas; this.ph = ph; /* method */ this.attack = function(unit) { unit.ph -= 10; output.innerHTML += unit.ph + ' ' }; this.toString =.. 공감수 0 댓글수 0 2017. 4. 6.
자바스크립트 객체(Object) * JSON: JavaScript Object Notation(자바스크립트 객체 표기법) {프로퍼티: 값, 프로퍼티: 값, ...} {userid: "admin", password: "admin123", email: "admin@test.com"} 자바스크립트 객체의 프로퍼티의 값을 참조: 객체이름.property1, 객체이름['property1'] * 자바스크립트의 객체 선언/초기화 방법1 var 객체이름 = { property1: value1, property2: value2, ... }; * 자바스크립트의 객체 선언/초기화 방법2 : Object 생성자 함수 이용 - 권장하지 않음(성능이 떨어짐) * 자바스크립트의 객체 선언/초기화 방법3 : 생성자 함수를 작성/호출 12345678910111213.. 공감수 1 댓글수 0 2017. 4. 5.
자바스크립트 배열(Array) 02 - 자바스크립트의 배열은 다른 타입의 원소들을 저장할 수 있음- 자바스크립트는 초기화되어 있는 배열의 원소를 추가/삭제할 수 있음 -> 동적으로 배열을 변화시킬 수 있음 - push(원소): 배열의 가장 마지막에 새로운 원소를 추가- pop(): 배열의 가장 마지막 원소를 삭제- shift(): 배열의 첫번째 원소를 삭제, 배열 원소들의 인덱스를 모두 변경- unshift(원소): 배열의 첫번째에 새로운 원소를 추가, 나머지 원소들은 뒤로 이동 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253JavaScript JavaScript 배열 var output = document.get.. 공감수 0 댓글수 0 2017. 4. 5.
자바스크립트 배열(Array) 01 - 자바스크립트에서 배열 선언/초기화 방법 1 var 배열이름 = [원소1, 원소2, ...];- 배열의 선언/초기화 방법 2 var 배열이름 = new Array(원소1, 원소2, ...); - for-in 구문(자바의 enhanced-for 구문)- for (String x : dramas) {} - 자바 문법- 자바스크립트 for-in 구문에서는 x는 배열의 인덱스(배열의 원소가 아님!) 1234567891011121314151617181920212223242526272829303132333435363738JavaScript JavaScript 배열(Array) var output = document.getElementById('output'); // 자바스크립트에서 배열 선언/초기화 방법 1://.. 공감수 1 댓글수 1 2017. 4. 5.
자바스크립트 이벤트 처리 - 다양한 이벤트 처리가 가능 12345678910111213141516171819202122232425262728293031323334353637383940JavaScript JavaScript Event Handling var title = document.getElementById('title');var toggle = true; function test1() { if (toggle){ title.innerHTML = '자바스크립트 이벤트 처리'; toggle = false; } else { title.innerHTML = 'JavaScript Event Handling'; toggle = true; }} function test2() { title.style.backgroundColor = 'ho.. 공감수 0 댓글수 0 2017. 4. 5.
자바스크립트 함수(function)03 - default parameter : 함수를 정의할 때 매개변수의 기본값을 설정- 함수를 호출할 때 전달된 매개변수는 정의한 함수에 순서대로 값들이 복사 -> 함수를 정의할 때 기본 파라미터가 필요하면 다른 매개변수들을 먼저 선언하고, 기본 파라미터들을 나중에 선언하는 것을 권장 - nested function: 함수 내부에서 정의하는 함수- 함수 내부에서 기능을 정의하고 사용하기 위해서 작성하는 함수- nested 함수는 그 함수가 정의된 함수안에서만 호출 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768Java Script.. 공감수 0 댓글수 0 2017. 4. 5.
자바스크립트 함수(function)02 - 자바스크립트 함수는 매개변수의 갯수와 타입을 체크하지 않기 때문에- 함수 overloading을 할 수 없음 -> 같은 이름으로 함수를 정의하면, 나중에 정의한 함수가 이전 함수 정의를- 덮어씀(overriding)- NaN: Not a Number(숫자가 아니다)- isNaN(a): a가 숫자가 아니면 true, 숫자이면 false를 리턴하는 함수 - arguments 객체 : 함수에 전달된 인자(매개변수)를 저장하는 (배열) 객체- arguments.length : 매개변수 갯수- arguments[i] : i번째 매개변수 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535.. 공감수 0 댓글수 0 2017. 4. 5.
자바스크립트 함수(function)01 - function 함수이름(매개변수1, 매개변수2, ...) {실행코드;}- 함수 호출:함수이름(매개변수, ...);- 함수의 정의 부분은 script의 윗부분으로 이동-> 함수를 정의하기 이전에 호출할 수도 있다. 1. 자바스크립트 함수는 매개변수의 타입을 명시하지 않음2. 자바스크립트 함수는 전달받는 매개변수의 타입을 체크하지 않음3. 자바스크립트 함수는 전달받는 매개변수의 개수를 체크하지 않음 12345678910111213141516171819202122232425262728293031Java Script JavaScript 함수(function) var output = document.getElementById('output'); var result = add(1, 2); // 함수 호출 ou.. 공감수 0 댓글수 0 2017. 4. 5.
자바스크립트 반복문, 전역변수, 지역변수 - JavaScript의 전역 변수(global variable): 태그 안에서 선언된 변수 선언된 위치와 상관 없이 변수 선언부분을 script의 첫부분으로 이동 - JavaScript의 지역 변수(local variable): 함수(function) 내부에서 선언된 변수 - 자바문법과 동일 12345678910111213141516171819202122232425262728293031323334353637383940JavaScriptJavaScript for문, 전역/지역 변수 var output = document.getElementById('output'); output.innerHTML += 'i = ' + i + ' '; //var x = 10;//var x = 123; for(var i = .. 공감수 0 댓글수 0 2017. 4. 4.
자바스크립트 Switch문 - 자바스크립트는 숫자 타입을 정수/실수로 구분하지 않음- 실수 타입도 switch-case 구문에서 사용할 수 있음- 자바는 실수 타입을 switch-case에서 사용할 수 없음 123456789101112131415161718192021222324252627282930313233343536373839404142JavaScript SwitchJavaScript switch문 var output = document.getElementById('output'); var x = '2';switch(x){case 1: output.innerHTML += 'One '; break;case 2: output.innerHTML += 'Two '; break;default: output.innerHTML += 'I .. 공감수 1 댓글수 1 2017. 4. 4.
자바스크립트 if문, 비교연산자, 삼항연산자 - ==, != : 자바 스크립트는 자동 형변환이 이루어져 값만 비교함- ===, !== : 타입과 값을 함께 비교 12345678910111213141516171819202122232425262728293031323334353637383940414243JavaScript JavaScript if문, 비교연산자, 삼항연산자 var output = document.getElementById('output');var x = 123;if (x > 0){ output.innerHTML += '양수 ';} else { output.innerHTML += '음수 ';} // ==, != : 자동 형변환이 이루어져서 값만 비교// ===, !== : 타입과 값을 함께 비교var age = '16'; // 문자열if(.. 공감수 0 댓글수 0 2017. 4. 4.
자바스크립트 변수 선언과 사용 - var 변수이름 = 초기값;- var 변수이름;- 변수이름 = 값;- 자바 스크립트는 변수를 선언할 때 변수 타입을 명시- 자바스크립트의 변수 타입: 1) 숫자(number) 타입 : 정수(-1, 0, 1, .....), 실수(1.2, ....) 2) 문자열(string) 타입 : '문자열', "문자열" 3) 논리형(boolean) 타입 : true, false 4) 객체(object) 타입 : 자바의 클래스 인스턴스(객체) 5) null 123456789101112131415161718192021222324252627282930313233343536373839404142434445JavaScript 자바스크립트 변수 선언과 사용 var output = document.getElementById('o.. 공감수 0 댓글수 0 2017. 4. 4.
자바스크립트 출력방법 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667Java Script 자바스크립트 출력 방법document.write() 함수 사용document.write('안녕하세요~')Click! innerHTML 속성 사용 Click! 다이얼로그(dialog) 사용alertconfirmPrompt 콘솔 로그 출력로그 출력 function test(){ document.write('방가!!'); // (주의)HTML 문서의 로딩이 끝난 후 document.write()를 호출하면 // 문서 전체의 내용을 덮어쓰게 됨! } function te.. 공감수 0 댓글수 0 2017. 4. 4.
자바스크립트가 할 수 있는 일들 1. HTML 요소(element)의 컨텐트를 변경2. HTML 요소(element)의 속성(attribute)를 변경3. HTML 요소(element)의 스타일(CSS)를 변경4. 입력 양식의 데이터를 체크 ** 자바와 자바스크립트의 차이점- JavaScript에서 if문을 사용할 때 true/false- 0, null, undefined ==> false로 처리- 그 외 나머지(값이 있으면) ==> true로 처리 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273Java Script 자바스크립트가 할 수 있.. 공감수 0 댓글수 0 2017. 4. 4.
자바 스크립트 소개 - 웹 개발: Front-End, Back-End 개발* Front-End 개발 언어:1. HTML: 웹 페이지의 컨텐트(내용)을 작성2. CSS: 웹 페이지의 스타일(레이아웃)을 작성3. JavaScript: 웹 페이지의 동적인 동작(기능)을 프로그램 * Back-End 개발 언어:1. Java -> Servlet, JSP2. PHP3. C# -> ASP, ASP.NET4. Node.js * HTML 파일에서 자바스크립트를 사용하는 방법:1. 태그 안에서 자바스크립트 코드를 작성 1) 태그 안에 태그를 포함 2) 태그 안에 태그를 포함 2. 자바스크립트 코드만 작성한 .js 파일을 HTML 파일에서 링크==> 자바스크립트 코드가 있는 위치에서 실행 123456789101112131415161718192.. 공감수 0 댓글수 0 2017. 4. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.