728x90
반응형
SMALL
자바스크립트 vscode live server 실행 후 오류 확인 방법
1. f12번 해서 console창 들어가 확인하기
2. f12에서 source창 들어가서 파일 선택 후 오류 확인하기
자바스크립트 작성 기초 간단한 예제
(버튼을 클릭하면 문서 배경 변경 실습)
- 디자인 바꾸기 버튼 클릭시 -> 검정배경, 흰글씨
- 되돌리기 버튼 클릭시 -> 흰배경, 검정글씨
<!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>
<a href="#">자바스크립트 무작정 따라하기!!!!!!!!!!!!</a>
<br><br>
<button id="btn1">디자인바꾸기 짠!</button>  <button id="btn2">되돌리기 짠!</button>
<br>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<h1>오늘은 12/08일</h1>
<p>즐거운 JavaScript 수업입니닷!</p>
<!-- html 내에 자바스크립트를 작성할 수 있는 영역 -->
<script>
document.querySelector("#btn1").addEventListener("click",function(){
document.querySelector("body").style.backgroundColor = "black";
document.querySelector("body").style.color="white";
})
document.querySelector("#btn2").addEventListener("click",function(){
document.querySelector("body").style.backgroundColor = "white";
document.querySelector("body").style.color="black";
})
</script>
</body>
</html>
javaScript 입력과 출력(script태그 내에 사용)
- html문서 내에 출력
- document.write()
- console창에 출력
- console.log() - 출력
- console.info() - 정보출력
- console.warn() - 경고출력
- console.error() - 오류출력
- 알림 팝업창으로 출력
- alert()
<최종코드>
<!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>
//html 문서에 출력(화면상에 출력)
document.write("HTML 문서 내에 출력");
//console창에 출력(개발중)
console.log("콘솔창에 출력");
console.info("콘솔창에 정보출력");
console.warn("콘솔창에 경고출력");
console.error("콘솔창에 오류출력");
//팝업알림창에 출력
alert("알림창에 출력");
</script>
</body>
</html>
- 입력창을 통한 입력문
- (리턴타입 : String)
- prompt("출력내용", "입력내용(=기본값)")
콘솔창에 결과값 나오게 하기
- 확인 및 취소를 통한 입력문
- (리턴타입 : boolean)
- confirm("출력문작성")
콘솔창에 결과값 나오게 하기
true/false로 값 나옴
<최종코드>
<!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>
//prompt : 입력창을 통해 키보드로 입력받을 수 있음
//prompt("질문내용") / prompt("질문내용","기본값")
//String 타입으로 반환
//변수를 선언할 땐 variable, 즉 var 선언
var a = prompt("질문내용","기본값");
console.log(a);
//confirm : 확인/취소를 입력받을 수 있음
var b = confirm("질문내용");
console.log(b);
</script>
</body>
</html>
728x90
반응형
LIST
'스마트인재개발원 > 자바스크립트' 카테고리의 다른 글
| [JS] 자바스크립트 조건문/ 조건문 활용한 예제/ 입력창 입력값에 따른 배경색 지정/ 점수 입력 후 평균과 학점 계산 (0) | 2022.10.07 |
|---|---|
| [JS]자바스크립트 연산자 종류/예제/형변환 종류/사용방법 (0) | 2022.10.07 |
| [JS] 입력창에 입력된 값 콘솔창에 띄우기 / 자바스크립트 자료형 종류 및 특징/ undefined,null,NaN 차이점 (0) | 2022.10.06 |
| [JS]자바 스크립트,자바 변수 사용 차이점/ 변수 네이밍 법칙/var,let,const 차이/정의 (0) | 2022.10.06 |
| [JS]자바스크립트 의미 /언어구별종류/특징/라이브러리와 프레임워크 차이 / 바닐라 자바스크립트란? (0) | 2022.10.06 |
