1. 학습한 내용

review

<script>
	let topics=['html', 'css', 'js']
    for(let i=0;i<topics.length;i++){
    	console.log(topics[i]);
        }
</script>

학습내용

웹페이지에서 a태그 모두를 출력할 때 querySelectorAll사용

  let as = document.querySelectorAll('a');
            for(let i=0;i<as.length;i++){
                as[i].style.color='white';
            }

위와 같은 버튼의 나열에서 100이상의 수에 버튼을 누를 때,

let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value>100){
inputs[i].click();
}
}

for을 사용하여 i를 지정하고 if 에서 100초과의 조건을 추가한다.(조건문 + 반복문)
100보다 크고 200보자 작을 경우,
조건문을 2개 사용하거나 하나의 조건문에 &&를 사용하여 나타낼 수 있다. 이는 앞조건이 참이고 뒤의 조건이 참일 겨우 실행이 된다.
i값을 한번 선언 후에 밑에서 다시 선언을 하면 에러가 날 수도 있다.

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(inputs[i].value>100 && inputs[1]<200){inputs[i].click();}

let j;
for(j=o; j<10; j++){}
console.log(j);

10

j가 1씩 증가하여 10이 나옴

for(let j=0;j<10;j++){}
console.log(j);

undefined

j는 for안에서만 유효하기 대문에 undefined가 나옴

함수는 서로 연관된 코드를 그룹핑하여 이름을 붙인 것

함수의 장점
코드가 간결하다.
가독성이 좋아진다.
유지보수가 편해진다.

함수를 실행할 때 함수()는 필수

<body>
	<script>
    	function 이름()[{}
    </script>
    이름();
</body>

패턴, 한줄로 된 코드도 함수화 시킬 가치가 있다.
function 정리코드
console.log()
.
.
.
->호출코드

인자(입력값) Argument
매개변수 Parameter - 입력값을 받는 변수

function 이름(A,B){
let C=A+B;
console.log C
}
이름(a,b);
매개변수를 주렁주렁 달아서 여러개의 입력값을 받을 수 있다.

함수는 작은 프로그램이다. 위의 코드를 이용해 1)계산과 2)console.log를 출력한다. 좋은 부품은 하나의 기능으로 하나의 용도를 나타내는 것이라 말한다. 따라서 두가지 기능을 하는 function에 return을 집어넣는다.

function A(){
return(1);
}

1

console.log(부가세계산);
return한 값을 console.log하면 화면에 출력 가능하다.(함수를 쓰는 입장) return이 되면 함수값이 확정되며 함수의 종료조건이다. 따라서 return의 뒤에 몇개가 있던 실행되지 않는다.

※참고
객체지향
객체지향은 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것이다.

{A, B, C}에 이름을 붙인다면
{developer:A, desiger:B, doctor:C}

console.log(member.developer, member.designer, member.doctor);
let person=[A, B, C];

이 것은 그저 0, 1, 2번의 나열(색인으로 식별하는 배열)일 뿐 A,B,C가 무엇인지 알 수 없다. 이 때에 객체지향(이름으로 식별되는 배열)을 이용

let={name:A, city:B, job:C};
console.log(person.name,..,..);

2. 어려웠던 점

function, 함수라는 것은 예전에 엑셀을 배울 당시 들어와서 익숙하다 생각했다. 역시 아는것과 행하는 것은 달랐다. 항상 느끼지만 개념을 익히는 것은 쉽지 않다. 어떻게 응용될지를 파악하지 못했다. 손이 너무 느려 실습과 병행하는 수업을 따라가기 쉽지 않다고 느껴진다. 또한 객체지향이라는 개념은 생소해서인지 개념이 어려워서인지 이해가 잘 되지 않았다.

3. 해결방법

강사님께서 손이 빨라질 수 있는 사이트를 추천해 주셨다. 조금씩 연습해 보려고 한다. 또한 객체지향의 강좌를 찾아서 들어보려고 한다. 함수라는 개념을 익힌 만큼 용용하는 방법을 인터넷에서 조금 찾아본 뒤 스스로 실습해 보려고 한다.

4. 학습소감

오늘도 여전히 따라가기에 급급했다. 도중엔 실습을 포기하고 강의를 보면서 익히려 노력했다. 막상 내 컴퓨터에 손을 올리면 아무것도 기억나지 않지만 손에 익을 정도로 반복해야겠다. 다짐만 늘어가는 첫주의 강의는 여기까지.

Author And Source

이 문제에 관하여(개발일지 3일차 | 웹기초-JavaScript(3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gyujinj/개발일지-3일차-웹기초-JavaScript3

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발일지 3일차 | 웹기초-JavaScript(3)