TO-DO-LIST
🔳 javascript 역할
🔳 javascript 변수 / 객체 / 함수
🔳 javascript 역할
- 프론트엔드의 동적인 요소 추가
- 사용자 입력에 대한 처리 담당 (이벤트 담당)
- 백엔드와 데이터를 주고 받는다
🔳 javascript 변수와 객체
- 변수 선언 : const, let, var
- 배열 : Array ([ ])
- 객체 활용
ex) user.name
🔳 javascript 변수 var / const / let
변수를 선언하는 이유는 중복되는 요소에 대해 효율적으로 관리하기 위해서 변수를 사용한다.
- var (구식 방법)
*값의 재할당이 가능 (중복된 이름으로 재할당 가능)
console 화면 결과
(1) 아이폰은 200만원
(2) 아이폰은 300만원
- const *한 번 선언 시 변수의 값을 바꿀 수 없음
console 화면 결과
app.js:8 Uncaught SyntaxError: Identifier '아이폰' has already been declared (at app.js:8:7)
- let *변수를 바꿀 수 있음 var와는 다름.
console 화면 결과
(1) 아이폰은 200만원
(2) 아이폰은 300만원
🔳 javascript 배열
* 일종의 상자 박스의 개념이라고 생각하면 된다.
(변수들을 묶을 때 사용)
console 화면 결과
app.js:3 맥북
app.js:4 아이폰
app.js:5 아이패드
app.js:6 에어팟 맥스
🔳 javascript 객체
*추상화 개념을 도입하기 좋은 자료형.
console 화면 결과
닭고기 츄르
console 화면 결과
false
🔳 javascript 함수
| 함수 선언 안할 경우 *함수가 없을 경우 같은 작업을 여러번 해야하는 번거로움이 있음. |
함수 선언 할 경우 *한 번 함수를 선언해놓으면 계속 사용이 가능하여 편리성이 높음. |
|
console.log('애플워치 얼마에요?');
console.log('애플워치는 50만원입니다.');
console.log('애플워치 얼마에요?');
console.log('애플워치는 50만원입니다.');
console.log('애플워치 얼마에요?');
console.log('애플워치는 50만원입니다.');
console.log('애플워치 얼마에요?');
console.log('애플워치는 50만원입니다.');
|
function 애플워치_가격 () {
console.log('애플워치는 50만원입니다.');
}
console.log('애플워치 얼마에요?');
애플워치_가격 ()
console.log('애플워치 얼마에요?');
애플워치_가격 ()
console.log('애플워치 얼마에요?');
애플워치_가격 ()
|
🔳 javascript 화살표 함수
//함수에 대한 같은 표현
function 더하기 () {}
const 더하기 = () => {}
ex)
const 더하기 = (a, b) => {
console.log('가격은', a+b, '입니다.');
}
console.log('애플워치랑 맥북 가격이 얼마에요?');
더하기(50, 200);
| 함수 | 화살표 함수 |
|
const 계산기 = {
더하기 : function(a,b) {
console.log('가격은', a+b, '만원 입니다.');
},
빼기 : function(a,b) {
console.log('가격은', a-b, '만원 입니다.');
},
곱하기 : function(a,b) {
console.log('가격은', a*b, '만원 입니다.');
},
나누기 : function(a,b) {
console.log('가격은', a/b, '만원 입니다.');
}
}
|
const 계산기 = {
더하기 : (a,b) => {
console.log('가격은', a+b, '만원 입니다.');
},
빼기 : (a,b) => {
console.log('가격은', a-b, '만원 입니다.');
},
곱하기 : (a,b) => {
console.log('가격은', a*b, '만원 입니다.');
},
나누기 : (a,b) => {
console.log('가격은', a/b, '만원 입니다.');
}
}
|
console 화면 결과
애플워치랑 맥북 가격이 얼마에요?
app.js:57 가격은 250 입니다.
🧐 알게 된 점 🧐
✔️ html에 썼던 텍스트를 javascript에서 수정이 가능하다
<!-- html에서는 body에 '00:00' 만 기재함 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="time" class="time">00:00</h1>
<script src="app-2.js"></script>
</body>
</html>
const timeElement = document.getElementById('time');
timeElement.style.color = 'orange';
timeElement.innerText = "javascript";
위 html 실행할 경우 보이는 웹페이지
✔️ javascript에서 태그 가져오는 방법
const timeElement = document.getElementById('html요소의 ID');
const timeElement = document.querySelector('#html요소의 ID');
const timeElement = document.querySelector('.html요소의 class');✔️ javascript에서 html의 상단 타이틀명 수정하는 방법
document.title = '🧐'
빵빵이가 귀엽다고 생각하시면!
아래 빵빵이 얼굴 한 번 클릭 해주세요!
(날 구독해달라옹!!!!)
'취미 공부 > Daily' 카테고리의 다른 글
| 2024. 05. 07 (화) Daily Coding - Day09 (0) | 2024.05.07 |
|---|---|
| 2024. 05. 06 (월) 2주차 - Daily Coding - Day08 (0) | 2024.05.06 |
| 2024. 05. 02 (목) 1주차 - Daily Coding - Day04 (0) | 2024.05.02 |
| 2024. 05. 01 (수) 1주차 - Daily Coding - Day03 (0) | 2024.05.01 |
| 2024. 04. 30 (화) 1주차 - Daily Coding - Day02 (0) | 2024.04.30 |
