[DAY4]Javascript 2/3
학습한 내용
1. 복습
<!DOCTYPE html>
<html>
<head>
<title>WEB</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<h1 style="border-bottom:10px solid skyblue;"><a href='index.html'>web</a></h1>
<div id="container">
<ol>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">js</a></li>
</ol>
<div>
<h2>Welcome</h2>
Hello, WEB.
</div>
</div>
</body>
</html>
web
**사진 찾을수 있는 링크 : https://picsum.photos/
-
STYLE 코드 간략히 정리하기
-
Night 클릭박스 만들기
Body 코드 아래에 추가
-
본 수업 진도
4-1. 제어문을 배우자! = logic.html
종류 : 1)조건문(conditional statements) 2)반복문(loop statements)
+참고내용
Boolean 코드
[true/false 조건문]
4-1-1) 조건문
+ 로그인시 아이디 기입 팝업
<html>
<body>
<script>
let input_id = prompt('아이디?');
alert(input_id+'님 안녕하세요 ^^');
</script>
</body>
</html>
<input type="button" id="dnbtn" value="Night" onclick="
let button = document.querySelector('#dnbtn')
if (button.value==='Night'){
document.querySelector('body').style.
backgroundColor='black';
document.querySelector('body').style.color='White';
button.value='Light'
} else {
document.querySelector('body').style.
backgroundColor='white';
document.querySelector('body').style.color='black';
button.value='Dark'
}
">
+THIS 코드 활용
4-1-2) 반복문
<h1>반복문(Loop)</h1>
<script>
console.log
for(let i=0; i<3; i=i+1){
console.log(2);
console.log(3);
}
console.log(4);
</script>
학습한 내용 중 어려웠던 점 또는 해결못한 것들
배경화면을 설정해두니 night버튼클릭해도 backgorundcolor 검은색으로 변경 안됨! 글자색만 흰색으로 변경됨
해결방법 작성
배경화면 이미지 삭제!
오류발생 이유: 배경화면의 색은 변경되었을거나 이미지 파일이 배경밑에 깔려있기때문에 가려져서 안보이는것
학습 소감
JAVAsript를 시작하면서 학습 범위가 좀 더 커진것같다. 완벽히 이해하기 위해서는 구글링 열심히 해서 공부해야겠다.
Author And Source
이 문제에 관하여([DAY4]Javascript 2/3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@monica8842/DAY4Javascript-23저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
