함수란?
1. 반복되는 스크립트를 저장했다가 필요할때마다 호출해서 사용
2. 스크립트를 모듈화해서 저장을 할 수 있기 때문에 관리가 편하다.
선언적 함수
함수를 선언하였지만 이를 호출하지 않았기 때문에 브라우저를 불러와도 아무것도 나와 있지 않는다. 호출하는 명령어를 입력하면 이때 브라우저에 값을 입력한다.
만약 함수를 선언하기 전에 함수를 호출하면 원래는 인터프린터 언어이기 때문에 순서에 맞게 진행해야 하지만 값은 나와 있다. 호이스팅이라는 기능으로 단순한 구조는 상관없지만 구조가 길어질 경우 원치않는 자바스크립트가 들어갈 수 있기 때문에 순서대로 기입하는것이 좋다. 표면적으로는 문제가 없어 보이지만 콘솔에서 확인해보면 오류가 있음을 알 수 있다.
익명함수
변수에 함수를 저장하여서 선언하고 도큐멘트에 불러오면 이렇게 출력 되는것을 확인할 수 있다. 익명 함수도 인터프린터 방식에 따라 식을 기입해야 적용이 되고 익명 함수는 포이스팅이 되지 않는다. 그렇기 때문에 반드시 언어에 맞게 선언을 진행해야 한다.
지역 변수는 함수내에 저장하는 변수로 myFun 함수에 선언하고 이후 sum 이라는 변수안에 선을 하고 사용해도 불러와 지지 않는다 이는 myFun에만 적용이 되기 때문에 출력되지 않는것이다. let 변수의 특성상 같은 이름을 여러개를 쓸수 없는데 지역변수에서 쓴 이름을 다른 지역변수로 선언해도 오류가 발생하지 않고, 전역변수로 적용해도 오류로 적용 되지 않는다. 오류를 줄이기 위해서는 지역변수가 가장 안정적이라고 할 수가 있다.
주의할 점은 선언할때 변수를 함께 선언해야 한다는 점인데, 1번 사진은 let을 함께 선언하여서 지역함수로 해당 함수 안에서만 선언되고 호출되어 중괄호 바깥으로는 적용되지 않지만 let 변수와 함께 선언하지 않고 그냥 함수내에서 선언하게 되면 전역변수가 되어서 중괄호 바깥으로 나가 중첩이 될 가능성이 생기는것이다.
지난 시간 복습
구조
스타일 속성
헤드 태그에 스크립트를 적용하기 위해서는 그냥 선언하지 말고 window에서 전체적으로 읽어주도록 지정해야한다.
각각 이미지에 이벤트를 설정하여서 이미지 버튼을 누르면 해당 이미지가 나오는것 처럼 만들어 줄 수 있다.
(이전 자동차 스크립트와 동일)
조건문 (if)
조건식의 값이 참(true)인지 아니면 거짓(false)인지에 따라 실행문의 제어가 결정된다. (하나의 객체에 여러가지 속성을 적용할 때 쓰인다.)
기본 식은 if()로 안에 비교연산자를 넣어서 값을 적용할 조건을 넣어준다. a==b 는 a와 b가 같다면 도큐멘트에 true라고 출력하라는 식을 넣으라는 뜻이고 a!=b 는 a와 b가 다르다면 도큐멘트에 true라고 출력하라는 식을 넣으라는 뜻이다.
이때 각각 값에 문자데이터와 숫자데이터를 입력해주었을때 같다는 식으로 나오는데 엄연히 말해선 둘은 데이터 자체가 다르기 때문에 같다고 나와선 안된다.
이때 a===b로 지정하여 주면 좀더 명확하게 값이 나오게 된다. 이렇게 되면 if 식에 맞지 않기 때문에 아무값도 나오지 않으므로 if 뒤에 else{ }를 지정하여서 값이 맞지 않을때 출력될 식을 넣어주면 계산되서 값이 맞지 않음을 나타내준다.
20살 이상으로 값을 지정하고 싶을때는 age>20 이 아니라 age>=20으로 넣어야 이상으로 지정된다. 만약 age가 20이라면 출력 값이 나오도록 조건문을 넣어놨기 때문에 도큐멘트에 출력이 된다.
만약 age 값이 19여서 20보다 작다면 입력값이 맞지 않을때의 출력값을 넣지 않았기 때문에 아무것도 나오지 않는다.
이때 사용할 수 있는것이 else{ }로 아니라면 같은 조건문이다. 여기에 출력값을 넣으면 아닐경우에 대한 값도 나오게 된다.
다르게 응용해 볼 수도 있는데, 선언한 변수에 prompt를 넣고 입력할 수 있는 창을 넣어주고 입력된 값에따라 출력값이 나오게 된다.
이미지들을 버튼를 누르면서 하나씩 보이도록 할 것인데. 이미지 영역을 넣고 span태그로 버튼을 만들어서 전체적인 구조를 설정해준다.
span의 공통 클래스인 btn을 querySelectorAll로 선택하여 변수로 선언해주고 이미지는 pic로 선언한다.
그리고 버튼에 이벤트를 넣어서 Next를 누르면 이미지가 다음 이미지로 바뀌게 된다. 하지만 이미지를 하나를 지정해 선언했기 때문에 다른 이미지로 넘어가진 않는다.
이를 위해서는 계산식을 넣어주는데, 계속 변하도록 하기 위해서 변수를 넣어주고 i로 선언하여 수가 변하도록 숫자대신에 변수i를 넣어준다. 하지만 이것이 실행되지 않는다. 왜냐하면 현재 방식은 해당 함수 안에서만 반복되기 때문에 값이 2밖에 나올수 없기 때문이다 그렇기 때문에 지역변수가 아니라 전역변수로 지정하여야 한다.
전역 변수로 지정하게 되면 그림이 넘어가지만 이미지가 한정적이기 때문에 그 이상의 값이 되면 이미지가 사라진다. 이떄 필요한것이 조건문이다.
이런식으로 만약 i가 5보다 커지게 되면 i가 1이 된다는 식을 넣어주게 되면 이미지가 반복적으로 나오게 된다.
반대로 가는 버튼은 i가 1보다 값이 작아진다면 다시 값이 5로 가도록 설정하여 이미지들이 반복되게 할 수 있다.
응용버전
다시 눌러도 그래도 눌럿을때 색이 사라졌다가 다시 누르면 나오도록 만들어 주고 싶다.
이렇게 조건식을 넣어서 사용자의 행동이 실행에 이어지도록 넣어준다. 하지만 if안에 들어갈 조건식 (a===b 같은) 을 넣을 수 없다.
이때 새로운 값에대한 변수를 선언해 넣어주면 되는데 "사각형에 색상이 없다" 같은 명령어는 없기 때문에 true 와 false로 진행 할 수 있다. bl에 true 라는 값을 넣어주고 if에 bl의 값이 true 라면 이라는 식을 넣어 주고 이럴때 배경의 색이 넣어지도록 설정하고 그에 반대라면 색이 사라지도록 식을 넣었다. 하지만 한번 누르게 되면 다시 색이 사라지진 않는다. 이는 변수 값을 재할당하지 않아서 그렇다.
그렇기 때문에 변수 값을 재할당하고 textContent를 넣어 현재 들어가 잇는 변수 값을 보이도록 하여 값이 변하는것이 보이도록 한다.
그리고 반대 값에도 마찬가지고 변수 값을 재할당하면 누를때 마다 색이 바뀌도록 한다.
응용 예제
구조
스타일 속성
스크립트
'기록 > 수업정리_javascr' 카테고리의 다른 글
| scrollTo() (0) | 2024.07.31 |
|---|---|
| FixedNavigation, 상대좌표값, 절대좌표값 (0) | 2024.07.29 |
| javascript_3 (0) | 2024.07.17 |
| Javascript_2 (0) | 2024.07.16 |
| javascript_1 (2) | 2024.07.15 |
