| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 루카쿠
- 레스터
- CSS
- 네이마르
- 프로젝트
- 이클립스
- UI/UX
- HTML
- jsp
- 간편정리
- 마동석
- Eclipse
- 베식타스
- 파탄잘리
- 맨유
- 마티치
- HTML 제어
- jQuery
- 치차리토
- HTML/CSS
- 첼시
- UX/UI
- 맨시티
- 유벤투스
- 아스널
- 바르셀로나
- JavaScript
- 라카제르
- 오피셜
- export
- Today
- Total
Be a groovy man by positive thinking
UI/UX_008 본문
간단정리
1. 식별자
- 자바스크립트에서 이름을 붙일 떄 사용하는 단어
1) 규칙
- 키워드를 사용하면 안된다.
- 숫자로 시작하면 안된다.
- 특수문자는 _와 $만 허용한다.
- 공백문자를 포함할 수 없다.
2) 관례
- 생성자 함수의 이름은 항상 대문자로 시작한다.
- 변수와 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
- 여러 단어로 이루어진 식별자는 각 단어의 첫 글자를 대문자로 한다.
3) 종류
- 식별자 뒤에 괄호X
단독으로 사용하면 변수
다른 식별자와 사용하면 속성
- 식별자 뒤에 괄호O
단독으로 사용하면 함수
다른 식별자와 사용하면 메서드
2. 주석
1) HTML 태그주석
- <!-- 주석문 -->
2) javaScript 주석
- 단행 주석 : // 주석문
- 다행 주석 : /* 주석문 주석문 */
3. 논리연산자
1) ! : 논리 부정연산자 (단순히 참을 거짓으로 거짓을 참으로 바꾼다.)
2) && : 논리곱연산자(좌변과 우변이 모두 참일때만 참)
3) || : 논리합 연산자(좌변과 우변이 모두 거짓일 때만 거짓)
4. 변수선언
1) var 식별자
2)
<script>
var pi; //변수 선언
a=3.14; //변수에 값을 할당
</script>
5. 복합대입연산자
1) += : 기존 변수의 값에 값을 더합니다.
2) =+ : 기존 변수의 값에 값을 뺍니다.
3) *= : 기존 변수의 값에 값을 곱합니다.
4) /= : 기존 변수의 값에 값을 나눕니다.
6. 증감연산자
1) 변수++ : 기존 변수의 값에 1을 더합니다.(후위)
2) ++변수 : 기존 변수의 값에 1을 더합니다.(전위)
3) 변수-- : 기존 변수의 값에 1을 뺍니다.(후위)
4) --변수 : 기존 변수의 값에 1을 뺍니다.(전위)
7. 자료형 구하기
1) typeof()
<script>
var a=300
alert(typeof(a));
</script>
8. 불자료형 변환
1) 0 //숫자 0
2) NAN //숫자가 아닐때
ex.
<script>
var a = parseInt("오1");
document.write(a);
</script>
3) '' //공백
4) null //null 값
5) undefined
자바스크립트 API
https://msdn.microsoft.com/ko-kr/library/d1et7k7c(v=vs.94).aspx
예문
Ex_01 here을 완성하여 a,b,c,d,e의 자료형을 뽑아내시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
var a = 100;
var b = "abc";
var c = function() {
return 200;
}
var d = new Date();
var e = false;
//here
</script>
</body>
</html>
Sol_01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a = 100;
var b = "abc";
var c = function() {
return 200;
}
var d = new Date();
var e = false;
document.write(typeof (a)+"<br>");
document.write(typeof (b)+"<br>");
document.write(typeof (c)+"<br>");
document.write(typeof (d)+"<br>");
document.write(typeof (e)+"<br>");
</script>
</body>
</html>
Ex_02 here을 완성하여
뚱이
bb
100을 출력하시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
function Dog(str) {
this.name = str;
}
var dog = new Dog("뚱이");
var obj = {
"aa" : "bb",
"cc" : 100
};
//here
</script>
<body>
</body>
</html>
Sol_02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
function Dog(str) {
this.name = str;
}
var dog = new Dog("뚱이");
var obj = {
"aa" : "bb",
"cc" : 100
};
document.write(obj.aa);
document.write("<br>");
document.write(obj["cc"]);
document.write("<br>");
document.write(dog.name);
</script>
</body>
</html>
Ex_03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//here
var buffer = new StringBuffer();
buffer.append("aa");
buffer.append("bb");
buffer.append("cc");
document.write(buffer); // aabbcc
</script>
</body>
</html>
Sol_03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function StringBuffer(){
var array=[];
this.append=function(str){
array.push(str);
}
this.toString=function(){
return array.join("")
}
}
var buffer = new StringBuffer();
buffer.append("aa");
buffer.append("bb");
buffer.append("cc");
document.write(buffer); // aabbcc
</script>
</body>
</html>
Ex_04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function Box(c, w, h) {
this.color = c;
this.width = w;
this.height = h;
//here
}
var box = new Box("red", 100, 200);
document.write(box.getColor()); // red
</script>
</body>
</html>
Sol_04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function Box(c, w, h) {
this.color = c;
this.width = w;
this.height = h;
this.getColor=function(){
return this.color;
}
}
var box = new Box("red", 100, 200);
document.write(box.getColor()); // red
</script>
</body>
</html>
Ex_05 체크후 올릴것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a=[10,20,30];
a.push(40,50);
document.write(a);
document.write("<br>");
a.join("&&");
document.write(a);
</script>
</body>
</html>
Ex_06 here을 완성하여 이름 : 뚱이, 나이 : 5가 나오게 하시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//here
var dog = new Dog("뚱이", 5);
document.write(dog); // 이름:뚱이, 나이:5
</script>
</body>
</html>
Sol_06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function Dog(n,a){
this.name=n;
this.age=a;
this.toString=function(){
return "이름 : "+this.name+", 나이 : "+this.age
}
}
var dog = new Dog("뚱이", 5);
document.write(dog); // 이름:뚱이, 나이:5
</script>
</body>
</html>
Ex_07 어떻게 나올지 예측하고 다음을 출력해보시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function StringBuffer() {
this.str = null;
this.append = function(s) {
this.str = s;
}
this.toString = function() {
return this.str;
}
}
var buffer = new StringBuffer();
buffer.append("aa");
buffer.append("bb");
buffer.append("cc");
document.write(buffer); // cc
</script>
</body>
</html>
Ex_08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function StringBuffer() {
this.array = [];
this.append = f1;
this.toString = f2;
}
function f1(s) {
this.array.push(s);
}
function f2() {
return this.array.join(",");
}
var buffer = new StringBuffer();
buffer.append("aa");
buffer.append("bb");
buffer.append("cc");
document.write(buffer); // aa,bb,cc
</script>
</body>
</html>
Ex_09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function a(b) {
if (//here)
alert(b);
else
alert("인자값이 없다");
}
a(100);
a();
a("aa");
</script>
</body>
</html>
Sol_09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function a(b) {
if (b)
alert(b);
else
alert("인자값이 없다");
}
a(100);
a();
a("aa");
</script>
</body>
</html>
Ex_10 string이 나오게 하시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a = 100;
var b=a+"";
document.write(typeof b);
</script>
</body>
</html>
Sol_10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a = 100;
var b=String(a);
document.write(typeof b);
</script>
</body>
</html>
Ex_11 결과값이 number가 나오게 하시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a = "100";
var b=a;
document.write(typeof b);
</script>
</body>
</html>
Sol_11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a = "100";
var b=Number(a);
document.write(typeof b);
</script>
</body>
</html>
Ex_12 결과값이 boolean이 나오게 하시오
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a = "100";
var b = a;
document.write(typeof b);
</script>
</body>
</html>
Sol_12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a = "100";
var b =Boolean(a);
document.write(typeof b);
</script>
</body>
</html>