2022-01-13
HTML과 JavaScript의 만남 1 (script 태그) / HTML과 JavaScript의 만남 2 (이벤트) / HTML과 JavaScript의 만남 3 (콘솔) / 데이터타입 - 문자열과 숫자
JavaScript
JavaScript는 사용자와 상호작용하며, HTML을 제어할 수 있는 언어이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 웹문서는 script 안쪽의 문구를 JavaScript로 인식한다 -->
<h1>JavaScript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
</body>
</html>
JavaScript의 text 출력 코드는 ↓
<script>
document.write(text);
</script>
HTML의 onclick의 속성의 속성 값으로는 반드시 JavaScript가 오고,
웹브라우저는 이것을 기억하고 있다가 onclick 속성이 위치하고 있는 태그를 실행했을 때 동작되도록 한다.
<input type="button" value="hi" onclick="alert('hi')">
이처럼 웹브라우저 위에서 일어나는 일들을 이벤트Event 라고 한다.
구글 개발자 도구 > 검사 > Console 창을 열면 JavaScript 코드를 즉석에서 실행 가능하다.
문자열의 개수를 알려주는 코드 length 이며, alert('~'.length)로 경고창을 이용하여 '' 안 문구의 문자열 수를 알 수 있다.
데이터 타입
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
JavaScript의 타입과 자료구조 - JavaScript | MDN
모든 프로그래밍 언어에는 내장된 자료구조가 존재하지만 보통 그 내용은 언어마다 다릅니다. 이 글에서는 JavaScript에서 사용할 수 있는 내장 자료구조와 그 속성에 대해 알아보겠습니다. 그러
developer.mozilla.org
숫자 데이터 타입
+ 는 왼쪽의 값과 오른쪽의 값을 더해서 하나의 값을 만든다는 의미해서 이항 연산자라고 부른다.
이항 연산자는 여러가지가 있는데 그 중에서도 +는 산술을 하기 때문에 산술 연산자라고도 부른다.
문자 데이터 타입
큰 따옴표는 큰 따옴표로 끝내고, 작은 따옴표는 작은 따옴표로 끝낸다.
"Hello world"
'Hello world''Hello world'
'Hello world''Hello world'.length
11
JavaScript에는 많은 문자열String들이 있다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
String - JavaScript | MDN
The String object is used to represent and manipulate a sequence of characters.
developer.mozilla.org
'Hello world'.toUpperCase()
'HELLO WORLD''Hello world'.indexOf('O')
-1'Hello world'.indexOf('o')
4' hello '.trim()
'hello'
변수와 대입 연산자
x = 1;
1
y = 1;
1
x+y;
2x, y는 변수variable 이다.
= 대입 연산자는 오른쪽 항의 값을 왼쪽의 변수에 대입하고 있으며, 좌항과 우항을 결합해서 우항의 값을 만들어 낸다는 뜻을 갖고 있다.
x, y는 대입 연산자를 통해서 변할 수 있는 변수이지만
숫자 1은 언제나 1이기 때문에 바뀌지 않는 뜻을 가진 상수constant라고 한다.
var Name = 'Seulgi';
alret("It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The "+name+" point of using Lorem Ipsum is that it has a more-or-less normal distribution of "+name+" letters, as opposed to using 'Content here, content here', making it look like readable English. "+name+" Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still "+name+" in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes "+name+" on purpose (injected humour and the like).")되도록 변수 앞에는 var를 적어주도록 하자. 좋은 습관 기르기!
Night/Day mode 추가하기
우선 구글링을 통해 알게 된 방법은 이렇다.
https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp
How To Toggle Between Dark and Light Mode
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<style>
body {
margin: 20px;
background-color: white;
color: black;
}
.dark-mode {
background-color: black;
color: white;
}
</style>우선 day인 상태와 dark인 상태일때의 background-color와 폰트 컬러를 지정해준다.
<button onclick="myFunction()">Toggle dark mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>그리고는 <body>부분에 버튼을 생성하고 <script></script>를 통해 JavaScript기능을 추가한다.
그럼 Toggle 버튼을 통해 누를 때마다 Day/Dark 모드 전환이 가능하다.
또 다른 방법은,
'🛠 JavaScript' 카테고리의 다른 글
| About Object (0) | 2022.04.29 |
|---|---|
| 생활코딩 WEB2 - JavaScript (2) (0) | 2022.01.21 |
| JavaScript - function (0) | 2022.01.16 |
| JavaScript - for (0) | 2022.01.15 |
| JavaScript - if (0) | 2022.01.14 |
댓글