외부 스크립트 파일 연결해서 작성하기
JAVA script는 html의 body 속 <script>에 쓸수있다.
but .. 복잡한 html속에서 스크립트찾기? 쉽지않다
그래서 외부 스크립트 파일로 연결해서 작성할 수 있음 !!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script>
var heading = document.querySelector('#heading');
heading.onclick = function(){
heading.style.color="red";
}
</script>
</body>
</html>이랬던 코드를 외부 js파일을 활용해서 쪼개보자.
js = JAVA Script 파일
var heading = document.querySelector('#heading');
heading.onclick = function(){
heading.style.color="red";
}<script>안의 내용을 chage-color.js 파일에 따로 생성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<p id="text">위 텍스트를 클릭해보세요</p>
<script src="change-color.js"></script>
</body>
</html><script src ="파일이름"> </script>
해주면 js파일을 불러와서 간단하게 코드를 실행할 수 있다.
동일하게 실행되는 모습을 확인함 !
알림창 만들기
<script>
alert('빅데이터 공부하기');
</script>
alert("메세지") 를 작성하면, 작성한 메세지로 알림창이 뜬다.
확인창 출력하기
<script>
var reply = confirm("정말 누르시겠습니까?");
</script>
confirm("메세지") : 작성한 메세지를 포함한 확인창이 뜨게할 수 있다.
프롬포트 창 입력받기
<script>
var name = prompt("이름을 입력하세요","여기에");
</script>
프롬포트 창 : 텍스트를 작성할 수 있는 창
prompt("메세지", "기본값") : 프롬포트 창 만들기 / 기본값을 입력하지 않으면 빈칸으로 나옴.
document.write() : 작성한 내용 출력하기
<script>
document.write("<h1>빅데이터 공부하기</h1>")
</script>
document.write("메세지") : 원하는 문구를 웹에 출력할 수 있다.
배운것 활용하기
<script>
var name = prompt("환영합니다");
document.write("<b><big>" + name + "</big></b>님 환영합니다.");
</script>
배운 것을 활용하여 사용자가 입력한 값을 띄워주는 페이지를 생성할 수 있다 !
<b> : 글씨를 굵게
<big> : 글씨를 크게
※ 자바스크립트는 한 줄이 끝나면 ; 필수
- 사용한 교재 -
http://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791163032212
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 교보문고
한 권으로 끝내는 웹 기본 교과서 | 최신 웹 표준 기술인HTML5, CSS3, 자바스크립트(ES6)로웹 기본기를 단단하게 쌓자!--------------------------웹 개발 분야는 하루가 다르게 변하지만 웹 표준 기술인 HTML,
www.kyobobook.co.kr
'JAVA script' 카테고리의 다른 글
| [JavaScript] 원시형 데이터 - boolean / null / undefined (0) | 2023.05.06 |
|---|---|
| [JavaScript] 변수 선언 / scope (0) | 2023.04.30 |
| JavaScript 시작하기 (0) | 2023.04.18 |
| JAVA Script 조건문 ( if문 / switch문 ) (1) | 2022.09.25 |
| JAVA Script 기본 문법 ( 변수 선언 / 자료형 / 연산자 ) (1) | 2022.09.25 |