Javascript 사용방법
<body>
<script>
</script>
</body>
실습문제
<!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 id="txt">
<a href="#">Front-end Developer</a><br />
<button id="btn">"DESIGN"</button>
<button>"DEFAULT"</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
<h1>Javascript</h1>
<br />
<p>
Javascript는 웹페이지를 동적인 페이지로 만들기 위해 고안된 언어입니다.
</p>
<p>차근차근 Javascript에 대해서 배워보도록 합시다.</p>
<script>
//자바스크립트 코드를 적는 공간
document.getElementById("btn").addEventListener("click", function () {
//클릭했을때 실행되는 로직을 작성하는 공간
document.getElementById("txt").style.backgroundColor = "yellow";
document.getElementById("txt").style.color = "blue";
});
</script>
</body>
</html>
<body id="txt"> body에 id ="txt"
<button id ="btn">
<script> ------> (자바스크립트 코드를 적는 공간)
document.getElementById("btn").addEventListener("click", function () {
document.getElementById("txt").style.backgroundColor = "yellow";
document.getElementById("txt").style.color = "blue";
});
</script>
getElementById("btn")------> "btn" id의 요소를 가져온다.
<!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>
<script>
// 1 . 문서에 직접 출력하는 방법 document.write()
document.write("입력할 문장을 작성");
// 2 . 콘솔창에 출력하는 방법 console.log()
// 데이터 통신할때 데이터가 잘 전달되는지 확인할때 가장 많이 사용
// F12(개발자도구) 콘솔창에서 확인
console.log("콘솔창에 출력되는 데이터");
// 3 . 알림 팝업창을 통해서 출력하는 방법 alert()
alert("팝업창을 통해서 출력하는 데이터");
</script>
</body>
</html>
- document.write("입력할 문장을 작성");
- console 창 -----> f12 개발자도구에서 볼 수 있다
- alert("팝업창을 통해서 출력하는 데이터")
- prompt("출력내용","입력내용") ----------> 리턴타입 String
- confirm("출력문 작성")------------>리턴타입 boolean / True 아님 False
Javascript 변수 개념
실습문제
<!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>
<script>
//1. 사용자에게 입력창을 제공해주는 prompt()
// 리턴타입 : String
var name = prompt("이름을 입력하세요!", "입력내용");
console.log(name);
console.log(123);
//2. 사용자에게 확인, 취소 제공해주는 confirm()
// 리턴타입 : boolean
var remove = confirm("삭제 하시겠습니까?");
console.log(remove);
</script>
</body>
</html>
var name = prompt("이름을 입력하세요!", "입력내용");
console.log(name);
console.log(123);
var remove = confirm("삭제 하시겠습니까?");
console.log(remove);
confirm은 리턴타입이 불리언이기 때문에
확인을 누르면 console창에 true
취소를 누르면 console창에 false가 뜬다
let랑 const 정말 헷갈려함!!!!
실습문제
'JavaScript' 카테고리의 다른 글
jQuery 구조/ 기본개념 / $개념 (0) | 2022.01.19 |
---|---|
Javascript 형변환/배열/parseInt/parseFloat/Array.push (0) | 2022.01.11 |