상세 컨텐츠

본문 제목

자바스크립트 기초편 함수와 이벤트

Html, Css, JavaScript 기초공부

by hongga 2022. 12. 5. 10:00

본문

안녕하세요 홍가입니다.

오늘은 함수와 이벤트 편을 적어보려고 합니다.

 

처음에는 반복문을 사용해보고 

두 번째는 함수와 매개 변수를 사용했습니다. 

세 번째는 사용한 코드를 재사용해봤습니다. 

 

두 번째 코드처럼 임의의 수를 넣어 사용을 했다면

세 번째 코드는 숫자 대신 count로 넣어 매개변수 부분에 숫자를 넣어 실행되게 했습니다. 

 

함수에다가 매개변수를 사용하여 alert로 값이 나오게 했습니다.

 

요번에는 while문을 사용하여 숫자를 입력하면 값을 더하고 0을 치면 종료가 되도록 만들었습니다.

parseInt를 사용하여 숫자를 정수 타입으로 받습니다.

 

전역 변수는 프로그램 어디에서나 사용이 가능하고 프로그램 종료 시 사라진다.

지역변수는 함수나 {}안에서 사용 가능하고 함수나 함수 내용이 사라지면 종료된다.

 

func1,2,3은 지역변수로 local1,2,3이 할당 되어있어서 local이 나오고 

첫 번째나 마지막은 {}밖에서 변수를 출력하고 있어서 global이 나오게 된다.

 

함수 안에서 지역변수가 출력이 되고 value값이 지역변수로 선언이 되어있어서 홍길동이라는 값이 나오게 된다.

 

for문을 사용하여 구구단을 출력했습니다. 

 

요번에는 if문을 사용하여 홀수인지 짝수인지 검사하는 프로그램을 만들었습니다.

 

버튼을 클릭 시 상세 설명이 보이고 닫기를 누르면 상세설명이 안 보이게 만들었습니다.

selector을 사용해도 되고 id를 사용하고 있으니 ElementByid도 사용이 가능합니다. 

 

함수를 사용하여 alert로 이벤트를 발생시켰습니다.

 

마우스가 오버가 되면 이벤트가 발생하도록 만들었습니다.

 

위에 코드를 응용하여 만들었습니다. 색이랑 글자 크기를 변경하도록 했습니다.

 

 

place-hold는 임의로 이미지를 생성해주는 사이트인데요

저는 ready와 load를 사용하여  이미지가 출력되게 만들었습니다. 

 

관련글 더보기