생각기록
생활 코딩 WEB2 JavaScript 2 본문
웹브라우저 제어
html은 한번 바뀌면, 자기 스스로 바꿀 능력이 없는 정적언어
그것을 js로 동적으로 제어 해준다.
바디태그에 스타일 속성을 주기 위해서는
이 속성을 주고자 하는 태그가 누구인가를 알려주는 자바스크립트 문법
1.css 본질적 문법
바꾸고싶은 태그에 style 써주기
<h2 style="color:powderblue;">javascript</h2>
속성(프로퍼티)
2. 자바스크립트를 이용해 제어하고자 하는 태그를 선택하는 법
css 강의
<div> 아무런 기능도 없는 무색 무취의 태그
- css, js통해 정보를 제어 하고 싶을 때 사용하는 태그
- 전체를 차지하기 때문에 자동 줄바꿈
전체를 쓰지않는 <span>태그
하나의 태그가 1억개라면?
이것을 변경하기 위해 필요한 것이 선택자
선택자 = 누구에게 적용할 것인지 타겟팅!!
js { }
js라는 이름의 태그
.js { }
클래스 값이 js인 태그
#js { }
아이디가 js인 태그
클래스 - 그룹핑 / 반 (1학년 1반.. 학생을 그룹핑)
아이디 - 한가지 대상을 식별한다. / (일종의 학번 - 중복 x )
우선순위
그래서 포괄적인 class 위에 id를 얹어서 디자인 하는 것이 효과적이다.
<body>
<h1><a href="idex.html">WEB</a></h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<p>야간모드/일반모드</p>
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
</body>
컴퓨터 프로그래밍 언어 = js
html은 프로그래밍 언어 x
프로그램 = 순서
순서를 만드는 행위, 사람 = 프로그래밍, 프로그래머
어떤 의도에 따라, 순서대로 여러 기능을 작동 시키는게 컴퓨터 일반 작동
html 웹페이지 묘사 언어
시간의 순서에 따라 실행되는 기능은 x
자바스크립트는 상호작용 하기 위해 만들어진 것
시간의 순서에 따라 웹브라우저의 여러기능이 실행되어야 하기 때문에 프로그래밍이다.
조건, 반복 반복문..실행..
복잡해짐에 따라 이 복잡한 순서를 정리정돈 하는 방법...등
조건문
하나의 프로그램이 하나의 흐름 x
- 조건에 따라 다른 순서의 기능들이 실행 될 수 있도록
- 단순한 반복문이 아닌 복잡한 업무까지 가능한 혁명적 도구
비교연산자
=== 는 비교연산자면서,
이항 연산자 (좌항 우항을 결합해 어떤 데이터를 만든다) 같다면 true값이 됨 / 틀리면, false값
true와 false 값을 합쳐서 Boolean이라고 부른다.
<h3>1===1</h3>
</body>
<script>
document.write(1 === 1);
// === 좌항 우항이 같으면, true를 반환
</script>
<h3>1===2</h3>
<script>
document.write(1 === 2);
</script>
<h3>1<2</h3>
<!-- <꺽쇄가 태그라서 이런식으로 표기 > < -->
<script>
document.write(1 < 2);
</script>
</script>
<h3>1<1</h3>
<!-- <꺽쇄가 태그라서 이런식으로 표기 > < -->
<script>
document.write(1 < 1);
</script>
비교 연산자, boolean, 조건문
if 조건문
은 true, false 값 Boolean이 따라온다.
true면 실행되고,
false면 실행되지 않고, 다음 코드를 읽는다.
boolean이 뭐냐에 따라 실행 순서가 달라진다.
<body>
<h1>조건문</h1>
<h2>program</h2>
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
<h2>if-true</h2>
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
// 실행의 순서가 3없이 바뀜..
</script>
<h2>if-false</h2>
<script>
document.write("1<br>");
if(false){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
//2가 false니까 else안의 3이 실행됨
</script>
</body>
그러나 위의 코드는 좋지 않은 코드다.
조건문은 달라져야 하는데,
위의 코드는 if(flase)면, 언제나 false인 것이라 효용성이 없다
if ( 조건에 따라 true, false가 오도록 해야 한다. )
<input type="button" value="night">
1. if > 이버튼의 값이 night라면
2. night가 아니라면 else > day에 썻던 코드들이 들어가도록
3. 조건문 = 현재 이 버튼의 value값이 무엇인가를 알아내야 한다
검색창에 JavaScript elements get value 검색
> .value라는 프로퍼티를 쓰면 된다!
document.querySelector('#night_day').value;
콘솔에 값이 night로 찍힘
값을 변경하면, 콘솔창 값도 변경 된다.
응용해서
(document.querySelector('#night_day').value === 'night')
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night'){
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';
}
">근데, 한번 더 누른다고 해서 바뀌지 않는다..
그럼
if문의 조건식이
true여서 적용 되다면, 태그의 값을 day로 할당해주고,
document.querySelector('#night_day').value = 'day';
false가 적용되면, 태그의 값을 night로 할당
document.querySelector('#night_day').value = 'night;
현재 day이면, if문이 false가 되고, else문이 실행된다.
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">
리팩토링
공장으로 다시 보내서 개선한다.
코드가 비효율적일 때, 동작은 두고,
중복된 코드를 낮추고 개선하는 작업을 리팩토링이라고 한다.
버튼이 1억개라면, 온클릭 구간안
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day).value === 'night')....
">
.... 이코드가 속해 있는 태그를 가르키는 특별한 키워드 this
(document.querySelector('#night_day) 는 onclick event가 속해있는 태그 자신
= this
를 씀으로써 id 태그로 가르킬 필요가 없다.
this.value = 현재 이벤트가 속한 태그의 값
중복 코드 없애기
document.querySelector('body')를 없애기 위해
var target = document.querySelector('body'); 값을 주고 중복자리에 변수 삽입
위의 코드를 리팩토링
중복코드와 간결하게
<!-- 위의 코드를 리팩토링! -->
<!-- 중복코드 제거와 간결 -->
<input type="button" value="night" onclick="
if (this.value === 'night'){
var target = document.querySelector('body');
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">
'강의 정리 > 생활 코딩 강의 정리' 카테고리의 다른 글
| 생활 코딩 WEB2 파일 쪼개서 정리 정돈 (0) | 2022.11.12 |
|---|---|
| 생활 코딩 WEB2 JavaScript 5 (0) | 2022.11.11 |
| 생활 코딩 WEB2 JavaScript 4 (0) | 2022.11.11 |
| 생활 코딩 WEB2 JavaScript 3 (0) | 2022.11.09 |
| 생활 코딩 WEB2 JavaScript 1 (0) | 2022.11.09 |
