[개발일지 3월 25일] [공통교육-웹기초] JavaScript 3/3 - 이고잉 강사
1. 학습한 내용
필기내용
- 조건문, 반복문이 중요하고 숙달하기!
<review4.html> 복습완료(this 추가 사용함)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="night" onclick="
if (this.value==='night'){ // === : 비교연산자
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day';} //클릭하면 day로 바뀜, = : 값 정의
else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
this.value='night'}
">
<h1><a href="index.html">web</a></h1>
<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>
<h2>Welcome</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquam facilis animi veniam, saepe tenetur ea velit enim libero
fugit illo porro ipsa distinctio ipsum quas eveniet asperiores,
ratione laboriosam consequuntur!
</body>
</html><loop1(복습).html>
<script>
let topics2 = ['html', 'css', 'js']; //i=i+1 이랑 i++ 동일
for(let i=0; i<topics2.length; i=i+1){ //초기값;반복조건;증감연산
console.log(topics[i]); // i=> html, i=>css, i=>js
// document.write('<li>'+topics[i]+'</li>');
document.write(`<li>${topics[i]}</li>`); // 백틱으로 감싸고 ${}로 감쌈 → 바로 위와 똑같이 작동
}
</script>→ topics2란 변수에 'html', 'css', 'js' 저장
→ topics2.length(3) 미만까지 for문 반복 수행
→ 실행 결과값을 loop1.html 본문에 출력
→ <li>${topics[i]}</li> (백틱과 $를 통해서도 나타낼 수 있음)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
javascrpit loops cheat sheet 튜토리얼
참고 사이트
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
버튼 참고 사이트 활용한 예제들
-
페이지에서 console창
document.querySelector('input')
→ -
document.querySelector('input').click()
→ undefined 란 문구가 뜨면서 click이 실행됨 -
let inputs = document.querySelectorAll('input');
→ 이후 inputs를 치면 모든 input값이 출력 -
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.lenth; i=i+1){
inputs[i].click();} -
만약 inputs[i].value가 100보다 크다면 100보다 큰 inputs이 클릭
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value>100){
inputs[i].click();
}
}
-
100초과 200미만 클릭
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value>100){
if(inputs[i].value<200){inputs[i].click();}
}
}
→ if문에 if를 쓰면 조건을 다양하게 줄 수 있음 -
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value>100 && inputs[i].value<200){
inputs[i].click();
}}
→ 이렇게도 사용할 수 있는데, 꼭 기억할 사항은 아님 -
‘,’도 됨 ‘,’ = ‘&&’
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value>100, inputs[i].value<200){
inputs[i].click();
}}
→ 번외... -
let j;
for(j=0; j<10; j++){
}console.log(j);
→ 값은 10 -
for(let j=0; j<10; j++){
}
console.log(j);
이렇게 하면 j가 for문 안에서만 실행되기 Eons에
consolel.log(j) 실행시 실행이 안됨 -
Math.sqrt(4)
→ 4의 제곱근인 ‘2’를 출력
→ 이런 것들을 내장함수라고 함(프로그래머가 만들어 놓음)(built in function)
이러한 내장함수를 이용해서 완제품을 만드는 사람들이 개발자!
‘함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인거다.’
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<script>
function night() {
document.querySelector('body').style.backgroundColor ='black';
document.querySelector('body').style.color = 'white';
let as = document.querySelectorAll('a');
for(let i=0;i<as.lenth;i=i+1){
as[i].style.color = 'white';
}
}
function day() {
document.querySelector('body').style.backgroundColor ='white';
document.querySelector('body').style.color = 'black';
let as = document.querySelectorAll('a');
for(let i=0;i<as.lenth;i=i+1){
as[i].style.color = 'black';
}
}
</script>
<input type="button" value="night" onclick="
let btn = this;
if(btn.value === 'night'){
night();
btn.value = 'day';
} else {
day();
btn.value = 'night';
}
">→ night를 함수로 만들고 밑에서 night();를 통해서 함수 호출
→ day도 마찬가지
- 함수 사용에 따른 효용
1) 코드가 간결해진다
2) 가독성이 좋아진다
3) 유지보수가 편해진다
4) 기타 등등
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
function.html
<script>
function 부가세계산(){
let 가격 = 1000;
let 부가세율 = 0.1;
let 부가세 = 가격 * 부가세율;
console.log(부가세);
}
부가세계산();
</script>→ 더 똑똑한 방법은 밑!
<script>
function 부가세계산(가격){ // 가격 : 매개변수, parameter
let 부가세율 = 0.1;
let 부가세 = 가격 * 부가세율;
console.log(부가세);
}
부가세계산(2000); // 2000 : 인자, argument, 입력값
</script>→ 매개변수를 이용해서 입력값을 입력하면 자동으로 계산(밑의 그림은 출력된 결과값)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<script>
function 부가세계산(가격, 부가세율){ // 가격, 부가세율 : 매개변수, parameter
let 부가세 = 가격 * 부가세율;
console.log(부가세);
}
부가세계산(2000, 0.1); // 2000, 0.1 : 인자, argument, 입력값
</script>→ 매개변수를 ‘가격’과 ‘부가세율’ 두 개로 설정함!
→ 인자를 2000, 0.1 순으로 매칭됨
→ console에 200으로 출력
- Math.floor(1.9)100
→ 100
Math.random()100
→ 86.10239815980589...
부가세계산(1000, 0.1)*100
→ 100(NAN) 어쩌라고?라는 뜻!
function a(){
return 1;
}
a()*100→ 100 출력
<script>
function 부가세계산(가격, 부가세율){ // 가격 : 매개변수, parameter
let 부가세 = 가격 * 부가세율;
return 부가세;
}
console.log(부가세계산(2000, 0.1)); // 2000 : 인자, argument, 입력값
</script>→ 이전은 부가세계산과 출력 두가지
→ 지금은 부가세계산과 출력 동시에 얻을 수 있음
alert(부가세계산(2000, 0,1))→ 200이 alert로 띄워짐
참고 : 변수와 함수의 관계(javacscrpit execute...)(강사님 강의 맵)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
function.html 밑부분 참고
<h1>SUM</h1>
<script>
function sum(val1, val2){
return val1+val2;
}
alert(sum(100,200)*10)
</script>→ 3000이 출력
→ return이 실행되면 그 뒤에 코드를 넣어봤자 실행이 안됨
→ return은 함수의 종료 조건!
관련 예시
<script>
function sum(val1, val2){
return val1+val2;
alert(1);
}
alert(sum(100,200)*10)
</script>→ return 이후의 alert(1);는 실행이 안 됨(return은 함수의 종료 조건이므로)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
Object 객체 지향(코드를 정리할 수 있음)
객체와 변수는 자바스크립트에서 남매와 같다
object.html 내용
<html>
<body>
<h1>Object</h1>
<script>
let student = ['egoing', 'duru']
console.log(student[0], student[1]);
let member = {developer:'egoing', designer:'duru'};
console.log(member.developer, member.designer);
let person = {name: 'egoing', city: 'seoul', job: 'developer'};
console.log(person.name, person.city, person.job);
</script>
</body>
</html>→ object : dict구조{key : value}
→ 따라서 {developer : ‘egoing’} 이런 식
-
객체지향은 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것
-
Math.abs(-1) : -1의 절대값(absolute)(밑의 그림 참고)
-
코딩 타이핑 연습하는 사이트 ; https://typing.io/
→ 나는 안해도 괜찮을 듯 (https://seomal.com/map/1/181)
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
마지막으로 review5.html을 반복연습하면서 암기!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1{
border-bottom:10px solid black;
}
</style>
</head>
<body>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<h1><a href="index.html">web</a></h1>
<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>
<h2>Welcome</h2>
Hello, WEB
</body>
</html>→ 이처럼 html, js, css가 모두 담겨 있는 기본적인 틀을 외우자!
지극히 참고
2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들
- 기본 구조를 암기한 것
- 세미클론 및 소괄호, 중괄호, 대괄호 구분의 어려움
3. 해결방법 작성
- 기본 구조는 3분 이내에 작성할 수 있도록 꾸준히 암기
- 명령문에 따라서 따로 정리해야할 필요성
4. 학습 소감
- 약 1주일간의 수업을 듣고 난 후, 기존의 파이썬 구조와 JavaScript의 구조는 거의 유사하다는 것을 느꼈음, 하지만 타이핑할 때 Tab키의 사용과 괄호 사용하면서 추가적인 작업은 익숙하지 않음
- 이를 극복하기 위해 익숙해질 필요가 있을 듯
Author And Source
이 문제에 관하여([개발일지 3월 25일] [공통교육-웹기초] JavaScript 3/3 - 이고잉 강사), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pjj2059/개발일지-3월-25일-공통교육-웹기초-JavaScript-33-이고잉-강사저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
