Day 32~34 - javascript(Propagation, 객체, Number객체, 정규화표현식)

이클립스가 개발된 버전에 따라서 mapping되어 있음 

헬리오스 : 1.7 버전

2019.09 버전 11되어 있음

 

특별히 문제는 없으나

javascript의 자동완성, 에디터 퍼스펙티브가 지원하지 않음 왜냐하면 자바 버전이 맞지 않아서 그렇다

 

그래서 tern을 다운받아서 사용하였다.

install을 통해서 tern 다운로드 후  browser만 적용하여 사용하면 javascript 자동완성이 가능해진다.

하지만 이건 부분유료화라서 계속 업데이트하라고 올라온다. 그리고 사용하지 말라고 하셨는데 

타자가 느리고 function이 많은데 이걸 자동완성 없이 우리가 하기에는 힘들어서 그냥 어쩔 수 없이 사용하는 것이라고 말씀하셨다.

 

 

 

return;  사용하던 것을 모두 멈추겠다

return false; 

 

dom탐색과 selector 표현식(#ID / .class / tag 사용)

 

위치탐색과 속성탐색을 구분해서 생각해라

 

위치를 탐색한 것에다가 length를 할 수 없다. 그 안에 들어있는 실제 값에 대하여 사용해야 원하는 결과가 출력된다.

 

---

Propagation

propagation(전파) : javascript는 이벤트로 동작이 됩니다.

ex) <a> </a> 는 흐름제어를 위해서 사용, location.href ="": => 페이지로 이동한다

그런데 <a hred =" onclick="></a> 이렇게 작성하면 어떻게 될까

 

propagation : event의 흐름을 끊어낸다(하지만 내부 onclick에서 동작하는 변경은 동작이 됨)

return false; 하면 다음 전파를 제어한다.

 

QuerySelector는 CSS에서 사용했던 #id .class  tag를 사용하고 selector 표현식은 NodeList이다

---

javascript 객체 생성 

//1번 명시적 방법

function Class008(){
	this.name = "eclipse"; //this 외부에서 접근이 가능
	var name02 = "javascript";//var 외부에서 접근 안됨
	
	this.getName02 = function(){
		return name02;
	}

명시적 방법으로 Class008이라는 이름을 갖고 있다. this를 사용하면 외부에서 접근이 가능하고 객체 안에 있는 var는 외부에서 접근이 안된다. 하지만 this.getNmae02를 통해서 name02를 get하는 방법이 있다

---

 

//2번 익명적 방법

var Class008_2 = {
	name:"Goodee.com",
	print:function(){
		alert(Class008_2.name);
		return Class008_2.name;
	}
}

익명적 방법으로 function 함수명() 이렇게 작성하지 않고 var Class008_2 라고 생성할 수 있다. 그안에 있는 print에 함수를 대입하여 사용하였다.

---

function objectTest(){
	
    var Class008 = new Class008(); 
    
    Class008.name = "홍길동"; 
    
    
    Class008.prototype.printName = function(){
    	alert(this.name+","+this.getName02();
    
    }

new를 통하여 생성하는 것은 java와 똑같다. 그리고 객체는 대문자로 작성한다 pascal 명명법을 사용한다.

prototype은 객체의 확장을 하는 방법이다(java의 extends와 유사하다)

---

 

Number객체

javascript에서 제공하는 기본 객체이다

function numberTest(){


var num1 = new Number(7);
var num2 = 10;


document.write(1=='1');
document.write("속성NaN"+parseInt('1');

document.write(Number.MAX_VALUE+0.000001e+380);

}

new를 통하여 객체 선언

Nan :숫자가 아닌지 문자형 숫자인지 판별한다

문자형 숫자를 자동으로 변환이 가능하지만 숫자가 아닌 형태 Nan

---

var double = 3.141592;
var d = double.toFixed(4)
num1.toString(2)

toFixed(4) 소숫점 넷째자리까지 고정시켜준다.

num1은 10이라고 선언되어 있고 toString()은 문자열로 바꿔준다. ()안의 값에 따라 표현이 달라진다.

(2)는 이진수로 바꿔주고 (8)로 바꾸면 8진수로 표현바꿔준다.

 

---

정규화 표현식

 

/^로 시작하여 $/로 끝난다

function isRegEx(){ 

var regxp = /^[0-9]*$/
var val = documnet.getElementbById("num").value;

}

regxp 는 0~9까지의 숫자만 입력하라는 표현식이다. 정규화 표현식은 외우지 말고 찾아서 사용하도록 한다.

 

function isPhoneRegEx(){

 var regex = /^\d{2,3}-\d{3,4}-\d{4}$/
 

}

 

위의 정규화 표현식은 (\d digit 숫자이며 {2,3} 두자리에서 세자리) - (\d digit 숫자이며 {3,4} 세자리에서 네자리) - (\d digit 숫자이며 {4}네자리) 라는 표현으로 이것은 전화번호에 대한 예시이다.

 

regexper.com/ 여기서 정규화 표현식 찾아서 사용해라