목차
WEB2 (1~13)
WEB2 JavaScript - 1.수업소개 - YouTube
본 글은 유튜브 무료 강의 생활코딩의 내용과 검색을 통해 이해한 것을 정리한 글임을 밝힘.
1. JavaScript
intro.
HTML으로 웹을 구성했을 경우 출력된 후 변하지 않음.
이를 JavaScript를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가할 수 있다.
즉 JavaScript가 활용된 것과 상호작용을 하면 HTML문서가 동적으로 변하는 것을 관찰할 수 있음.
1. 1. JavaScript
<script> : html 문서 내에서 이 태그안에 있는 내용은 자바스크립트로 동작할 것임을 알리는 태그
<script>
document.write('hello world')
</script>
1.1.1. HTMl과 JavaScript의 차이
예시) html로 1+1을 출력한다고 하면 문서상에서 1+1로 출력 JavaScript는 동적임 1+1을 출력한다고 했을 때 2로 출력
1.1.2. JavaScript 실제 예제
<input type="button" value="다크on" onclick="alert('다크 모드를 활성화하시겠습니까?')">
- <input> : HTML에서 사용자로부터 정보를 받을 수 있는 다양한 종류의 입력 요소를 생성
- type="button" : 입력할 요소를 button이라는 속성으로 지정
- value="다크on" : 입력되는 값을 설정하는 속성 → 여기선 다크 on이라는 값을 입력
- onclick="alert('다크 모드를 활성화하시겠습니까?') " :
- onclick의 속성값으로는 자바스크립트로 오게 됨.
- html은 이것을 기억해뒀다가 사용자 클릭했을 때 onclick 안에 있는 내용을 실행하는 것으로 이해하면 됨.
- alert('다크 모드를 활성화하시겠습니까?') : 다크 모드를 활성화하시겠습니까? 라는 경고창을 띄운다.
1.1.3. Event
Event : 웹브라우저에서 일어나는 사건, on으로 시작하는 속성들(onkeydown, onclick, onchange 등등)
ex. 무언가를 클릭하는 이벤, 내용을 바뀌는 이벤트, 내용이 변했을 때라는 이벤트를 체크하는 이벤트
10개에서 20개정도 되는 이벤트가 존재. 이를 잘 엮어서 웹사이트를 구성.
1.1.4. 콘솔
웹사이트 들어가서 F12
→ 콘솔로 들어가서 파일을 만드지 않고도 자바스크립트를 실행할 수 있음.
2. 데이터타입(자료형), 변수, 연산자 - ★
컴퓨터는 데이터를 처리하는 게 아주 중요하므로 데이터의 종류를 구분 지을 필요가 있다!
2.1. 데이터타입
데이터의 특성에 따라 어떠한 유형의 데이터인지 식별할 수 있도록 사전에 정해놓은 자료의 분류
나타나있는 데이터가 문자인지, 숫자인지, 문자열인지, 불린인지 정확히 파악하고 쓰는 것이 중요!
Why?
답) 연산자든 함수든 하고자하는 바와 달라질 수 있음.
ex.
1+1
>> 2
'1'+'1'
>> '11'
2.2. 변수와 대입 연산자
변수(variable) : 컴퓨터의 메모리 안에 만들어지는 공간 → 값을 저장하는 공간이라고 생각
대입연산자(=)을 통해 바뀔 수 있는 변수에 데이터를 할당하는 것이라고 이해
var X=1
※ var이라고 선언하는 건 지금부터 변수를 선언하겠다는 것을 의미 : 코드에서 알기 쉽게 보자
상수 : 변할 수 없는 것
- 1=2 , 1은 상수이므로 2라는 값을 할당시킬 수 없음.
2.3. 연산자
어떤 연산을 할 지 지정하는 것을 의미.
주된 종류로는 변수에 값을 대입시킬 때 사용하는 대입연산자(=)
산술을 위한 산술연산자(+, -, *, /) 등이 있고 추가적인 연산자는 나중에 따로 정리.
3. JavaScirpt를 통한 태그 제어
3.1. Javascript를 통해 CSS의 태그 선택자를 선택하는 방법
document.querySelector("p");
→ 이 문서(document)에 있는 p라는 태그를 다 선택해라
3.2. CSS 태그를 선택했으면 어떻게 바꿀 것인가?
document.querySelector("p").style.backgroundcolor = "white";
→ 지정된 태그를 바꿀건데 backgroundcolor를 흰색으로 바꿀거다.
정리
HTML VS JavaScript
JavaScript는 컴퓨터 언어이면서 컴퓨터 프로그래밍 언어이지만
HTML은 프로그래밍 언어는 아님. (시간의 순서에 따라 실행하는 기능은 없음)
프로그래밍 : 순서를 만드는 행위
조건에 따라 여러가지를 하고 싶고 반복하고 싶고 잘 정리정돈하는 방법이 필요!
개인 연습용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.input{
font-family:sans-serif;
}
.body{
background-color: white;
color:black;
}
</style>
</head>
<body>
<input type="button" value="다크on"
onclick="confirm('다크 모드를 활성화하시겠습니까?')
var dark_mode=confirm('다크 모드를 활성화하시겠습니까?')
if (dark_mode==true) {document.querySelector('body').style.backgroundColor ='black';
document.querySelector('body').style.color = 'white';
}
else {document.querySelector('body').style.backgroundColor ='white';
document.querySelector('body').style.color = 'black';}">
<p>
'This function displays a message in a dialog box. Nowadays, website owners are always aiming to make their pages user-friendly. One of the possible usages of JavaScript confirm function is to display a confirm message for deletion'
</p>
</body>
</html>
위 html은 다크모드를 예 아니오로 구분시켜서 그거 하나로
다크모드를 왔다갔다하는 걸 제어하는 걸 해보고 싶어서
혼자서 만들어본 예제
- alert로는 예/아니오를 띄우기 어려웠기 때문에 해당하는 confirm이란 걸 검색해서 찾음.
- 예/아니오 각각 조건에서 다크모드와 라이트모드를 왔다 갔다해야하기 때문에 조건문이 필요한 걸 깨달음.
- javascript에 대한 조건문 문법을 찾아봐서 생각해본 순서대로 입력한 뒤 실행을 해봄.
개인 Feedback
- 우선 <input> 안에 위에 해당하는 코드를 다 넣어야 하다보니 괄호, 따옴표가 헷갈림. 그로 인한 빈번한 오타 발생
- 태그를 지정해주는 것들이 반복되고 길어보여서 너무 지저분하고 가독성이 구림
- 실행은 정상적으로 작동되지만 confirm창이 두 번 나오는 건 이유를 잘 모르겠음.
→ 이를 해결하기 위해서 클래스 지정자를 이용하는 식으로 해결을 해봐야 함.
→ 후속 강의들을 보면서 점차 가다듬을 필요 있음!
'Web > JavaScript' 카테고리의 다른 글
| [Node.js] API 기본 개념 잡기 (express) (0) | 2023.05.02 |
|---|---|
| [JavaScript] Node.js 생활코딩 기초 내용 정리(Querystring, 파일 read) (0) | 2023.04.28 |
| [JavaScript] 생활코딩 Web2 내용정리 (함수, 객체, 라이브러리 등) (0) | 2023.03.14 |
| [JavaScirpt] 생활코딩 Web2 내용정리 (조건문, 반복문) (0) | 2023.03.13 |
댓글