변수, 데이터형, 연산, 제어
태그 -> 객체
정규표현식 -> 검색
이벤트 -> 80%
정규표현식
- 패턴을 형성하는 문자들의 집합으로 문자열 내에서 검색, 대체, 추출 등을 할때 사용한다.
//문자열 내에 한 개이상의 s문자를 포함한다
var search = new RegExp('+s');
= var search2 = /+s/;
test()
- 입력된 문자열이 정규표현식에 부합하는 지 판단
//i는 대,소문자 구분없이 검사하라는 뜻
var re = /JavaScript rules/i;
//g는 전역매칭(한 줄만 검사하는 게 아니라 전체를 검사
var re = /JavaScript rules/g;
exec()
- 해당 패턴 내용을 추출
* - 0개 이상으로 구성
//J로 시작하고 S문자가 0개 이상
var re = /JS*/ig;
var str = "abcJScript*RuleJSdef";
var result = re.exec(str);
while(result) {
document.writeln(result);
result = re.exec(str);
}=>JS JS
String
- replace() : 결과에 맞는 것으로 바꿔준다
- match() : 결과에 맞는 것만 찾아서 리턴
- search()
\s - 문지 s가 아닌 공백문자 의미
//(공백)*
var regExp = /\s\*/g ;
var str = "This *is *a *test *String";
var result = str.replace(regExp, "-");
document.writeln(result);=>This-is-a-test-String
\D - 숫자가 아닌 문자
\d - 숫자
-> //숫자 표현
var regExp = /:\D*\s\d+\s\d+/;
//var regExp = /:[^0-9]+\s[^0-9)\s[0-9]+/;
//숫자가 아닌 표현
var str = "This is a date: March 12 2005";
var result = str.match(regExp);
document.writeln(result);=>: March 12 2005
^ - 한 줄의 시작과 끝에 위치한 패턴을 찾는 데 사용
var regExp = /^The/i;
var str = "the This is a date: March 12 2005";
var result = str.match(regExp);
document.writeln(result);=>the
$ - 한 줄의 끝에 위치한 패턴을 찾는 데 사용
var regExp = /end$/i;
var str = "The This is a The date: end March 12 2005 end";
var result = str.match(regExp);
document.writeln(result);=>end
/( ) - ( )/ - $1, $2
\w - 알파벳, 숫자로 된 문자[A-Za-z0-9]
var regExp = /(\w*)-*(\w*)/;
var str = "Java--Script";
var result = str.replace(regExp, "$2-$1");
document.writeln(result);=>Script-Java
자바스크립트는 한 문서에 대해 부분모듈이다.
이벤트
- 웹 브라우저에서 사용자 행동의 발생을 자바스크립트 엔진 내부에 알리는 통지
이벤트 핸들러 작성방법
1. HTML태그 내 삽입형(종속적)
<script type="text/javascript">
function fun1() {
alert("이벤트 첫 시간이네요");
}
</script>
<body onload="fun1();">
2. 객체 이벤트 속성에 직접 코드 삽입형(웹 표준)
<script type="text/javascript">
function fun1() {
alert("이벤트 첫 시간이네요");
}
window.onload = fun1;
</script>
이벤트 핸들러의 고유 행위를 취소하는 방법
- 부적합한 데이터를 보냈을 때 취소한다.
-><a href="http://www.yahoo.co.kr" onclick="return false">이동할 수 없는 링크</a>
이벤트 핸들링
- 실습예제 참조
cross 브라우저
이벤트 버블
- 이벤트가 흘러가는 현상
- 이벤트가 흘러가면 계층 구조 상에 이벤트가 지나가는 모든 객체에 대해서 설정된 해당 이벤트 헨들러가 호출 된다.
버블링을 막아주는 소스
event.cancelBubble = true;
srcElement 프로퍼티
- 이벤트가 발생한 객체에 대한 레퍼런스로서 어떤 객체에서 이벤트가 발생한 것인지 가르킨다.
presentation / business
- '어떻게 분리시킬 것인가?' 제일 관건..
따로따로 동작을 해야만 유지보수성이 높아진다.
분리를 시켜야함.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>이벤트 버블 예제</title>
<script type="text/javascript">
function docClick() {
var str;
color = Math.random()*255*255*255;
document.body.bgColor = color;
}
function allowBubble(obj) {
obj.style.backgroundColor = "orange";
if(obj == nDiv)
event.cancelBubble = true;
}
</script>
</head>
<body ondblclick = "docClick()">
<h3>이벤트 버블을 중단시키는 예</h3>
바탕을 더블클릭하면 바탕색이 임의적으로 변합니다.
<hr>
<div id="eDiv" class="eDiv" ondblclick="allowBubble(this)">
이벤트 버블이 일어나는 단락
</div><br><br>
<div id="nDiv" class="nDiv" ondblclick="allowBubble(this)">
이벤트 버블을 막아주는 단락
</div>
</body>
</html>'Study > JavaScript' 카테고리의 다른 글
| [javaScript] Document (0) | 2019.05.16 |
|---|---|
| [javaScript] Form (0) | 2019.05.16 |
| [javaScript] 정규표현식, 이벤트, 이벤트핸들러, 이벤트 버블 실습 (0) | 2019.05.16 |
| [javaScript] 기초 실습 (0) | 2019.05.16 |
| [javaScript] 기초 (0) | 2019.05.16 |
