1. String 내장 객체
[예제 코드]
let url = "http://www.naver.com";
document.write("<p>문자열 : " + url + "</p>");
let len = url.length;
document.write("<p>문자열의 길이 : " + len + "</p>");
let position = url.indexOf("/");
document.write("<p>'/' 가 처음 나타나는 위치 : " + position + "</p>");
let up = url.toUpperCase();
document.write("<p>모든 글자 대문자 : " + up + "</p>");
let down = url.toLowerCase();
document.write("<p>모든 글자 소문자 : " + down + "</p>");
[출력 결과]
2. HTML 안에서 JS 사용
2-1. Inline방식
태그에 직접 자바스크립트를 기술하는 방식.
장점은 태그에 연관된 스크립트가 분명하게 드러난다는 점이다.
하지만 정보(HTML)와 제어(Javascript)가 섞여있기 때문에 정보로서의 가치가 떨어진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#selected{
color: red;
}
.dark{
background-color: black;
color: white;
}
.dark #selected{
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="selected">JavaScript</li>
</ul>
<input type="button"
onclick="document.body.className='dark'"
value = "dark">
</body>
</html>▶ onclick은 자바스크립트에서의 이벤트 요소
▶ document.body.className='dark'는 자바스크립트
[출력 결과 - 클릭 전]
[출력 결과 - 클릭 후]
2-2. <script> 태그 이용
<script> 태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식. 장점은 html 코드와 js 코드를 분리할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- <scirpt> 태그 이용 -->
<!-- document의 id가 hw인 곳에서 click 이벤트 발생 시 function() 실행 -->
<input type="button" id="hw" value="Hello">
<script>
let hw = document.getElementById('hw');
hw.addEventListener('click',function(){
alert("Hello world");
});
</script>
<!-- Inline 방식 -->
<input type="button" onclick="alert('Hello world');" value="Hello">
</body>
</html>
2-3. JS 파일 분리
이클립스에서는 'Untitled Text File'로 만든다.
JS파일 안에는 순수한 자바스크립트만 들어간다.
HTML 파일에서는 <script> 태그 안 src에 JS파일 주소만 연결해준다.
2-4. 로드 순서에 따른 오류
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
let hw = document.getElementById('hw');
hw.addEventListener('click',function(){
alert("Hello world");
});
</script>
<input type="button" id="hw" value="Hello">
</body>
</html>
위 코드와 같이 실행 시, Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 라고 에러가 출력된다.
위에서 아래 방향으로 진행되는 코드 특성 상, script 태그 안에서 'hw' id를 가져오려고 해도 맨 아래에 있어 아직 가져올 수 없기 때문에 에러가 난다.
이 경우 window.onload = function(){}으로 해결 가능하다.
2-5. window.onload = function(){}
웹 브라우저의 모든 구성요소에 대한 로그가 끝났을 때 브라우저에 의해서 호출되는 함수(이벤트)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
window.onload = function(){
let hw = document.getElementById('hw');
hw.addEventListener('click',function(){
alert("Hello world");
});
}
</script>
<input type="button" id="hw" value="Hello">
</body>
</html>
2-4의 코드를 그대로 가져와 window.onload = function(){} 안에 넣어주었다. 이렇게 되면 <input> 태그 요소가 브라우저에 로그된 후에 실행되므로 문제없이 작동한다.
JS 파일로 따로 빼어도 정상작동한다.
'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글
| 220513~16 Javascript 10 (0) | 2022.06.23 |
|---|---|
| 220513 Javascript 9 (0) | 2022.06.23 |
| 220512 Javascript 7 (0) | 2022.06.22 |
| 220511 Javascript 6 (0) | 2022.06.22 |
| 220511 Javascript 문제 (0) | 2022.06.21 |