🪵생활코딩 진도체크(야학)
🪵JavaScript란
- html 위에 만들어지는 동적인 이벤트들이 함께하는 언어
🌳 Html속에 JS와 CSS 속성값
<script></script>
<input type = "button" value = "night" onclick = "alert()"/js설정값 등장 >
🌳 Js로 문서에 문자열,숫자 등 넣기(html과 차이)
document.write(1+1);
document.write('1'+'1');
1+1 // html 출력값 :1+1
🌳 이벤트 on~
- on으로 시작하는 것을 JavaScript가 실행될 수 있게 돕는 이벤트라고 한다.
- onclick, onkeydown, onchange 등
🌳 웹창에서 console 활용
- 파일을 만들지 않고 js코드를 즉흥으로 실행 가능하다.
- 글자수세기, 문자열 개수, 랜덤추첨 활동 등(웹페이지 내에서 일어나는 활동 등)
str.length;
alert('str').length;
🌳 데이터타입
🌱 자료형 = string [숫자, 문자열];
🌱 프로퍼티 properties와 메서드 method
- 메서드: 기능이있는 데이터타입 , 함수와 유사
var str = "lalaaabcd"
str.toUpperCase
str.indexOf('abcd')
str.trim();
str.trimEnd();
- 프로그래밍 공부할 땐 항상 극단적으로 생각하자
- "메서드를 이용해 1만개의 '나무'라는 단어를 '숲'으로 바꿔보자"
- 변수 활용하기 name = "나무" -> name = "숲"
- 실행을 유보할땐 shift + enter 누르기
🌳 속성값을 넣을 수 있는 CSS 주요문법
🌱 선택자 | 제어하고자 하는 태그 js로 다루기
- id선택자, class선택자, 모든 span 태그에 적용하기
- id(#) : 정확한 타켓팅(예외 처리에 활용)
- class(.) : 포괄적으로 묶는 것
- span{} : 모든 span 태그에 적용
<div> //어떠한 기능, 의미가 없지만 정보를 제어하고 싶을 때 쓰는 코드
<span> // div와 비슷하지만 전체를 쓰냐 전체를 쓰지않느냐의 차이(줄바꿈 안됨)
<span style = "font-weight : bold">내용</span> // 1. span태그로 하나씩 지정하는 법
<head> // 2. 스타일태그로 변수명을 지정하여 한꺼번에 적용하는 법
<style>
.js{}
</style>
</head>
<body>
<span class = "js"></span>
</body>
- 선택자를 잘 이용해야 효율을 높일 수 있다.
- .js: class 선택자 값
- #first: id 선택자 값
//예시
<head>
<title>Things I studied.</title>
<meta charset = "utf-8">
<style>
.js{
font-weight:bold;
color: blue;
}
#first{
font-weight:bold;
color:green;
}
span{
color:red;
}
</style>
</head>
🌱 제어할 태그 선택하기
document.querySelcetor('body').style.background-color = "black";
document.querySelcetor('body').style.color = "white";
