1). JavaScript의 정의
- 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어.
- 동적기능, 동적처리, 이벤트 처리, 슬라이드 메뉴 등 다양한 역할을 한다.
2). JavaScript의 작성 위치에 따른 차이.
1. Script 테그가 head에 위치한 경우
- Script 테그가 보이면 HTML 파싱을 멈추고 스크립트 파일을 실행한다.
- 하지만 파일의 양이나, 크기가 커지면 급격히 느려진다. 또한 DOM 요소에 접근을 시도할 때 문제가 발생될 여지가 있다.
2. Script 테그가 body 내 끝 부분에 위치한 경우
- 패이지가 완성된 이후, 스크립트 파일을 읽어간다.
- 장점 : HTML 컨텐츠에 접근하기 수월하다.
- 단점 : JavaScript에 의존적인 페이지인 경우 사용자가 정상적인 대단히 높다. 페이지를 보기 전까지 오랫 시간을 필요로 한다.
3) 내장방식 VS 링크 방식
내장방식
- 간단하게 만들 수 있음.
- 특정 페이지에서만 작동하는 기능일 경우 내장 방식으로만 따로 구현 가능
링크 방식
- JS 코드의 양이 많아지면 파일로 관리하는 게 편함.
- 같은 기능을 다른 페이지에서 사용하고 싶을 떄 JS 파일 링크만 사용가능
- 유지 보수 용이성이 높다.
#. DOM 요소가 생성되기 전에 접근하면?
뒷편에 배울 DOM 요소를 직접적으로 조작하여 핸들러를 조작하는 등의 행위가 불가능하다.
또한 스크립트의 용량이 크다면 페이지가 깜빡거리는 현상이 일어난다.
스크립트 실행 전까지 사용자는 스크립트 아래의 콘텐츠를 볼 수 없으며, 페이지를 정상적으로 이용할 수 없다는 문제를 가지고 있음.
그래서 defer 랑 async라는 옵션이 나왔다.
#### 추가적으로 검색해본 것####
defer 옵션이란?
defer는 스크립트를 백그라운드에서 다운로드 하겠다는 의미이다.
HTML 요소를 읽어오는 과정을 중단시키지 않으면서, defer 속성이 있는 스크립트의 다운로드가 끝나더라도 HTML에 문서를 읽는 과정이 남아있다면 그 과정을 마칠때까지 스크립트를 실행하지 않는다. 그래서 DOM 요소가 생성되지 마자, 스크립트가 실행된다.
옵션을 사용하지 않은 스크립트 처럼 순서대로 실행된다. 그리고 해당 옵션은 링크 방식에만 유효하며, 내장 방식에선 옵션을 사용할 수 없다.
async 옵션이란?
async 옵션은 페이지의 작업과 스크립트 관련 작업을 완전히 독립시켜 동작시킨다.
해당 옵션 역시, 백그라운드에서 다운로드가 진행된다는 점은 동일하나, 스크립트가 다운로드가 된 즉시 실행된다.
다운로드 즉시 실행되기 때문에 DOMContentLoaded 이벤트 이전의 실행을 보장하지 않는다. 이후에 실행될 여지가 존재한다. 즉, 실행되는 순서를 보장하지 않는다.
#, 개발 언어의 표기법
Camel Case
- 카멜의 뜻은 낙타이다. 한마디로 낙타의 혹처럼 생겼다고 해당 명칭이 붙어졌다. 처음에는 소문자로 시작해서 2번째 단어부터는 대문자로 시작하는 형태이다. 참고로 조합하는 단어는 보통 명사를 사용하나, 메소드의 첫번째 시작하는 단어는 동사로 시작하는 것을 권정한다.
Pascal Case
- 처음 시작하는 문장부터 대문자로 표기하는 방식.
Snake case
-모든 단어를 소문자로 표기하되, _ 표기로 단어를 연결하는 방식.
Kebab cass or hash case
- 모든 단어를 소문자로 표기하되, - 표기로 단어를 연결하는 방식.
JavaScript의 변수
var
- 선언 단계와 초기화가 동시에 이뤄지며 아무것도 할당하지 않으면 자동으로 undefined가 할당됨.
- 중복 선언 가능, 재선언 가능
- 하지만 중간에 같은 이름의 변수를 다시 선언할 경우, 기존의 변수가 덮어쓰기 당하여, 기존 정보에 접근할 수 없게된다는 문제를 가지고 있음.
let
변수 중복 선언이 불가능하지만, 재할당은 가능.
- var와 동일하게 선언을 하지 않으면 자동으로 undefined로 표시된다.
const
- 초반에 선언할 때 반드시 초기화를 동시에 진행한다.
- 재선언도 재할당도 불가능하기에 주로 화살표 함수나 상수에서 많이 사용한다.
변수의 생성규칙
1. 변수 이름으로는 문자 /첫 숫자 / $ / _ 만 사용 가능
2. 첫 글자에서 숫자를 사용할 수 없다.
3. 컴퓨터에서 사용되는 예약어도 사용할 수 없다. 예약어란 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어를 말한다.
4. 변수 이름은 읽기 쉽도록 작성되어야 한다.
5. 상수는 대문자로 표현하여 보다 직관적으로 상수임을 나타냄.
언어의 타입에 따른 분류
강한 언어
타입 검사를 통과하지 못하면 실행되지 않음.
명확하게 String이면 String, int 면 int 확실한 타입 종류를 필요로 한다.
약한 언어.
런타임에서 타임 오류를 만나더라도 실행을 막지 않는다.
타입이 여러 종류인 값들이 상관없이 지정된다. 즉, 타입에 대한 폭이 넓다.
문자열 관련 메소드
length : 문자열의 길이를 반환
toUpperCase(), toLowerCase() : 문자열 전체를 대문자, 혹은 소문자로 변경
indexOf("") : 해당 문자가 있는지 확인하고, 있다면 인덱스를 반환함.
slice(startIdx[,endIdx]) : start 부터 end-1 까지 슬라이싱, 빼옴(?) 매개변수로
음수값도 가능
replace(문자열1, 문자열2) : 가장 먼저 보이는 문자열1을 문자열2로 변경
replaceAll(문자열1, 문자열2) : 문자열1을 전부찾아서 문자열 2로 바꿔줌
repeat(n) : 문자열에 대해 n번 반복
trim() : 문자열의 양끝 공백 없애기
split() : 매개변수로 들어온 문자열을 기준으로 str을 쪼개서 배열로 저장
배열 관련 메소드
push() : 베열의 끝에 새로운 배열 요소를 추가함.
pop() : 배열 끝 요소 제거
shift, unshift : 베열을 앞에 해당 속성값의 가지는 변수 추가/ 삭제
includes : 배열에 해당 요소가 있는지 확인하고, 있으면 True, 없으면 false가 반환됨.
arr.length : 배열의 길이 반환
arr.indexOf() : 문자열에서의 indexOf와 마찬가지로 매개변수에 해당하는 배열
의 인덱스를 받아옴. 단, 매개변수로 문자열만 넣을 수 있는 것은 아님!
arr.reverse(); 배열 순서 뒤집어서 반환
arr.join(); join 안의 문자열 기준으로 문자열로 병합
자바 스크립트에서 사용 가능한 for 문
.
for(let i = 0; i < 7; i++) : for문의 가장 기본적인 형태.
for(let Number of numbers) : 배열의 요소 하나 하나에 직접적으로 접근함.
forEach(배열의 요소, 인덱스, 배열) : return 조건을 계속해서 반복함.
filter : return 조건을 만족하지 않은 녀석들은 모두 거름.
실습문제(javascript 기초) - 1
<!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>
<script>
let hummen = {
name: "하모수",
age: 29,
phoneNumber: "010-xxxx-1459",
email: "yyy1459@naber.com",
mew: function () {
return "환영합니다.";
},
};
console.log(hummen);
console.log(hummen["name"]);
console.log(hummen["age"]);
console.log(hummen.phoneNumber);
console.log(hummen.email);
console.log(
"안녕하세요. " +
hummen.name +
"님의 나이는 " +
hummen["age"] +
"이고, 전화번호는 " +
hummen.phoneNumber +
"이고, 이메일은 " +
hummen.email +
"이 맞으시죠?"
);
console.log(hummen.mew);
</script>
<body></body>
</html>
실습문제(javascript) - 2
<!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>
<script>
let user = 123;
console.log(
"'" + typeof user + "' isn't '" + typeof "cccc" + "' data type"
);
console.log(
"typeof 를 array나 null에 사용하면 " +
typeof null +
" 결과를 얻을 수 있습니다."
);
</script>
<body></body>
</html>
실습 문제(javascript 기초) - 3
<!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>
<script>
let mathScore = "77";
let engScore = "88";
let avgScore = (Number(mathScore) + Number(engScore)) / 2;
console.log(`${mathScore} 와 ${engScore}의 평균점수는 ${avgScore} 입니다.`);
</script>
<body></body>
</html>
실습 문제(javascript 기초) - 4
<!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>
<script>
let color = new Array(
"red",
"yellow",
"green",
"blue",
"pink",
"black",
"skyblue"
);
console.log(color[2]);
color.push("olive");
console.log(color);
console.log(color.indexOf("black")); //black이라는 요소의 인덱스 반환
const reverse = [...color].reverse();
//원본 데이터 값을 훼손하기에 배열을 산개해서 따로 출력해야 함.
console.log(reverse);
//console.log(출력할 값)
//conso.log("fd"); // error
//console.log("fdfd");
//해당 값은 출력되지 않음.
</script>
<style></style>
<body></body>
</html>
실습문제(if, for) - 1
<!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>
<script>
function multifly(num1, num2) {
if (!isNaN(num1 * num2)) {
return num1 * num2;
} else {
console.log("해당 값은 숫자가 아니므로 오류");
}
}
let square = (num1) => {
return num1 * num1;
};
//console.log(multifly("ㅁ", 7));
console.log(multifly(3, 7));
console.log(multifly(2, 2));
console.log(square(4));
console.log(square(11));
console.log(square(5));
</script>
<body></body>
</html>
실습문제(if, for) - 2
<!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>
<script>
let num1 = prompt("첫번째 숫자를 입력해주세요");
let num2 = prompt("두번째 숫자를 입력해주세요");
function add(num1, num2) {
alert(Number(num1) + Number(num2));
}
function mix(num1, num2) {
alert(Number(num1) * Number(num2));
}
function sub(num1, num2) {
alert(Number(num1) - Number(num2));
}
function divide(num1, num2) {
alert(Number(num1) / Number(num2));
}
//const sub = () => alert(Number(num1)+Number(num2));
//화살표 함수 사용시 함수 코드가 한줄이면 중괄호 생략 가능
//prompt는 문자열로 입력 받음, 빼기, 나누기, 곱하기는 자바스크립트에선 연산이 없어 자동 형변환됨.
</script>
<body>
<button onclick="add(num1,num2)">더하기</button>
<button onclick="sub(num1,num2)">빼기</button>
<button onclick="divide(num1,num2)">나누기</button>
<button onclick="mix(num1,num2)">곱하기</button>1
</body>
</html>
실습문제(if, for) - 3
<!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>
<script>
//반복문 문제 1
// for (let i = 0; i <= 10000; i++) {
// if (i % 13 == 0 && i % 2 == 1) {
// console.log(i);
// }
// }
//반복문 문제 1 : prompt
// let count = Number(prompt("숫자를 입력해주세요?"));
// for (let i = 0; i <= count; i++) {
// if (i % 13 == 0 && i % 2 == 1) {
// console.log(i);
// }
// }
// 1 -2
for (let i = 0; i < 10000; i += 13) {
if (i & (2 == 1)) {
console.log(i);
}
}
//반복문 문제 2 : 구구단
// for (let i = 1; i <= 9; i++) {
// console.log("----", i, "단====");
// for (let j = 0; j <= 9; j++) {
// console.log(`${i} * ${j} = ${i * j}`);
// }
// }
let count = 0;
for (let i = 0; i <= 100; i++) {
if (i % 2 == 0 || i % 5 == 0) {
console.log(`${i}`);
count += i;
}
}
console.log("해당 숫자들의 총합은 ", count, "입니다");
</script>
<body></body>
</html>
실습문제(if, for) - 4
<!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>
<script>
let now = new Date().getHours();
now >= 12
? console.log("현재 시각은 오후입니다.")
: console.log("현재 시각은 오전입니다.");
let age = 15;
if (age > 20) {
console.log("성인");
} else if (age >= 17 && age < 20) {
console.log("고등학생");
} else if (age >= 14 && age < 17) {
console.log("중학생");
} else if (age >= 8 && age < 14) {
console.log(초등학생);
} else {
console.log("유아");
}
</script>
<body></body>
</html>
실습 문제(if, for) - 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>배열 반복문</title>
</head>
<script>
let fruits = ["apple", "banana", "melon", "grape"];
console.log("for basic");
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
console.log("for of");
for (let fruit of fruits) {
console.log(fruit);
}
console.log("forEach");
// forEach(value: 하나하나의 요소, index: 인덱스 번호, array: 반복하는 배열 그 자체) => {})
fruits.forEach((fruit, index, arr) => {
console.log("fruit : ", fruit);
console.log("index :", index); //생략 가능
console.log("arr :", arr); //생략 가능
});
console.log("filter");
let filterResult = fruits.filter((fruit) => {
return fruit.length > 5;
});
console.log("filterResult : ", filterResult);
let filterResult2 = fruits.filter((fruit) => fruit.length > 5); // 동일한 형태
console.log("filterResult : ", filterResult);
</script>
<body></body>
</html>
실습 문제(if, for) - 6
<!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>
<script>
let count = [];
for (let i = 1; i <= 100; i++) {
count.push(i);
}
console.log(count);
let sum = 0;
for (let i = 0; i < count.length; i++) {
sum += count[i];
}
console.log("모든 수의 합은 : ", sum);
let sum2 = 0;
for (let s of count) {
sum2 += s;
}
console.log("모든 수의 합은 : ", sum2);
let sum3 = 0;
count.forEach((s, index) => (sum3 += s));
console.log("모든 수의 합은 : ", sum3);
let sum4 = count.reduce((acc, curr) => acc + curr);
console.log("모든 수의 합은 :", sum4);
</script>
<body></body>
</html>
실습 문제(if, for) - 7
<!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>
<script>
let fruit1 = [
"사과",
"딸기",
"파인애플",
"수박",
"참외",
"오랜지",
"자두",
"망고",
];
let fruit2 = ["수박", "사과", "참외", "오랜지", "파인애플", "망고"];
const sum = [];
const dff = [];
let fruit3 = fruit1.filter((fruit) => fruit2.includes(fruit));
console.log(fruit3);
let fruits5 = fruit1.filter((fruit) => fruit2.includes(fruit) == false);
let fruits4 = fruit2.filter((fruit) => fruit3.includes(fruit) == false);
let fruits6 = [...fruits4, ...fruits5];
console.log(fruits6);
for (let fruit of fruit1) {
fruit2.includes(fruit) ? sum.push(fruit) : dff.push(fruit);
}
console.log(sum);
console.log(dff);
//reduce랑
</script>
<body></body>
</html>
'KDT 코딩온 개발 14기 수강일기' 카테고리의 다른 글
| KDT 포스코X코딩온 웹 과정 14기 11일 javascript의 DOM 객체란? (0) | 2024.10.24 |
|---|---|
| KDT 포스코X코딩온 웹 과정 14기 11일 - javascript의 표준 객체 (1) | 2024.10.24 |
| KDT 포스코X코딩온 웹 과정 14기 9일 - 반응형 웹 (0) | 2024.09.20 |
| KDT 포스코X코딩온 웹 과정 14기 7일~8일 - CSS 특수효과 (1) | 2024.09.12 |
| KDT 포스코X코딩온 웹 과정 14기 7일- 배경 (0) | 2024.09.11 |