Web/JavaScript
[days02] js 위치와 기본 특징
다연
2020. 12. 10. 14:02
반응형
1. js 위치
<script> </script> 는 어디에 위치해도 상관은 없으나 굳이 <html> 밖에 주진않는다.
헤더또는 바디 안에 주는 경우가 많다.
<script>
document.write("A<br>"); //여기
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document.write("B<br>"); //여기
</script>
</head>
<body>
<script>
document.write("C<br>"); //여기
</script>
홍길동<br>
<script>
document.write("D<br>"); //여기
</script>
</body>
</html>
<script>
document.write("E<br>"); //여기
</script>
script를 css처럼 외부로 뺄 수도 있다.
* 외부 스크립트 장점
1. html 코딩과 분리할 수 있다. -> 읽기 쉽고 유지보수 용이
2. 캐시된 js파일은 페이지로드 속도(성능) 향상을 높일 수 있다.
ex01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="myScript.js"></script>
<script src="myScript2.js"></script>
</head>
<body>
<!-- 외부 스크립트 파일 생성(myScript.js) -> 참조 -->
<button onclick="myfunction()">확인 버튼</button>
</body>
</html>myScript.js
function myfunction(){
alert("mtScript.js 호출됨");
}
//주의 : 여기서는 <script> </script> 태그 사용하지 않는다
2. js 기본 특징
JS에서는 두가지 유형의 값을 정의한다.
ㄱ. 고정값(리터럴)
숫자: 실수, 정수
3.14
100
문자/문자열: "bae" 'bae'
'b' "B"
ㄴ. 변수 값
//int i =10;
var 변수명 [= 초기값];
Cannot set property 'innerText' of null
해당 오류의 의미
자동차를 안샀는데 세차하는 격, 아직 로딩 안돼서 가져올 수 없는 것
방법1) <body onload="init()"> 추가
방법2) <script>를 </body> 바로 위로 옮기기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var name="admin";
console.log(name);
var name; //똑같은 이름으로 변수 재선언
console.log(name); //admin 출력
//js에서 변수를 재선언해도 값은 손실되지 않더라
var x=10;
var y =20;
var z= x+y;
document.write(z);
var n;
//alert(n); //undefined 출력
alert("hong"+" "+"gill dong"); //js에서도 사용 가능
</script>
</body>
</html>
- js는 대소문자를 구분한다.
- js에서 식별자(변수) 선언시 카멜케이스 방식으로 이름을 명명한다.(권장)
카멜케이스 : firstName => 시작은 소문자, 끊어질때마다 대문자 (낙타 등처럼)
파스칼 케이스 : FirstName
기타 first_name
- js는 유니코드 문자 집합을 사용한다.
반응형