[오늘 배운 내용]
1. 자바스크립트란?
- 코드를 작성하는 데 사용되고 서버로 반환되는 언어
- 브라우저에 의해 실행될 수 있는 유일한 언어
- 사용자가 보는 페이지에 쌍방향 소통 기능을 추가함으로써 로딩된 페이지를 실제적으로 바꿈
2.기본 자바 스크립트 작업
- <script></script> 사이에 자바스크립트 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Introduction</title>
<script>
</script>
</head>
<body>
</body>
</html>- alert : 알림
<script>
alert('Alert Message')
alert(32)
</script>- 결과
- 순서대로 알림이 뜬다
3. 변수 컨테이너 소개
- let으로 값 설정 시작
- 값 재설정 가능
- 변수명에 -, :, /, 공백 사용 불가
- 변수명: camelcase 방법을 주로 따름
<script>
let greetingText = 'Alert Message' <!--변수 첫 선언-->
alert(greetingText)
greetingText = 32 <!--변수 재정의-->
alert(32)
</script>- 결과
- 순서대로 알림이 뜬다
- 문장 끝에 세미콜론을 사용할 수 있다
4. js 파일과 html파일 연결
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Introduction</title>
<script src="app.js"></script> <!--외부 js파일(app.js)과 연결-->
</head>
<body>
5. 배열
let hobbies = ['sports', 'cooking', 'reading'];
alert(hobbies);- 결과
let hobbies = ['sports', 'cooking', 'reading'];
alert(hobbies[0]);
6. 객체
- 모든 값이 속성으로 저장되는 관련 값의 그룹
- 여러개의 변수를 선언할 때 아래와 같이 작성할 수 있다
let jobtTitle = 'Developer';
let jobPlace = 'New York';
let jobSalary = 50000;- 객체 데이터를 그룹화하면 한 번에 선언할 수 있다.
let job = {
title: 'Developer',
place: 'New York',
salary: 50000
};
7. 객체의 사용
- 그룹명.요소명 형태로 사용한다
let job = {
title: 'Developer',
place: 'New York',
salary: 50000};
alert(job.title);
8. 함수
- function키워드 활용
- function 함수이름 ( 매개변수 ) { 작업 코드 }
- 함수 코드 작성만으로는 함수가 실행되지 않는다
- 함수이름(); 을 작성해야 함수가 실행됨
- 함수 사용 전
let age = 26;
let adultYears = age - 18;
alert(adultYears);
age = 45;
adultYears = age - 18;
alert(adultYears);- 함수 사용 후
let age = 26;
let adultYears;
function calculateAdultYears(){
adultYears = age - 18;
}
calculateAdultYears();
alert(adultYears);
age = 45;
calculateAdultYears();
alert(adultYears);- 같은 결과로 실행된다
- 함수 안에서 처음 선언된 변수는 함수 내에서만 사용 가능하다
9. 함수에서 값 반환
- function 내에서 return 을 사용해 값을 반환할 수 있다
- return의 사용을 통해 함수의 재사용성이 높아졌다
let age = 26;
function calculateAdultYears(){
return age - 18;
}
let totalAdultYears = calculateAdultYears();
alert(totalAdultYears);
10. 함수 매개변수
- function 함수이름 ( 매개변수 ) { 작업 코드 }
let age = 26;
function calculateAdultYears(userAge){
return userAge - 18;
}
let totalAdultYears = calculateAdultYears(age);
alert(totalAdultYears);
11. 메서드 소개
let person={
name: 'Max',//Property
greet() { //Method
alert('Hello!');
}
};
person.greet();
12. console.log
- 정보를 출력하기 위해 사용
- alert보다 편리~
let goals = ['html', 'css', 'js'];
function getListItem(array, arrayIndex){
let arrayElement = array[arrayIndex];
return arrayElement;
}
let firstGoal = getListItem(goals, 0);
console.log(firstGoal);
13. 수학 연산 & 다양한 종류의 값 작업
console.log(10+4);
console.log(10-4);
console.log(10*4);
console.log(10/4);
console.log(10%4);
let result = 10;
result++;
console.log(result);
result--;
console.log(result);
result+=5;
console.log(result);
14. 문자열 작업 수행
console.log('java'+'script');
console.log('javascript'-'java');
let userName = 'Max';
console.log(userName.length);
console.log(userName.toUpperCase());
15. 기본 배열 작업
let hobbies =['Sports', 'Cooking'];
console.log(hobbies.length);
[2. 오늘 잘한 점]
팀스터디 내용을 잘 마무리지어서 발표까지 끝냈다. 강의도 시간 안에 다 듣고 TIL까지 썼다!! 자바스크립트는 html이나 css에 비해 그렇게까지 익숙하지는 않은데, 그래서 더 잘 집중해서 들었던 것 같다
[3. 개선해야할 점]
남는 시간을 더 잘 활용했으면 좋겠다. 핸드폰을 보지 말고 차라리 책을 읽든지 해!!!
'부트캠프' 카테고리의 다른 글
| [TIL] 유데미X사람인 취업 부트캠프 10일차 / javascript의 if~else문과 반복문 (1) | 2023.12.27 |
|---|---|
| [TIL] 유데미X사람인 취업 부트캠프 9일차 / javascript, DOM을 이용한 작업 (1) | 2023.12.26 |
| [TIL] 유데미X사람인 취업 부트캠프 7일차 / css변수 및 전환, html 양식 요소 (1) | 2023.12.21 |
| [TIL] 유데미X사람인 취업 부트캠프 6일차 / 반응형 웹 제작, 유닛과 미디어 쿼리 (0) | 2023.12.20 |
| [TIL] 유데미X사람인 취업 부트캠프 5일차 / css grid, UTF-8 유니코드 (1) | 2023.12.19 |
