본문 바로가기

WEB/Javascript

(20)
[JS] 이벤트처리 - 마우스 조작 https://developer.mozilla.org/ko/docs/Web/Events#%EA%B0%80%EC%9E%A5_%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9D%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 마우스 이벤트 이벤트명발생하는 시점 mouseenter (en-US) 포인팅 장치가 리스너가 등록된 엘리먼트 위로 이동했을 때. mouseover (en-US) 포인팅 장치가 리스너가 등록된 엘리먼트나 ..
[JS] Window - addEventListener 이벤트 처리하기 2022.07.01 - [WEB/Javascript] - [JS] 브라우저 DOM [JS] 브라우저 DOM https://www.w3schools.com/js/js_htmldom.asp JavaScript HTML DOM W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like.. tae-05-yu.tistory.com 이전 DOM 포스팅에 사용했던 버튼 예시를 사용해보자 HTML 삽입 미리보기할 수 없는 소스 타겟.addEventListener(타입(이벤트명),함수(리스너)) const btn = document.quer..
[JS] Window - 안내메세지 / 확인메세지 / 입력메세지 띄우기 window 속성(값) 메소드 타겟 을 배경색으로 구분하겠다. HTML 삽입 미리보기할 수 없는 소스 여기서 사용한 메세지창을 띄우는 각각의 메소드들(alert / confirm / prompt)은 DOM의 최상위 객체인 window객체의 메소드이므로 타겟인 window을 생략하고 사용할 수 있다. .innerHTML() 으로 사용자에게 받은 결과값을 html 요소 중 class 이름이 .log인 요소의 값을 변경한다. 타겟 : document.querySelector('.log') 값 : 변수에 저장되는 메소드(confirm,prompt)의 결과값 결과 : 요소의 값이 사용자에게 입력받은 결과값으로 변경된다. 버튼2는 confrim('재밌는 하루를 보냈나요?')으로 확인과 취소 두 버튼을 가지며 메시지..
[JS] 브라우저 DOM https://www.w3schools.com/js/js_htmldom.asp JavaScript HTML DOM W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 웹 브라우저에서 다루는 객체(BOM) 중 가장 최상위는 window이며 DOM은 window의 하위객체 DOM(Document Object Model) 문서객체모델로 여러 모델이 있지만 여기선 HTML DOM으..
[JS] 기본 배열 - 1편 JS의 배열은 데이터 타입에 상관없이 혼합해서 사용할 수 있다. const array_1= [1,'apple',true] 배열의 정의로 함수 new Array()을 이용할 수도 있다. const a = new Array(3) a[0]='apple' a[1]=false a[2]=34 또는 아래처럼 정의할 수 있다. const b = new Array('orange',true,43) 그렇지만 데이터를 직접입력하는 경우 [ ] 을 사용하는 것이 가장 간단하다. 배열을 다룰 때 사용하는 여러 함수가 있다. 1) forEach(콜백함수) 콜백함수로 배열의 값과 인덱스를 활용해서 출력해보자 onst array_1 = [2,3,5,7,11,13,17,19] array_1.forEach((value,index) => ..
[JS] 기본문법 - 문자열 -정규표현식 정규표현식을 사용하면 많은 코드를 줄일 수 있다. 예를 들어 정규표현식을 사용하지 않은 경우 const string1 = "Kim 010-1234-5678" if ( string1.includes("Kim")|| string1.includes("010")|| string1.includes("-") ){ alert("Kim 의 전화번호는 "+ string1+ "입니다.") } 각각의 문자열들이 변수안에 포함되어있는 가의 조건문을 필요한 만큼 사용해야한다. 만일 정규표현식을 사용한다면 한 줄에 끝난다. const string1 = "Kim 010-1234-5678" if (/010|-|Kim/.test(string1)) { alert("Kim 의 전화번호는 "+ string1+ "입니다.") } /이문자가/..
[JS] 기본문법 - 문자열 const a = "hello" const b = "frontend" 1. 길이 a.length b.length Array.from(a).length Array.from(b).length console.log(a.length); //5 console.log(b.length); //8 console.log(Array.from(a).length); //5 console.log(Array.from(b).length); //8 Array.from(a).length 을 사용하는 이유 문자가 아닌 이모티콘을 문자취급하고 싶을 때 사용한다, 이모티콘은 4바이트로 표현되기 때문에 일반 .length을 사용하면 값이 2 이지만 실제로 차지하는 자리는 1이니까 4바이트 서러게이트쌍을 1로 표시하기 위해 array을 사용한..
[JS] 기본문법-숫자 1. 소수점 다루기 1. 반올림하기 : 소수점 0.5 이상이면 다음 정수 값으로 올려서 반환 Math.round(3.5) Math.round(3.8) 2. 버리기 : 값보다 작은 정수 반환 Math.floor() 3. 올림하기: 값보다 큰 정수 반환 Math.ceil 4. 값의 정수로 반환 Math.trunc() 음의 정수로 변환시에는 올림처리할 때는 절댓값은 적어져도 값은 전보다 0에 가까워지니 값은 커지는 것 2. random숫자 1.Math.random() :0이상 1미만의 수를 임의로 반환 const a=Math.floor(Math.random()*100); //0이상 100미만의 임의의 정수 console.log(a) const b=Math.floor(10+Math.random()*10); //..