티스토리 뷰
자바스크립트란?
- 웹 페이지에 움직임을 불어넣기 위해 만들어진 프로그래밍 언어
- 브라우저한테 명령을 내리는 '표준'
기초문법 1
1. 개발자 도구 사용하기
<script>
function 임의의 이름값() {
console.log('안녕하세요')
}
</script>
<body>
<button onclick="임의의 이름값()">버튼 이름</button>
</body>- 간단한 웹페이지 만들기 - 부트스트랩 가져다 쓰기 에서 만들었던 웹사이트 html에 적용해 보면,
<script>
function hey(){
console.log('안녕하세요')
}
<a class="nav-link active" aria-current="page" href="#" onclick="hey()">홈</a>>'홈'버튼을 눌렀을 때 onclick 이벤트가 실행되면서 hey(함수의 이름. 아무거나 해도 된다)함수가 적용된다.
웹사이트에 들어가 마우스 우클릭>검사>콘솔에서 새로고침을 해보면
이렇게 콘솔에 잘 뜬다.
* 콘솔이란 : 코딩한 것이 맞게 출력되는지 확인하기 위해 개발자들이 미리 찍어보는 도구.
2. 변수 & 기본 연산
-변수 : 값을 담는 상자. 프로그래밍 언어에서는 '='가 같다의 개념이 아니라, 오른쪽에 있는 것을 왼쪽에 넣어달란 얘기.
(a=2)
> 2(오른쪽)값을 a(왼쪽,변수)에 넣는다.
-let으로 변수를 선언한다.
let a = 2 // a는 숫자
console.log(a); // 출력 : 2
a = 'Bob' // a는 문자열로 변경
console.log(a)' // 출력 : Bob.
//문자열은 작은 따옴표로 감싸준다.
//처음 변수를 저장하려면, let을 앞에 붙여준다.
//한번 선언했으면, 다시 선언하지 않고 값을 넣는다.> 위 코드에서 a는 숫자가 되었다가 다시 bob이란 문자열로 변경된다. 자바스크립트는 이와 같이 변수의 데이터 작업을 실행 중에 변경할 수 있다. 이를 동적 타입 언어라고 한다.
-사칙연산, 문자열 더하기가 기본적으로 가능하다.
let a = 2
let b = 3
console.log(a+b) // 5
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국
기초문법 2
1. 리스트&딕셔너리
1-1 리스트 : 순서를 지켜서 가지고 있는 형태.
* 리스트에 들어있는 첫 번째 값은 [0]으로 불러온다. (0,1,2,3...으로 0부터 셈)
let a_list = [] //리스트를 선언. 변수 이름(a_list)은 아무렇게나 가능.
//또는,
let a =['사과','수박','딸기','감'] //로 선언 가능.
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이 구하기
console.log(a.length) // 4
1-2 딕셔너리 : 키(Key)-밸류(Value) 값의 묶음.
let a_dict = {} // 딕셔너리 선언. 변수 이름(a_dict)은 아무렇게나 가능.
//또는,
let a = {'name':'영수','age':27} // 로 선언 가능.
console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27-리스트와 딕셔너리의 [,{를 구별을 잘 하자..
왜 그러냐고 물어보면 나도 모른다.
1-3 리스트와 딕셔너리의 조합
let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) // 영수. a리스트의 0번째 name의 값.
console.log(a[1]['age']) // 15. a리스트의 1번째 age의 값.
기초문법 3
1. 반복문과 조건문
1-1 반복문
- 리스트 자료형의 데이터를 일일이 뽑기엔 무리가 있기 때문에 forEach를 써서 간단하게 뽑아낸다.
let fruits = ['사과','배','감', ... ,'귤']
console.log('사과')
console.log('배')
console.log('감')
...
console.log('귤')
// 하나하나 다 쓸 수 없으므로 개발자들의 손목을 지켜주기 위해 반복문이라는 것이 존재한다.
//forEach를 쓰면,
fruits.forEach((a) => {
console.log(a)
})
//fruits 의 요소를 하나씩 확인하는데, 이름은 a(아무거나 상관없음) 라고 할 거다.-예시
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})라고 명령어를 입력해주면, console에
이렇게 잘 나온다. 반복문은 쓰면 리스트 안에 들어 있는 값의 개수만큼 찍힌다.
1-2 조건문
-조건에 맞춰 실행을 다르게 해준다.
if(조건) {
// 조건에 맞다면~
} else {
// ~가 아니라면~
}
-예시 : 20살보다 크면 '성인입니다', 작으면 '청소년입니다' 를 출력하려면?
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
- 반복문+조건문을 합칠 때
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=>{
if (a>20){
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
'스파르타 > 강의 내용 정리' 카테고리의 다른 글
| JQuery 연습하기 (1) (0) | 2024.07.04 |
|---|---|
| JQuery 사용하기 - 사용법 (0) | 2024.07.04 |
| 자바스크립트 활용 문법(DOM) (0) | 2024.07.04 |
| 간단한 웹페이지 만들기 - 부트스트랩 가져다 쓰기 (0) | 2024.07.02 |
| 로그인 페이지 만드는 방법(html, css 활용) (0) | 2024.07.01 |