[개발일기 5일차] JavaScript 기초3

miso_hwa·2022년 3월 25일
0

DaeguAI

목록 보기
3/9

1. 학습한 내용

ㆍ연산자

  • 대입연산자(=) : 오른쪽 값이 왼쪽 변수에 대입
  • 비교연산자(===) : true, false 중 결과를 나타냄
    <input type="button" value="night" onclick="
        if(this.value === 'night'){
            document.querySelector('body').style.color = 'white';
            document.querySelector('body').style.backgroundColor = 'black';
            this.value = 'day';
        } else{
            document.querySelector('body').style.color = 'black';
            document.querySelector('body').style.backgroundColor = 'white';
        	this.value = 'night';
        }
    ">
  • 결합연산자(&&) : 두 가지 이상을 표현
	<script>
		let inputs = document.querySelectorAll('input');
        for(let i=0; i<inputs.length; i=i+1){
            if(inputs[i].value > 100 && inputs[i].value < 150){
                    inputs[i].click();}}
	</script>

ㆍ함수 function

함수는 서로 연관된 code를 모아서 이름을 붙인 것이다.

  • 함수 형식
	function 함수이름() {실행할 내용}
  • 함수의 장점
    ① 코드가 간결해진다
    ② 가독성이 좋아진다
    ③ 유지보수가 편해진다
        <script>
            function 부가세계산(가격, 부가세율){  	// 매개변수, parameter
                let 부가세 = 가격 * 부가세율;
                return 부가세;					// return은 함수의 종료조건 
            }
            console.log(부가세계산(2000, 0.1));   // 인자, argument, 입력값
        </script>

ㆍ객체

객체지향은 서로 연관된 변수와 함수를 Grouping 해서 이름을 붙인 것이다.

  • 객체 { } : 각자 위치가 있는 것 / 순서없이 위치대로 저장
		<script>
            let member = {developer:'egoing', designer:'duru'};
            console.log(member.developer, member.designer);
        </script>
  • 배열 [ ] : 서로 평등한 것 / 순서대로 저장
		<script>
            let student = ['egoing', 'duru']
            console.log(student[0], student[1]);
        </script>

2. 어려웠던 내용

객체지향 개념에 대해 명확하게 이해되지 않음.. 알쏭달쏭..
조건문과 반복문을 혼합하여 사용할 때, 코드 작성이 원활하지 않음
code가 바로 안떠오르기도 하고, 영타 조금 늦은 것 같다..

3. 해결 방법

강의를 반복 시청하여 개념 먼저 명확하게 이해하기
코드작성 속도향상을 위한 연습(https://www.speedcoder.net/lessons/js/1/)

4. 학습 소감

낯선 코딩은 많이 어렵지만, 나만 어려운 것이 아니다!
코딩이 시나브로 익숙해져 마침내 빛을 발하는 날까지 파이팅!!!

profile
Junior Data Analyst

0개의 댓글