Javascript란?
프로그래밍 언어 중 하나로, 브라우저가 알아 들을 수 있는 언어
브라우저를 움직이게 하기 위해 Javascript를 사용
- 역사적으로 Javascript가 웹 브라우저에서 실행되는 스크립트 언어로 사용되어 왔.
웹 페이지의 동적인 기능을 구현하기 위해 Javascript가 개발되고,
많은 웹 개발자들이 Javascript를 사용하여 웹 애플리케이션을 구축하고 유지 관리해왔음.
결국, Javascript가 브라우저한테 명령을 내리는 ‘표준’.
자바스크립트를 통해서 서버도 만들 수 있음.
즉, 자바스크립트 하나로 프론트엔드, 백엔드가 가능.
IOS와 안드로이드 앱은 물론 게임 개발 엔진이나 IoT(사물 인터넷) 애플리케이션 개발도 가능함.
<script>
function hey() {
console.log('안녕하세요')
}
</script>
<body>
<button onclick="hey()">영화 기록하기</button>
</body>
console.log
코딩한 것이 맞게 출력되는지 확인할 수 있게 미리 찍어보는 도구.
변수 = 값을 담는 상자
*변수의 이름을 직관적으로 짓기!
'=' 오른쪽에 값을 왼쪽에 넣어줘라!
EX) a = 2
2를 a라는 변수에 넣기
- let으로 변수 선언
let a = 2
a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!
// 처음 변수를 저장하려면, let을 앞에 붙여주기
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣기.
- 사칙연산 문자열 더하기 가능
let a = 2
let b = 3
console.log(a+b) // 5
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국
리스트 & 딕셔너리
- 리스트 : 순서를 지켜서 가지고 있는 형태
- 컴퓨터는 0부터 센다. 첫 번째 값은 [0]으로 불러온다.
(첫번째 값은 0, 두번째 값은 1, 세번째 값은 2...)
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = ['사과','수박','딸기','감'] // 로 선언 가능
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이 구하기
console.log(a.length) //4
- 딕셔너리: 키(Key)-벨류(Value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = {'name':'영수','age':27} // 로 선언 가능
console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27
- 리스트와 딕셔너리의 조합
[ ]꺾쇠와 Key-Value, 두 가지로 이뤄진 형태의 자료
순서를 표시하거나 정보를 묶을 수 있음.
딕셔너리를 활용해 정보를 묶거나 순서를 나타내기 위해 리스트를 사용하면 깔끔해짐.
추가된 데이터를 .push 함수를 이용해 간단하게 대응
let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15
- 특정 문자를 바꾸고 싶다 - 직접 만들지 말고 구글 검색
// 예를 들면, '나눗셈의나머지'를 구하고 싶은 경우
let a = 20
let b = 7
a % b = 6
- 또, 특정 문자로 문자열을 나누고 싶은 경우
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
Javascript 반복문
let fruits = ['사과','배','감', ... ,'귤']
console.log('사과')
console.log('배')
console.log('감')
...
console.log('귤')
// 이렇게 100개 씩 노가다할 필요가...?fruits.forEach((a) => {
console.log(a)
})
// fruits 의 요소를 하나씩 확인하는데 이름은 a
// a는 b,c,zzz,fruit 어떤 걸로 해도 상관 없음
- 리스트로 반복
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
반복문을 쓰면 리스트 안에 들어 있는 값의 개수만큼 값이 찍힘.
Javascript 조건문
- 20살보다 크면 성인입니다 작으면 청소년입니다 출력
if (조건) {
// 조건에 맞다면~
} else {
// ~가 아니라면~
}
- 반복문 + 조건문
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
let ages = [15, 30, 28, 7, 40,13];
ages.forEach(a => {
if (a < 20) {
console.log('청소년입니다')
} else {
console.log('성인입니다')
}
});
변수_let으로 지정, 값을 담는 것_console.log(), 자료형, 꾸러미
자료형 → 리스트 ['수수', 3, 'a'], 딕셔너리 let a_dict = {'name' : 'Ann', 'age' : '30'}
조건문&반복문 합쳐서 쓰기.
Javascript 움직이는 법
// 함수는 같은 동작을 반복하는 것.
function hey() {
}
- 함수 만들어 두기
<script><\script> 안에 자바스크립트 작성
function hey(){
alert('안녕!');
}
- 버튼에 함수를 연결하기
<button class="form-button" type="button" onclick="hey()">영화 기록하기</button>
1. 버튼을 클릭하면
2. hey를 불러라!
3. alert(’안녕’)을 실행해라!
프로그래밍에서 함수는 정해진 일을 반복함.
function hey()라는 규칙으로 hey라는 함수를 만들기.
alert(’안녕’)이라는 작업을 원할 때마다 반복적으로 수행.
Javascript로 HTML 조작
- document는 웹문서
- . 은 ~의 라는 의미
- getElementById → html 요소 가져와 ById에 의해
- 바꾸고 싶은 아이디 즉 셀렉터를 넣고, 바꿀 내용 적기!
- 프로그래밍은 컴퓨터에게 일 시키는 것! 정확히 명령해야 한다.
function hey(){
alert('안녕!');
document.getElementById('hello').style.color = 'red';
}
ＴＩＬ 10월 1일
'ＴＩＬ (ToDay I LearNEd) > JavaScript' 카테고리의 다른 글
| javascript 오류, git clone으로 프로젝트 내려받기 / Live Server 설치 및 실행 (html 파일 실행 시 script나 css 적용이 되지 않을 때) (0) | 2024.10.02 |
|---|---|
| jQuery란? Javascript 라이브러리! .append() 활용하기 (0) | 2024.10.01 |
| 웹 페이지 만들기 실습한 코드_스파르타플릭스 (0) | 2024.09.26 |
| 꾸밀 때 자주 쓰는 CSS 모음 (부트스트랩 버튼 바로가기) (0) | 2024.09.05 |
| HTML의 작동원리 (visual studio code 단축키) (0) | 2024.09.02 |