JS는 사용자와의 동적인 상호작용을 위해 만들어짐. ( JS는 HTML 위에서 동작한다.)
HTML을 사용해 웹페이지를 만들고, JS를 이용해 사용자와 상호작용을 한다.
script 태그
: HTML의 <script> 태그를 사용해 JS를 동작하게 할 수 있다.
<h1>Javascript</h1>
<script>
document.write('hello world');
</script>
<h1>HTML</h1>
hellow world
JS와 HTML의 차이
<h1>Javascript</h1>
<script>
document.write(1 + 1);
</script>
<h1>HTML</h1>
1 + 1
JS는 동적으로 작동한다.
HTML 이벤트(event)
: 웹 브라우저에서 일어나는 사건을 이벤트라 한다. 상용자와 상호작용하는 웹 사이트를 제작 가능하게 해준다.
JavaScript Events (w3schools.com)
JavaScript Events
JavaScript Events HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. HTML Events An HTML event can be something the browser does, or something a user does. Here are some exa
www.w3schools.com
버튼이 눌렸을때 경고창 생성. (onclick)
<input type="button" value="button" onclick="alert('hi')">
입력된 내용이 바뀔경우 경고창 생성. (onchange)
<input type=text onchange="alert('hi')">
키보드를 누르는 이벤트. (onkeydown)
<input type="text" placeholder="onkeydown" onkeydown="alert('hi')">
마우스를 버튼위에 올리면 경고창 생성. (onmouseover)
<input type="button" value="button" onmouseover="alert('hi')">
콘솔(Console)
: 콘솔을 이용하면 파일을 만들지 않고 바로 Javascript 코드를 실행할 수 있다.
즉, 콘솔을 이용하면 웹 사이트에서 간단한 문제를 간편하게 Javascript를 사용해 해결할 수 있다.
어떤 문자열의 길이를 알고 싶을때 콘솔 창에 입력하면 현재 페이지에서 바로 경고창 출력한다.
alert('hello, world!'.lenght)
Javascript의 데이터 타입 (숫자 / 문자)
자바스크립트의 자료형 - JavaScript | MDN (mozilla.org)
자바스크립트의 자료형 - JavaScript | MDN
모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알
developer.mozilla.org
숫자(Number)
문자열(String)
String - JavaScript | MDN (mozilla.org)
String - JavaScript | MDN
String 전역 객체는 문자열(문자의 나열)의 생성자입니다.
developer.mozilla.org
변수
변수의 필요성
: 변수를 이용하면 여러군데 흩어져 있는 값들을 한번에 바꿀 수 있다.
변수를 사용할때, 변수 이름 앞에 var를 붙인다.
var word = "hello"
웹 브라우저 제어
querySelector
: 선택자를 이용해서 원하는 태그를 선택할 수 있다.
document.querySelector("body") /* body 라는 이름을 가진 태그를 모두 선택. */
document.querySelector(".js") /* js 라는 class를 가진 태그를 선택. */
document.querySelector("#first") /* first 라는 id를 가진 태그를 선택. */
선택한 태그에 스타일 적용.
document.querySelector("body").style.backgroundColor= "black";
<body>
<h1>웹 브라우저 제어</h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor= 'black';
document.querySelector('body').style.color= 'white';">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor= 'white';
document.querySelector('body').style.color= 'black';">
<p>abcdefg</p>
ABCDEFG
</body>
<버튼이 동작하면 <body>태그에 style이 추가된다.>
'정리' 카테고리의 다른 글
| [자바스크립트의 시작] (3) Javascript 제어문 리팩토링(중복제거) (0) | 2021.08.23 |
|---|---|
| [자바스크립트의 시작] (2) Javascript 제어문 (비교연산, 조건문) (0) | 2021.08.22 |
| [비전공자를 위한 HTML/CSS] 뷰포트 (0) | 2021.08.20 |
| [비전공자를 위한 HTML/CSS] (40) 미디어 쿼리 실습 (0) | 2021.08.20 |
| [비전공자를 위한 HTML/CSS] (39) 미디어 쿼리 Syntax (0) | 2021.08.20 |
