javascript 입문 -220401

javascript

hello.html

<button onclick="move()">오른쪽으로 움직이기</button>

여기서 move() 는 자바스크립트 영역, 이 버튼에 클릭이라는 이벤트가 발생할 때 마다 실행됨

그리고 쭉 script 영역 : 페이지가 로딩됨과 동시에 실행됨

그냥 move(); 라고만 적으면 ----> 페이지 로딩시 바로 호출됨

function move(){
            document.querySelector("#kimImg").style.marginLeft="100px";
}
            

이미지를 오른쪽으로 100px 옮기기

hello2.html

 function move3(){
            document.querySelector("#kimImg").style.marginLeft="100px";
            document.querySelector("#rabbitImg").style.marginLeft="100px";
        }
        
        
      

두 개의 이미지를 함께 옮기고 싶으면 function 안에 나열하면 된다

hello3.html

• 변수명 만들기

let a=10;

a 라는 이름의 기억공간을 만들어서(let) 10이라는 숫자를 대입(=)해라 !

=은 같다라는 뜻이 아님 !
a에 10을 집어넣어라 (대입연산자)
우측의 것을 좌측으로 대입

let은 그 기억공간을 처음 만들 때만 쓴다, 그리고 이미 만들어진 저장공간에 값을 바꿀 때는 그냥 =만 씀

*변수명 : 숫자, let, function 등의 이름 사용 불가

// 10 증가시키기 버튼을 누를 때 마다 a 변수 안에 있는 값이 10씩 증가되도록 해 보세요 ***헷갈렸음

        function increase(){
            a=a+10;
        }

a에 a+10값을 넣는 것이므로 a는 20이 되고
다시 그 20인 a에 10을 더한 값을 넣으므로 30이 되고 ,,, 반복

이미 만들어진 변수명으로도 대입 가능
let lee = 10;
let kim = lee;

==> kim 은 10이 된다.

• 만든 적이 없는 변수명은 대입 불가 !!

hello4.html

문자열은 항상 따옴표 붙이기 !
따옴표를 붙이지 않으면 그것을 변수로 인식하기 때문

• 연결연산 : 문자끼리 연결
  "10"+"10"=1010
  10+"10"=1010 (어느 하나라도 문자이면 이어붙임)

따라서

let myName="김구라";

let result=myName+"님";

==> '김구라님'

let weight=75;
let result2=weight+"kg";

==> '75kg'

"이름:김구라 몸무게:75kg"

let result3="이름:"+myName+" 몸무게:"+weight+"kg";

*연결연산자를 빼먹지 말 것 !!
문자열 "" 안에는 띄어쓰기, 연산자 모두 가능하다

hello5.html

움직이기 버튼을 누를때 마다 위의 이미지를 우측으로 100px씩 이동하도록 프로그래밍해 보세요.

hint : document.querySelector("#kimImg").style.marginLeft="숫자px";

1. 버튼 만들기

<button onclick="move()">움직이기</button>

2.움직일 이미지 만들기

<img id="kimImg" src="images/kim1.png">

3. 변수 설정하기

let mLeft=0;

4. 이미지를 움직일 함수 짜기

document.querySelector("#kimImg").style.marginLeft=mLeft+"px";

5. mLeft 값이 계속 증가되게 만들기

mLeft=mLeft+100;

6. 증가되는 만큼 px 값이 표시되게 만들기
   1) body에 p 하나 부여

<p id="info">0</p>

초기값 : 0
2) function에 함수 짜기

document.querySelector("#info").innerText=mLeft;

*innerText도 style변경과 같이 변경이 가능하다 !

따라서 최종

 function move() {
            
            mLeft=mLeft+100;
            document.querySelector("#kimImg").style.marginLeft=mLeft+"px";    // 여기선 kebabcase 안씀, 빼기로 인식되기 때문
            document.querySelector("#info").innerText=mLeft;
        }

+) css 부여하기

<style>
        #kimImg{
            /* margin-left가 변할 때 0.4초 동안 변하도록 설정 ! 이상적인 시간 */
            transition: margin-left 0.4s ease-out;      
        }

        
    </style>

transition : 물체를 움직이게 해줌
ease-out : 부드럽게, 편하게 끝내라
linear : 일정한 속도