2020.08.13(목) 5주차 4일
오늘 오전 중으로 워크플레이스를 불렀다 실패했다를 반복해서 멘붕이었다.
그래도 오늘의 경험을 통해서 이클립스의 워크플레이스에 대해 조금은 알게 된 것 같다.
그래서 그런지 음 오늘 수업에 집중도 잘 못하고, 노트도 잘 하지 못 하였다.
뭔가 배우긴 했는데.... 이걸 내가 나중에 봐도 알아먹게 옮길 자신이 없다.
따라서 오늘은 간단한 코드들과 오늘 풀었던 예제를 올리고자 한다.
1. 이벤트 종류
web_pro2> Js10.html (나중에 코드 확인할 것)
1)클릭할 때마다 색이 바뀜
#6 화면깜빡이기(1)
var msg = "자바스크립트세상";
var i = 0;
function dispaly(){
document.getElementById("disp").innerText = msg.charAt(i);
i++;
if(msg.length === i) i = 0;
setTimeout("display()", 500);2) 웹표준
*시큐어코딩
2. 오류검사, 정규표현식
web_pro2> Js11.html (나중에 코드 확인할 것)
// ==================정규 표현식=============
//var aa = /[a-z, A-Z]+/gi;
//console.log(frm.email.value.match(aa));
//정규 표현식으로 이메일 검사
var regExp = /[0-9a-zA-Z][_0-9a-zA-Z-]*@[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+){1,2}$/; // ^ab: ab로 시작하는 문자열 //[^0-9] => [대괄호] 안에 ^쓰이면 부정의미.
if ( !frm.email.value.match(regExp) ) {
alert("이메일을 정확히 입력하시오");
frm.email.focus();
return;
}
//정규표현식으로 나이 검사
var regExp2 = /^[0-9]{1,2}$/; // ^[0-9]: [0-9]로 시작하는 문자열 //{1,2}$ => 1글자,2글자로 끝
if ( !frm.age.value.match(regExp2) ) {
alert("나이는 숫자만 입력하시오");
frm.age.focus();
return;
}1) 정규 표현식
나중에 파이썬- 크롤링에서 잘 쓰일 개념
정규표현식으로 원하는 데이터를 걸러낼 수 있다.
백슬래위 만 써도 금방 해결이 된다.
캐럿, 대가로 안에 캐럿은 부정 ?
2) 오류검사
바디에서 <form>으로 묶어서 frm 변수 선언하고 action, method, submit
regExp로 어떻게 하는 거 같은데 ...이건 정규표현식인가?
3. 객체 생성 후 처리
web_pro2> Js12object.html
객체를 선언하는 5가지 방법에 대해 알아보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function(){
// 1. new 연산자를 이용해 객체 선언 (oop형식)
var obj1 = new Object(); //var obj1= {};
obj1.irum = "홍길동";
obj1.nai = 23;
obj1.juso = "강남구 역삼동";
obj1.getJuso = function(){ //매소드같이 씀
return obj1.juso;
};
console.log(typeof(obj1));
console.log(obj1.toString());
console.log(obj1);
var str1 = obj1.irum + "님의 나이는 " + obj1.nai + " 이고 주소는 " + obj1.getJuso();
document.getElementById("disp1").innerHTML = str1;
//var a = 5;
//var b = a;
var obj2 = obj1;
obj2.irum = "고길동";
var str2 = obj2.irum + " " + obj1.irum +"님의 나이는 " + obj2.nai + " 이고 주소는 " + obj2.getJuso();
document.getElementById("disp2").innerHTML = str2;
// obj1의 주소도 obj2가 된다??????????????
//2. literal 사용 : "json 객체" : XML 33 (키벨류 형식)
var myObj = {
irum:"한국인", nai:33, showNai:function(msg){
return this.nai +msg;
}
};
console.log(typeof(myObj));
console.log(myObj.toString());
var str3 = myObj.irum + "의 나이는 " + myObj.nai + " 이고 메세지는 " + myObj.showNai("살");
document.getElementById("disp3").innerHTML = str3;
//3. 중첩 객체
var myFrined = {
name: "신기해",
age:25,
otherFrined:{
name: "박치기",
job: "프로그래머",
},
};
var str4 = myFrined.name +"의 나이는 " + myFrined.age +
", 딴 친구 : " + myFrined.otherFrined.name + " " + myFrined.otherFrined.job;
document.getElementById("disp4").innerHTML = str4;
//4. 생성자 함수 사용
function Person(name){
this.name = name;
this.setName = function(newName){ //매소드를 정의(익명함수)
this.name = newName;
};
}
var pp = new Person("손오공");
document.getElementById("disp5").innerHTML = pp.name;
var pp2 = new Person(); //new person의 값이 없음
document.getElementById("disp6").innerHTML = pp2.name;
pp2.setName("사오정");
document.getElementById("disp7").innerHTML = pp2.name;
Person.prototype.getName = function(){
return this.name;
}
Person.prototype.jik = "대리";
var pro1 = new Person("저팔계");
document.getElementById("disp8").innerHTML = pro1.name + " " +
pro1.getName() + " " +pro1.jik;
}
</script>
</head>
<body>
** 객체 생성 후 처리**
<br>
<div id ="disp1"> </div>
<div id ="disp2"> </div>
<div id ="disp3"> </div>
<div id ="disp4"> </div>
<div id ="disp5"> </div>
<div id ="disp6"> </div>
<div id ="disp7"> </div>
<div id ="disp8"> </div>
</body>
</html>4. DOM, XML, JSON
web_pro2> Js13Dom.html
카페 : AJAX 10, DOM 관련 필수
똑같은 데이터를
xml, JSON으로 넘김 (XML - > DOM)
요새는 제이슨으로 넘어가는 추세. 하지만 현장에선 Xml을 여전히 많이 쓴다.
function abc(){
var my = document.getElementById("my");
console.log(my.nodeName + " " + my.childNodes[0].nodeValue);
//#1 해당 엘리먼트를 먼저 찍고
//#2 h2의 childNodes의 0번째의 nodeValue는 "DOM 객체 연습"(first child)
console.log(my.firstChild.nodeValue);
console.log(my.getAttribute("comments")); HTML root
head tag body tag(parent))
div(first child) span(next-previous sibling) a(last child)
※ 오늘 배우고 느낀 것
1. 이클립스의 import, export에 대해서 제대로 알게 되었다. 근데 Workplace 바꿀때마다 글씨크기 등 설정이 바뀌는 건 왜 이러냐......
2. 정규표현식...ㄹㅇ 하나도 모르겠다....
3. DOM, AJAX 잘 모르겠다!! 오늘 그냥 다 모르겠다!!!
4. 계산기를 웹으로 구현해보는 걸 했는데, 바디프레임은 잘짰는데, 안에서 하는게 연산작용을 하는게 잘 안 된다.
'[2020]KIC 캠퍼스 복습 > JAVA SCRIPT(5,6,7)' 카테고리의 다른 글
| [수업 D-26 ] JS) AJAX, JSON //JQUERY (0) | 2020.08.18 |
|---|---|
| [코드리뷰] JS) AJAX를 구성, "팩토리파일" (0) | 2020.08.18 |
| [수업 D-25 ] JS)DOM, AJAX (0) | 2020.08.18 |
| [코드리뷰] JS) 웹으로 계산기 만들기 (0) | 2020.08.13 |
| [수업 D-23] JS) 배경 및 작성 기초 (0) | 2020.08.12 |
