Learn/KH정보교육원

[KH정보교육원 당산] 45일차 (JavaScript 시작)

Dahoon06 2021. 5. 12. 23:23
728x90
반응형

자바스크립트 특징

  1. 완벽한 언어가 아니다.(데이터 타입x)
  2. 변수 선언 : var 변수명;
  3. 함수 선언 : function 함수명(){ }

                     function 함수명(매개변수명){  }

  1. 제어문 : if / for / while
  2. HTML 태그 선택 : document.querySelector(#id);
  3. HTML 태그 객체 onclick=function() { } 이러한 형태

자바 스크립트를 사용한 프레임워크 => jQuery / node.js / react.js / vue.js

자바 스크립트 => 함수를 선언

 

자바스크립트 위치

 

 1. <head></head>

 2. <body></body>

 

HTML 내부

<script>자바스크립트 코드</script>

 

파일생성(js)

<script src="자바스크립트 경로/~~.js></script>

 


 

입력창

 

HTML 내부에 글씨, 태그를 출력

var test = prompt("~~을 입력하세요);

document.write("<b>출력내용</b>");
//(jsp out.print와 같은 기능)

테스트 코드)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prompt test</title>
  <script>
      var name = prompt("이름을 입력하세요.");
      document.write("<b>"+ name +"</b>");
  </script>
	
</head>

<body>
    <h1>어서오세요.</h1>
</body>
</html>

 

 

 

경고창

alert("경고창");

 

메시지 출력창

confirm("표시할 내용");

 

 

확인 버튼 눌렀을때 true 반환

확인

취소 버튼 눌었을때 false 반환

취소

테스트 코드)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

/*var width = prompt("사각형의 가로 길이");
var height = prompt("사각형의 세로 길이");
		
var square = width * height;
alert("사각형의 넓이 : " + square);
*/
		
    var bool = confirm("작업 취소 여부");
    alert(bool);
	</script>
</head>
<body>

</body>
</html>

 

 

 

새창 띄우기

window.open(~~~);

 

현재 시간

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<body>
<script>
    var now = new Date();
    var display = now.toLocaleTimeString();
    document.write(display);
</script>
</body>
</html>

 

 


Event

태그 선택

document.querySelector("HTML 태그의 아이디값").value;

document.querySelector("출력할내용이들어갈아이디값").innerHTML="출력할내용";

 

 

 

728x90
반응형