[JS] 자바스크립트 기초
자바스크립트
동적바인딩★
자바스크립트는 공간을 만들 때 자료형을 안쓴다! 타입을 선언하지 않는다.
객체지향언어는 반드시 데이터의 공간에 타입을 지정해야한다. int age, String name 등 타입을 지정해주면 즉각 반응하기가 어렵기 때문에 동적바인딩을 해야한다. (공간에 name 변수에 33을 넣었어 그럼 타입이 자동적으로 지정된다.)
프로토타입언어이다
메서드나 함수를 파라미터(매개변수)로 사용할수 있다.
왜 프로토타입을 쓰니? 데이터가 들어오는대로 타입을 확인하겠다.
사용자가 집어넣는 원형 그래로 쓴다.
함수도 매개변수가 가능하다 why? 내가 정적이냐 동적이냐 정할 필요가 없어,
함수 자체가 타입이고 객체다.
함수를 다른 객체와 마찬가지고 변수에 할당할 수 있다.
다른 함수를 호출할 때 함수를 파라미터로 넘길 수도 있고 함수 자체를 반환할 수 있다.
함수가 객체이기 때문에 함수를 일급 객체라고도 한다.
고정배열만으로 사용한다
그래프를 그릴 때 점섬을 그리려면 가변배열로 안되기 때문에 가변배열이 존재하지 않는다.
접근제한자는 존재하지 않는다★
자바에서의 접근제한자는 은닉화가 목적이다. = 모듈화가 가능하다. 하지만 자바스크립트에서 접근제한자가 존재하지 않기 때문에 객체의 속성이나 메소드에 대해 직접 접근할 수 있다.
자바스크립트는 클로즈
= 폐쇄라는 의미가 나오는데 클로즈를 사용하는 내용은 ★callback함수이다. 콜백함수는 함수의 매개변수를 함수로 쓰겠다. why가능? 그건 뭐할 때 보갰대?? 이건 동적바인딩에서 시작한다.
자바스크립트 문제★
접근제한자가 존재하지 않기 때문에 전역이냐 지역이냐의 구분이 안된다.
만약 내가 전역, 지역으로 쓰고 싶지만 의미가 없다.
근데 버전이 올라가면서 구분할수있는데 전역var 지역?// 그렇지만 이건 대중적이지 않기 때문에
자바스크립트의 단점이다.
실습1
canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수의 초기화</title>
</head>
<body>
<!-- 캔버스를 설정하며 HTML의 DOM트리가 생성되고 나서 <canvas> 태그를 검색하여 접근하므로 먼저 선언해야한다. -->
<!-- 영역설정해주고 스크립트를 쓴다 영역안에서 // 이건 유효성 검사용으로 사용하는거래 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var drawing = canvas.getContext("2d");
drawing.font = "30px Arial";
drawing.fillText("JavaScript", 10, 50);
</script>
</body>
</html>
자바스크립트 데이터 타입
원시 타입
number
정수와 실수를 모두 포함한다 자바와 비교하면 int형이 없다. 5를 입력하면 5.0인 것이다.
string
‘(싱클쿼터)’와 “(더블쿼터)”를 사용하여 문자열을 표현한다.
‘(싱클쿼터)’ 내부적으로 사용
“(더블쿼터)” 출력
‘ “ ” ’ : 인식코드에서 출력코드로
“ ‘ ’ ” : 출력한 다음에 인식코드로 보여진다.
boolean
참또는 거짓의 논리값으로 참을 표현하는 소문자인 true와 거짓을 표현하는 false로 값을 설정한다.
“”(빈 문자열), 0, null, undefined의 객체 초기값은 false가 된다.
undefined
변수가 선언만 되고 아무런 값도 할당되지 않은 상태를 의미한다.
null
값이 없는 것이 값임을 의미한다.
가비지를 알려주게 하기 위해서
참조 타입
기본형이 아닌 함수, 배열 등의 모든 타입이다.
실습(타입)
산술연산
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>산술 연산</title>
</head>
<body>
<script type="text/javascript">
a = 5;
b = 2;
sum = a + b;
sub = a - b;
mul = a * b;
div = a / b;
mod = a % b;
document.write("a+b= " + sum + "<br>");
document.write("a-b= " + sub + "<br>");
document.write("a*b= " + mul + "<br>");
document.write("a/b= " + div + "<br>");
document.write("a%b= " + mod);
</script>
</body>
</html>
비교연산
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비교 연산</title>
</head>
<body>
<script type="text/javascript">
a = 10;
b = 5;
document.write("두 수의 a==b비교 연산은 " + (a == b) + "이다. <br>");
document.write("두 수의 a>b비교 연산은 " + (a == b) + "이다. <br>");
document.write("두 수의 a>=b비교 연산은 " + (a == b) + "이다. <br>");
document.write("두 수의 a<b비교 연산은 " + (a == b) + "이다. <br>");
document.write("두 수의 a<=b비교 연산은 " + (a == b) + "이다. <br>");
document.write("두 수의 a!=b비교 연산은 " + (a == b) + "이다. <br>");
</script>
</body>
</html>
타입일치확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타입 일치 확인</title>
</head>
<body>
<script type="text/javascript">
a = 1;
b = "1";
c = "안녕";
d = "안";
e = "안녕";
f = "안녕";
//정수를 할당하여 정수형 변수를 선언한다.
g = 1;
// 타입의 형태과 관계없이 다른 결과를 얻을 수 있으므로 더블 이퀄 연사자로 비교하는 것을 추천하지 않는다.
document.write("서로다른 타입이지만 " + (a == b) + "이다 <br>");
// 쓰리 이퀄 연산자로 비교한다.
// int age === 9 (같은지를 확인한다음에 할당하겠다.) 같지 않으면 오류가나는 거지 재귀기법, 디스!! (자바스크립트에서 사용한다.)
// 결론은 자바람다식에서는 = 할당 == 값비교 의미안데 // 자바스크립트에서는 ===도 있다 라는 의미로 언급한거라 헷갈리지 않으면 좋겠더
// 찾아보니까 ==는 동등 // ===은 정확하게 같아야함 1과 "1"은 타입이 같지만 == 로 비교하면 true ===로 비교하면 false가 되게 되는거임.
document.write("서로다른 타입이므로 " + (a === b) + "이다 <br>");
document.write("서로 같은 타입이고 값이 다르므로 " + (c !== d) + "이다 <br>");
document.write("서로 같은 타입이고 값이 같으므로 " + (e === f) + "이다 <br>");
document.write("서로 같은 타입이고 값이 같으므로 " + (a === g) + "이다 <br>");
document.write("a : " + a + "<br>");
document.write("b : " + b + "<br>");
document.write("c : " + c+ "<br>" );
document.write("d : " + d + "<br>");
document.write("e : " + e + "<br>");
document.write("f : " + f + "<br>");
</script>
</body>
</html>
학점확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>학점 확인</title>
</head>
<body>
<script type="text/javascript">
num = prompt(" 100 이하의 숫자를 입력하세요", "")
if ((num >= 90) && (num <= 100)) {
document.write("A학점 입니다.");
} else if ((num >= 80) && (num < 90)) {
document.write("B학점 입니다.");
} else if ((num >= 70) && (num < 80)) {
document.write("C학점 입니다.");
} else if (num < 70) {
document.write("F학점 입니다.");
} else {
document.write("잘못된 입력값입니다.");
}
</script>
</body>
</html>
구구단입력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>구구단 입력</title>
</head>
<body>
<script type="text/javascript">
dan = prompt("확인하고 싶은 구구단의 단을 입력하세요.")
if (dan >= 2 && dan <= 9) {
num = 1;
result = 0;
while (num <= 9) {
result = dan * num;
document.write(dan + " * " + num + " = " + result + "<br>")
num += 1;
}
} else {
document.write("총점이 부족하므로 불합격입니다.")
}
</script>
</body>
</html>
null할당
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>null 할당</title>
</head>
<body>
<script type="text/javascript">
// null 값을 할당하여 null 타입 변수를 선언한다.
a = null;
console.log(a);
// typeof 연산자로 null 타입의 형태를 확인하고 출력한다.
console.log(typeof a);
</script>
웹 브라우저의 콘솔로 확인한다.
</body>
</html>
문자열할당
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열 할당</title>
<script type="text/javascript">
name = "홍길동";
id = '의적';
console.log(name);
console.log(id);
</script>
</head>
<body>웹브라우저의 콘솔로 확인한다.
</body>
</html>
nundefined타입
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수의 초기화</title>
</head>
<body>
<script type="text/javascript">
// 값을 할당하지 않은 변수인 초기화 변수를 선언한다.
var na;
// 변수에 할당된 값을 출력하면 아무런 값이 업으므로 nundefined타입을 호출한다.
console.log(na);
</script>
웹브라우저의 콘솔로 확인한다.
</body>
</html>
댓글남기기