![[WEB-JavaScript] 스터디 1일차](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkHUVW%2FbtsDA4JtGAw%2FAAAAAAAAAAAAAAAAAAAAAOCgRSU5c4zAAWVqHI9dbMp5rH-BLWAiFv9sqZextK5e%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DtgqM43ELQyyl7PjmYFs80R3FayQ%253D)
생활코딩 Egoing Lee : WEB2 - JavaScript 강의를 활용합니다.
WEB2 - JavaScript - 생활코딩 (opentutorials.org)
WEB2 - JavaScript - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상
opentutorials.org
[지금 무료] WEB2 - JavaScript 강의 - 인프런 (inflearn.com
[지금 무료] WEB2 - JavaScript 강의 - 인프런
https://opentutorials.org(생활코딩 사이트)를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. , [임베딩 영상] 1. 생활코딩의 Web2 -JavaScript 수업
www.inflearn.com
Html 과 JavaScript의 차이
html은 정적이고 js는 동적인게 가장 큰 차이이다.
예를들어,
console에 1+1을 입력했을 때,
html -> 1+1을 출력하고
js -> 2 를 출력한다.
JavaScript Event
JS에서 이벤트는 사용자가 상호작용할 때 일어나는 사건이라고 볼 수 있다.
강의에서 활용된 event 예시는 아래 세가지.
onclick : 요소 클릭시 이벤트 발생
onchange : 요소 변화 감지
onkeydown : 입력 감지
<input type="button" value="hi" onClick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')"> |
 |
 |
위 사진 순서대로 결과를 가져온다.
event 종류는 다양하기 때문에 필요한 event는 검색을 통해 사용하면 좋고,
위에서 사용된 방식은 인라인 방식이다.
가장 좋은 방법은 addEventListener 방식인데, 본 강의에서 아직 다루지 않았으므로
차후 기회가 된다면 다뤄보도록 할 예정이다.
String attribute, method
.length : 문자의 길이
.toUpperCase : 대문자 변환
.indexOf() : 찾을 문자가 위치한 인덱스값
.trim() : 공백 제거
참고로 string의 속성은 length 하나이다.
메서드는 많기 때문에 필요한 메서드를 찾아 사용하면 좋다.
Css 활용
태그일경우
tag{
}
클래스 이름일 경우 .
.class{
}
id일 경우 #
#id{
}
class -> 그룹핑한다
id -> 식별한다(타겟팅)
라고 보면 되기 때문에 아래 순서대로 포함된다고 생각하면 쉽다.
id 선택자 < 클래스 선택자 < 태그
클래스 선택자로 포괄적 디자인 후 id 선택자로 예외처리하는 방식을 활용하는 것이 좋다.
다크모드 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>JavaScript</h1>
<script>
document.write('hello');
</script>
<br>
<input type="button" value="hi" onClick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
<br>
<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';"">
</body>
</html>
 |
 |
잔디 심기. . .🥰
'Study > WEB Study' 카테고리의 다른 글
| [WEB-React] 스터디 2일차 (0) | 2024.02.02 |
|---|---|
| [WEB-React] 스터디 1일차 (0) | 2024.01.31 |
| [WEB-JavaScript] 스터디 4일차 (0) | 2024.01.26 |
| [WEB-JavaScript] 스터디 3일차 (0) | 2024.01.23 |
| [WEB-JavaScript] 스터디 2일차 (0) | 2024.01.18 |