다연이네

[days02] js 위치와 기본 특징 본문

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는 유니코드 문자 집합을 사용한다.

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days02] js 자료형(data type)  (0) 2020.12.10
[days02] js 연산자  (0) 2020.12.10
[days02] 문제  (0) 2020.12.10
[days01] 버튼으로 전구 켜고끄기  (0) 2020.12.09
[days01] event.srcElement 속성  (0) 2020.12.09
'Web/JavaScript' Related Articles more
Comments