js에서 전역변수 선언.
js에서 const를 선언 안하고 그냥 변수명만 써도 선언 가능. 이 경우는 전역변수로 인식함.
funtion() {
a = 10;
}
alert(a); <정상적 실행.
funtion() {
const a = 10;
}
alert(a); <오류
typeof()
파이썬처럼 typeof()를 사용해주면 해당 변수의 타입을 알려줌.
typeof(90)
typeof 90
데이터 타입
undefined = 변수 생성만 하고 값을 넣지 않은 경우
null = 어떠한 값도 아니다.
NaN = Not a Number. 숫자가 아니다. 보통 결과 값에 숫자가 반환되는데 오류가 발생할 때. (ex 0 / 0)
NaN타입은 애매한 타입이라 Nan == Nan을 해도 false가 나옴. 그래서 NaN끼리 비교를 할려면 isNaN()메서드 사용!
canvas
< canvas> </ canvas> 그림을 그릴 수 있게 해준다.
보통의 사용법
< canvas id = "name" width = "100" height = "100" style="border: 1px solid">
< /canvas>
<script = "text/javacript">
var canb = document.getElementById("name");
var mycanb = canb.getContext("2d"); mycanb.strokeRect(10, 10, 100, 100); => 사각형 선만 그리기
mycanb.fillRect(..);-->사각형 내부 색 채우기.
mycanb.clearRect(..); --> 사각 영역 지우기
< /script>
선 그리기
canvas내에서 mycanb까지 하고 메서드로 beginPath(); moveTo();, lineTo();, closePath(); stroke()등을 이용하여 그리기.
- 속 검은색으로 꽉 찬 세모
mycanb.beginPath(); //패스 그리기 시작
mycanb.moveTo(100,20); //패스 시작점 지정
mycanb.lineTo(40,120); //패스 이동점 지정
mycanb.lineTo(160,120);
mycanb.fill();
- 속이 빈 5각형.
mycanb.moveTo(300,20); //패스 시작점 지정
mycanb.lineTo(200,60); //패스 이동점 지정
mycanb.lineTo(200,120);
mycanb.lineTo(400,120);
mycanb.lineTo(400,60);
mycanb.closePath();
mycanb.stroke(); //패스 연결하기
위치 정보(gps)
html5 표준인 Geolocation API가 제공 됨.
getCurrentPostion()
현재 내 위치. 움직이지 않는 상태의 대상에 유용하게 사용 가능.
기본적인 사용 방법.
< body>
< script type = "text/javascript">
function MyPostion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(CurPostion);
}
}
function CurPostion(position) {
const lat = position.coords.latitude; //콜백함수 호출.
const lng = position.coords.longitude;
document.getElementById("result").innerHTML = "위도 : " + lat + " 경도 : " + lng;
}
< /script>
< button onclick = "MyPostion()" type = "button">나의 현재 위치
< div id = "result">
< /body>
google 맵
google api를 통해서도 위치 정보를 갖고올 수 있다. 자세한 코드는 길어서 vsc안에 참고.15_5.
prompt()
데이터 입력 받기.
a = prompt();
while문 예제 하나
let i = 0;
while(i++ < 5) {
document.write('hi' + i + '< br/>');
}
향상된 for문
const arr = ['a', 'b', 'c'];
for (const b in arr) {
alert(arr[b]);
}
익명함수
함수명을 지정하지 않고 함수를 만듬. 함수를 실행 시킬수도 있음.
자바에도 있는데 자바에서는 딱 1번만 만들어서 한 번 쓸 경우에 사용하는데 js에서도 딱 한 부분에서 한 번 쓸거면 한번만 쓰고 그 뒤론 안 쓰는 익명함수를 사용하기도 함.
=> 함수를 한 번만 쓸 거면 익명함수 사용 할 수 있다.
(function() {
i = 0;
while (i < 10) {
document.write(i);
i += 1;
}
})
();
함수에서 매개변수 없이 값 넣기
function a() {
arguments.length;
arguments[0];
}
a();
a("안녕");
a("안녕", "하세요");
이렇게 넣고 arguments를 사용하면 자동으로 값을 넣어줌.(배열 느낌으로 만드는듯)
JS 메서드 오버로딩
같은 이름 + 매개변수인 함수가 4개 있다고 생각하고 안의 실행문만 다를 때 함수를 실행하면 맨 마지막(맨 밑) 함수만 살아남고 위의 3개는 무시된다.
JS 문자열의 성질(자바의 String과 같은 성질)(스텍 힙 관련)
불변의 성질을 갖는다. 뜻은 문자열이 생성된 후에는 값을 바꿀 수 없다. 바꾸고 싶다면 기존 문자열을 없애고 새 문자열을 해당 문자열에 집어 넣어야 한다.
toString 문자열로 바꾸기
var a = 10;
var b = b.toString();
valueOf() 숫자로 변환
JS에서는 동적으로 프로퍼티를 추가할 때는 참조 값에서만 가능하고 원시 값은 추가가 안됨.
참조 값 :String 클래스, 배열 같은 친구들
원시 값 : int, byte, double등등..
const lee = new Object();
lee.age = 10;
alert(lee.age); => 정상적으로 10 출력.
const lee2 = 10;
lee2.age = 10;
alert(lee2.age); =>오류는 안 뜨나 undefined 뜸.
- 레퍼런스(참조형) 변수 추가 내용. (스택 힙 내용)
const lee = new Object();
const lee2 = lee;
lee.name = "leejungwoo";
alert(lee2.name); -> 제대로 leejungwoo 반환해줌.
lee의 스택이 어느 힙 영역의 주소를 가르킴(예로 들어 0x123). lee2도 같은 힙 영역 주소 값을 스택에 부여해주게됨(0x123). 즉 얇은 복사(얇은 복사가 맞는지는 확인이..) . 그렇기에 lee를 바꾸면 heap영역의 값이 바뀌니 같은 주소를 가르키는 lee2도 바뀌게 되는 것.
출처 : 국비 교육
