3주차 과정은 Javascript로 만드는 나만의 사진 포트폴리오 만들기 과정이다.
앞서 배웠던 html과 css가 정적인 요소라면 javascript는 동적인 요소이다. html, css가 만든 그대로의 화면이라면 javascript는 사용자가 원하는 대로 사이트의 수정이 가능하다.
javascript를 사용하는 방법은 <script>태그 안에 작성하거나 css파일을 별도로 만든 것처럼 확장자면 js로 별도 파일을 만들어 적용할 수도 있다.
웹페이지에서 ctrl+shift+i , Console탭에서 작성해서 적용해 볼 수 있다.
Javascript 자료형과 변수
데이터에는 타입이 있다. 데이터가 어떤 타입인지 확인하는 방법은 console 탭에서 데이터 앞에 typeof를 입력하면 확인가능하다.
- 변수 : 데이터를 저장하는 주머니. 같은 데이터를 여러 번 사용하는 경우 유용하다.
변수를 선언할 때는 var를 사용한다. var 변수명
변수명을 정할 때는 데이터와 연관되는 이름으로 정해주는 것이 좋다.
Javascript Boolean 자료형과 조건문
Boolean은 true 와 false 값만 표현가능.
! 부정연산자를 비롯해 비교연산자, and, or 연산자에 대해 공부했다.
- 문자열일 경우 뒷 순서에 오는 글자가 크기가 더 크다.
- true는 false보다 크다.
조건문은 if문, else문, else if문에 대해 공부했다.
- if (조건) { 실행문 }
- else문은 if문의 조건이 사실이 아닐 때 실행.
- else if문은 조건이 여러개인 경우 사용한다.
삼항연산자를 이용해 한 문장으로도 표현가능하다.
- = 조건 ? true일때 값 : false일때 값
Javascript 배열과 반복문
- 배열 (array)
배열(array)는 대괄호 안에 쉼표로 구분한다. [ , , , ]
첫번째 입력한 데이터는 1번째가 아닌 0번째로 인식한다.
배열 안에 변수를 넣어서 배열을 생성할 수 있다.
데이터 타입에 상관없이 넣을 수 있고 또 다른 배열도 배열 안에 넣을 수 있다.
배열에 어떤 값이 올지 모르는 경우 또는 프로그램적으로 값을 알기 위해 .length를 사용한다.
(배열의 길이를 모르는 상태에서 마지막 요소를 구할 때 .length -1 을 사용한다.)
특정 값이 배열의 몇 번째인지 확인하기 위해 indexOf 함수를 사용한다. 배열.indexOf()
- 배열 요소 변경
push 함수 : 요소 삽입 배열.push()
splice 함수 : 요소 제거 배열.splice(#, n) #번째 위치로부터 n개 제거
- 반복문
for문 : 특정 조건이 성립하는 동안 같은 동작 반복수행 for (초기화 ; 조건 ; 작업 후 처리) break를 사용하면 중단된다.
while문 : 특정 조건을 만족하는 동안 반복수행 while ( 조건 ) { 실행값 }
함수와 이벤트
- 함수(function)
같은 명령문을 여러 번 반복해야 하는 경우 번거롭기 때문에 변수처럼 주머니에 담아서 처리하는 것이 함수이다.
function 함수명 ( ) { }
함수명도 다른 사람이 파악하기 쉽도록 "동사형+넣을내용" 이런식으로 작성해주는 것이 좋다고 한다.
함수도 변수로 저장할 수 있다. var 함수명 = function ( ) { }
( ) 괄호 안에 넣어 주는 값을 인자라고 하는데 인자는 여러 개 설정이 가능하다. (너무 많으면 다루기 어렵기 때문에 보통 서너개까지 작성)
- 이벤트 (어떤 일이 발생하는 시점)
버튼 클릭 시 이벤트 onclick : <button onclick=" ">
페이지로드 시 이벤트 onload : <body onload = " ">
script를 body에 넣어도 될 것 같은데 head에 넣어야 하는 이유가 페이지로드 이벤트를 실행하며 파악가능했다.
head에 넣었을 때와 body에 넣었을 때의 차이가 궁금해 실습코치님께 별도로 문의를 했는데 이와 관련 자세한 블로그글을 링크로 남겨주셔서 감사했다. ㅠㅠ
아오 근데 변수이름이랑 함수이름처럼 이름 정하는거 왜이렇게 어렵나요..... 영어를 공부해야하나......
'[패스트캠퍼스] K-디지털 기초역량훈련 프로그래밍 첫걸음 시작하기' 카테고리의 다른 글
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 5주차 - 2022. 9. 6. 21:04 작성글 (0) | 2022.12.08 |
|---|---|
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 4주차 - 2022. 8. 30. 21:48 작성글 (0) | 2022.12.08 |
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 2주차 - 2022. 8. 16. 22:13 작성글 (0) | 2022.12.08 |
| [패스트캠퍼스] 프로그래밍 기초 강의 학습후기 1주차 -2022. 8. 9. 17:48 작성글 (0) | 2022.12.08 |
| [패스트캠퍼스] 프로그래밍 기초 강의 시작 - 2022. 8. 9. 17:40 작성글 (0) | 2022.12.08 |
