[2022-08-19] TIL - 17일차
2022. 8. 20. 12:29ㆍGolfzon tech/TIL
😁 Today I Learned
- javascript 문법
- 연산자, 조건문, 반복문 , 배열
연산자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
console.log("Hello operator..");
// 1. 산술 + - * / % **
let a = 3; let b = 6;
console.log("a = " + a);
console.log("b = " + b);
console.log("a + b : " + a + b);
console.log("b - a : " + (b - a));
console.log("a * b : " +a * b);
console.log("a / b : " +a / b);
console.log("a % b : " +a % b);
console.log("a ** b : " +a ** b);
console.log("------------------");
// 2. 할당, 대입, 복합할당 = += -= &= ===
a = b;
console.log("a = b : " +a);
a += b;
console.log("a += b : " +a);
a -= b;
console.log("a -= b : " +a);
a &= b;
console.log("a &= b : " +a);
console.log("a === b : " +(a===b));
console.log("------------------");
// 3. 비트연산 & , | , ^
console.log("a & b : " +a&b);
console.log("a | b : " +a|b);
console.log("a ^ b : " +a&b);
console.log("------------------");
// 4. 비교 == != > < >= <=
if(a==b){ // a= 6, b=6
console.log("a==b");
}
if(a!=b){
console.log("a!=b");
}
if(a>b){
console.log("a>b");
}
if(a<b){
console.log("a<b");
}
if(a>=b){
console.log("a>=b");
}
if(a<=b){
console.log("a<=b");
}
console.log("------------------");
// 5. 증감연산 ++ --
a++; console.log(a); // 7
b--; console.log(b); // 5
console.log("------------------");
// 6. 논리연산 && ||
let c = 10;
if(a!=b && a!=c){
console.log("&& 체크완료");
}
if(a!=b || a!=c){
console.log("|| 체크완료");
}
console.log("------------------");
console.log(true && true);
console.log(false && true);
console.log(0 && true);
console.log("------------------");
console.log(true || true);
console.log(false || true);
console.log(false || false);
console.log(false || "kim");
console.log(0 || 1);
console.log(undefined || null);
console.log(undefined || "hello");
console.log("------------------");
let name = "yang";
let x = name || "lee";
console.log("x : " + x);
function test(params){
params = params || "default";
console.log("aaa : "+params);
}
test(111);
function test2(params){
params = params || [1,2,3];
console.log("bbb : " + params[0]);
}
test2([11,22,33]);
console.log("------------------");
// 7. 삼항연산 ? :
let check = (a>b) ? "참" : "거짓";
console.log("삼항연산자 : " + check);
console.log("------------------");
</script>
</head>
<body>
<h1>8월 19일 금요일</h1>
</body>
</html>- 자바 문법과 비슷하다.
- ** 연산자는 제곱을 나타낸다.
- && 는 좌측에 false 가 보이면 바로 거짓.
- || 는 좌측에 false가 있더라도 우측 값을 봐야한다.
- 자바와 다르게 꼭 boolean 타입이 오지 않아도 된다. (좌측에 false , 0 , undefined 이 올경우 우측값이 출력된다. 단, 우측이 그 외의 값일 경우)
조건문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
let avg = 99.7;
let grade = "A";
if (avg >= 90) {
grade = "A";
} else if (avg >= 80) {
grade = "B";
} else if (avg >= 70) {
grade = "C";
} else {
grade = "D";
}
console.log("avg : " + avg);
console.log("grade : " + grade);
// querySelectorAll 은 클래스에 쓰는애다.
let p_avg = document.querySelector("#p_avg");
// console.log(p_avg);
// Text를 넣을거면 innerText , 태그가 들어가면 innerHTML
p_avg.innerHTML = "<b>avg</b> : " + avg;
let p_grade = document.querySelector("#p_grade");
// console.log(p_grade);
p_grade.innerText = "grade : " + grade;
};
</script>
</head>
<body>
<div>
<p id="p_avg">if ~ else</p>
<p id="p_grade">if ~ else</p>
</div>
</body>
</html>- document.querySelector("#p_avg") 형태로 <body> 태그 안의 태그들의 id 값을 넣어주어 사용한다. (비슷한 형태로 getElementId 가 있다.)
- 브라우저에 script 값을 띄우기 위해 innerText 와 innerHTML 이 있다. 텍스트만 넣기위해서는 innerText 를 사용하고 HTML 태그를 넣기 위해서는 innerHTML 이용한다.
반복문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3:nth-child(odd) {
color: blue;
}
</style>
<script>
console.log("Hello for");
window.onload = function name(params) {
// let txt = "";
// 가로로 0-9 찍기
let p_for = document.querySelector("#p_for");
for (let i = 0; i < 10; i++) {
p_for.innerText += i;
// txt +=i;
}
// 세로로 0-9 찍기
let p_for2 = document.querySelector("#p_for2");
for (let i = 0; i < 10; i++) {
p_for2.innerHTML += "<h3>"+ i +"</h3>";
}
}
</script>
</head>
<body>
<h3>for</h3>
<p id="p_for"> for..</p>
<div id="p_for2">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
console.log("Hello for3");
window.onload = function () {
let arr = [11, 22, 33, 44, 55];
for (const key in arr) {
// console.log(arr[key]);
let t_for = document.querySelector("#table_for");
t_for.innerHTML += "<tr>" +
"<td>" + arr[key] + "</td>" +
"</tr>";
}
// let obj = { name: "kim", age: 29 };
// let str = "<tr>";
// for (const key in obj) {
// console.log(obj[key]);
// let t_obj = document.querySelector("#t_obj");
// str += "<td>" + obj[key] + "</td>";
// }
// str += "</tr>";
// t_obj.innerHTML += str;
let objs = [{ name: "kim1", age: 29 },
{ name: "kim2", age: 30 },
{ name: "kim3", age: 31 }
];
let str1 = "";
for (const key in objs) {
str1 = "<tr>";
for (const data in objs[key]) {
let t_objs = document.querySelector("#t_objs");
str1 += "<td>" + objs[key][data] + "</td>";
}
str1 += "</tr>";
t_objs.innerHTML += str1;
}
}
</script>
</head>
<body>
<h3>for</h3>
<table id="table_for">
</table>
<table>
<thead>
<tr>
<th>NUM</th>
<th>AGE</th>
</tr>
</thead>
<tbody id="t_obj">
<tr>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>NUM</th>
<th>AGE</th>
</tr>
</thead>
<tbody id="t_objs">
</tbody>
</table>
</body>
</html>
- for in 반복문은 자바에서 for each 문과 비슷하다.
- 이중 for문을 작성할 때는 자바와 다르다. (위 코드로 예를 들면 안쪽에 있는 포문 참조타입을 넣을 때 objects[key] 로 설정해야 한다.)
- 이중 for 문 데이터를 뽑을 때는 objects[key][data] 형식으로 뽑아야 한다.
배열
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
console.log("Hello array");
// 1.[]
let arr = [];
console.log(arr);
arr = [5];
console.log(arr);
arr = [5,6];
console.log(arr);
arr = [11,22,33,"kim","lee",[44,55,66],function (){},{name:"kim",age:33}];
console.log(arr);
//2.Array
let arr2 = new Array();
console.log(arr);
// 수 하나만 넣으면 길이로 이식
arr2 = new Array(5);
console.log(arr2);
// 수 두개 넣으면 데이터로 인식
arr2 = new Array(5,6);
console.log(arr2);
// 3. 특징
// 길이가 정해져있지 않다. -- 길이를 초과한 인덱스 접근 가능.
// 길이가 확정적이지 않다. -- 데이터 추가 삭제가 용이하다.
let arr3 = [];
console.log("arr3.length : " + arr3.length);
console.log(arr3); // 에러 안남.
console.log(arr3[5]); // 에러 안남.
arr3[5] = 555;
console.log(arr3[5]); // 결과값 나옴
arr3.push(111); // 길이가 인덱스 6부터 넣는다.
arr3.push(122);
arr3.push(133);
arr3.push(144);
console.log(arr3); // 에러 안남.
console.log(arr3.pop());
console.log(arr3.pop());
console.log(arr3.pop());
console.log(arr3); // 에러 안남.
arr3.unshift(99); // 0부터 채움
arr3.unshift(88); //
arr3.unshift(77); //
console.log(arr3); // 에러 안남.
console.log(arr3.shift()); // 0 부터 뺌
console.log(arr3); // 에러 안남.
console.log(arr3[1]); // 에러 안남.
console.log("-----------------");
arr3.forEach(x => {
console.log(x);
});
// 자바스크립트도 일급함수를 지원한다.
console.log("-----------------");
arr3.forEach(function(x) {
console.log(x);
});
console.log("-----------------");
for (let i = 0; i < arr3.length; i++) {
console.log(arr3[i]);
}
</script>
</head>
<body>
<h3> array </h3>
</body>
</html>
- 자바스크립트 배열은 자바와 다르게 같은 타입별로 들어가지 않아도 된다.
- Array 객체를 생성해서 사용할 때 소괄호 안에 수 한 개를 넣으면 길이로 인식하고 두 개 이상을 넣으면 두개 다 데이터로 인식한다.
- 자바와 달리 자바스크립트 배열은 길이를 따로 주어지지 않아도 몇번째 인덱스에 값을 넣어도 에러가 나지않는다. 값이 주어지지 않은 상태에서 출력을 하면 undefined가 나올뿐..
- 일반 배열에 push , pop 이 가능하며 arr[5] 에 데이터를 넣어주었다면 push 했을 때 arr[6]부터 들어간다.
- pop 을하면 스택처럼 제일 먼저 들어간 데이터가 pop 된다.
- unshift는 인덱스 0부터 채운다.
- shift 는 인덱스 0부터 뺀다.
- 자바스크립트도 일급함수를 지원한다. ex ) 자바 람다함수
728x90
'Golfzon tech > TIL' 카테고리의 다른 글
| [2022-08-24] TIL - 19일차 (2) | 2022.08.24 |
|---|---|
| [2022-08-22] TIL - 18일차 (0) | 2022.08.22 |
| [2022-08-18] TIL - 16일차 (0) | 2022.08.18 |
| [2022-08-17] TIL - 15일차 (0) | 2022.08.17 |
| [2022-08-16] TIL - 14일차 (0) | 2022.08.16 |