목록WebFront_ (40)
YJ의 새벽
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ycylv/btr1p0R32ut/p0uoaRRWVgKfMLkbq7fm11/img.png)
window 객체 -- 브라우저 창 자체를 나타내는 객체 -- window 객체는 JS에서 최상위 객체이며 , DOM , BOM 으로 분류된다. DOM ( Document Object Model ) : HTML 문서 자체를 나타내는 객체 ( document ) BOM ( Browser Object Model ) : location , history , screen , navigator ( 페이지의 이동 ) -- window 객체는 창 자체를 나타내고 있으므로 , 브라우저 창 내에서 어디서든 접근 가능 . window 객체의 속성과 기능 호출시 window 단어 생략 가능 . ex ) window.alert () == alert () -- 시간 관련된 함수는 비동기 ! ( 코드인식은 순서대로 진행되지만, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/eC6ImL/btr0NIzmEZg/qKgGDdKkK0xrrFGGVO8XVk/img.png)
문자열 -> 숫자 ( 형변환 ) -- 요소의 내용 또는 값을 얻어오면 기본적으로 문자열 (string)로 인식됨. --> 덤셈 연산 시 '더하기' 가 아닌 '이어쓰기' 가 되는 문제 발생 - parseInt (문자열) : "정수" -> 정수( "123" -> 123 ) "실수" -> 정수( "3.14" -> 3 ) 소수점 버림 - parseFloat (문자열 ) : "정수" -> 정수( "123" -> 123 ) "실수" -> 정수( "3.14" -> 3.14 ) - Number( 문자열 ) : "정수" -> 정수 ("123" -> 123 ) "실수" -> 실수 ( "3.14" -> 3.14 ) 형변환 확인 const btn1 = document.getElementsByClassName("btn1")[0..
정규표현식 ( Regular Expression ) -- 특정한 규칙을 가진 문자열 집합을 표현, 사용하는 형식 언어. -- 정규표현식을 이용하면 입력한 문자열에 대한 특정 조건 검색, 일치 여부 판단, 치환에 대한 조건문을 간단히 처리할수 있다. ---- 참고 사이트 (( 작성한 정규표현식을 그림으로 나타내줌 )) Regexper regexper.com ---- 참고사이트 (( 정규표현식 테스트 )) RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com ---- 참고사이트 (( MDN - 정규표현식 )) 정규 표현식 - ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BvCNE/btr0JPpZiOD/BfWq1CFtnLqpEQA9tDJvkk/img.png)
***** 마우스 관련 ***** 키 관련 ***** 폼 관련 ***** 로드/ 기타 관련 이벤트 (Event) -- 이벤트 : 동작 , 행위 -- > click, keydown , keypress , keyup , mouseover , mouseout , mouseleave , ........ -- 이벤트 리스너 ( Event Listener ) --> 이벤트가 발생하는것을 대기하고있다가 이벤트 발생이 감지되면 연결된 기능 (함수) 을 수행함. ex ) onclick, onkeyup , onchange, onsubmit ... ( on이벤트명 ) -- 이벤트 핸들러 ( Event Handler ) --> 이벤트 리스너에 연결된 기능 (함수) 이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수. ..
-- eval ( "코드형식의 문자열" ) --> 매개변수의 문자열을 JS 코드로 해석/수행 함수 --> 속도가 느림 + 보안 이슈로 인해 사용 X -- new Function 사용. -- new Function ( "return " + number+ string + number) () ; 간이계산기 만들기 첫번째 값 : 두번째 값 : + - * / % 계산결과 : const input1=document.getElementById("num1"); const input2=document.getElementById("num2"); const output1=document.getElementById("resultBox") function plus(){ output1.innerText=Number(input1...
변수 선언 위치에 따른 구분 **** JAVA = -- public class Student() { // 필드 ( 멤버변수 선언부 ) private String name; // 인스턴스 변수 public static String schoolName; // static변수, 클래스변수 // 메소드 public void method ( String name) { // 매개변수 ( ==파라미터 ) int num = 10; // 지역변수 if ( num > 10 ) { int a = 20 ; // if 지역변수 } } } **** Java Script = -- script 언어는 중간에 에러 발생 시 해석을 멈춤. var num1; // 전역 변수 num2 = 200 ; // 전역 변수 . (키워드없으면 전역변..
--onkeydown : 키가 눌러졌을때. --onkeypress : 키가 눌러지고있을때. --onkeyup : 키가 다시 올라올때. -- scrollTop = 스크롤위치 : 스크롤위치로 이동한다. 카카오톡 채팅화면 만들기 입력되는 채팅출력 입력되는 채팅출력 입력되는 채팅출력 입력
DOM (Document Object Model) -- 웹 문서(HTML)의 모든 요소를 객체 형식으로 표현하는 방법 --> 문서 내 특정 요소에 접근하는 방법을 제공 DOM 을 이용한 요소 접근 방법 1. id 속성 값으로 접근하기 ( document . getElementById ("id속성값") ; 2. class 속성값으로 접근하기 ( document . getElementsByClassName ( "class속성값" ); : 배열 arr[0], arr[1] ... 로 접근한다 . 3. name 속성값으로 접근하기 ( document . getElementsByName ("name속성값"); : 배열 arr[0], arr[1] ... 로 접근한다 . 4. tag name 으로 접근하기. ( doc..