210901
🎊学習の内容
JavaScriptnull, undefined
// null : 변수 초기화로 명시적으로 빈 값을 변수 안에 할당한 상태
var n = null;
// undefined : 변수를 선언만 한 상태
var u;
// null이 object로 나오는 이유 태생적인 버그
console.log(typeof null);
console.log(typeof undefined);
console.log(10 + null); // null -> 0
console.log(10 + undefined); // NaN (Not a Number)
// 참조타입
// 함수 (function)
// 함수 선언
function sum() {
console.log(10 + 10);
}
// 함수 호출
sum();
// Parameter (매개변수), Argument (인수)
// 매개변수: num1, num2
function sum (num1, num2) {
console.log(num1 + num2);
}
// 인수: 호출시 전달되는 값
sum(10, 20);
sum(100, 50);
// 누락된 매개변수는 undefined
// 매개변수 안에는 모든 데이터 타입이 가능
// return
function sum(num1, num2) {
return num1 + num2;
}
var result = sum(10, 20); // 함수 호출 = 30, result = 30
console.log(result)
function area(hor, ver) {
return hor * ver;
}
var volume = area(10, 20) * 100; // 200
console.log(volume);
// 배열 (Array)
var fruit = ["바나나", "사과", "멜론"];
// 인덱스 (index)
console.log(fruit[0]);
console.log(fruit[2]);
fruit[2] = "수박";
console.log(fruit);
// 배열 주의점
// 가능한 동일한 데이터 타입
var num = [10, 20, 30, "Hello World"];
// 가능한 동일한 성격 데이터
var fruit = ["사과", "배", "바나나", "양상추"];
// 배열 안에 있는 배열 데이터에 접근하는 방법
var score = [
[10, 20, 30],
[100, 200, 300]
];
console.log(score);
console.log(score[1]);
console.log(score[1][2]);
// 객채 (Object)
// 이름, 나이, 스킬, 성별
// key - value = property
var student = {
name: "Bibi",
age: 20,
skills: ["자바스크립트", "HTML", "CSS"]
};
console.log(student);
console.log(student.name);
console.log(student['name']);
console.log(student.skills[1]);
student.age = 100;
console.log(student);
student.gender = "남자";
console.log(student);
var student = {
// 메서드 ( 객체 안쪽에 만들어진 함수 )
sum: function (num1, num2) {
return num1 + num2
}
};
var result = student.sum(10, 20);
console.log(result);
// 원시 타입과 참조 타입 차이점
// 원시 타입
// 원본 데이터를 수정 해도 복사본에는 영향을 주지 않는다.
// 참조 타입
// 수정시 양쪽 모두 영향
// 예약어
// var, typeof, function, null, undefined, false, true, console
// 변수 이름으로예약어 사용하면 안됨, 두개 이상의 명사 조합으로 작성
// yellow, green, pink, #dc143c, rgba(123, 123, 123, 0.5);
var colors = [
'yellow',
'green',
'pink',
'#dc143c',
'rgba(123, 123, 123, 0.5)'
];
var bg = document.getElementById('color-bg');
var btn = document.getElementById('btn');
// 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수
btn.addEventListener('click', function() {
// 0 ~ 4
var random = Math.floor(Math.random() * 5);
// JavaScript는 카멜케이스
bg.style.backgroundColor = colors[random];
})
ボタンをクリックするとcolor-bgの背景色が変更されます
次の内容はgithubにアップロードされます.
学習内容の難点
❌
🎁解決策
❌
🎉学習の心得.
JavaScriptは以前より難しいところが多いので、もっと頑張ります.基礎科目のほかに、さまざまな資料を調べて、コードの作成と実行方法を理解しなければならない.🐴
Reference
この問題について(210901), 我々は、より多くの情報をここで見つけました
https://velog.io/@cptdye77/210901
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
null, undefined
// null : 변수 초기화로 명시적으로 빈 값을 변수 안에 할당한 상태
var n = null;
// undefined : 변수를 선언만 한 상태
var u;
// null이 object로 나오는 이유 태생적인 버그
console.log(typeof null);
console.log(typeof undefined);
console.log(10 + null); // null -> 0
console.log(10 + undefined); // NaN (Not a Number)
// 참조타입
// 함수 (function)
// 함수 선언
function sum() {
console.log(10 + 10);
}
// 함수 호출
sum();
// Parameter (매개변수), Argument (인수)
// 매개변수: num1, num2
function sum (num1, num2) {
console.log(num1 + num2);
}
// 인수: 호출시 전달되는 값
sum(10, 20);
sum(100, 50);
// 누락된 매개변수는 undefined
// 매개변수 안에는 모든 데이터 타입이 가능
// return
function sum(num1, num2) {
return num1 + num2;
}
var result = sum(10, 20); // 함수 호출 = 30, result = 30
console.log(result)
function area(hor, ver) {
return hor * ver;
}
var volume = area(10, 20) * 100; // 200
console.log(volume);
// 배열 (Array)
var fruit = ["바나나", "사과", "멜론"];
// 인덱스 (index)
console.log(fruit[0]);
console.log(fruit[2]);
fruit[2] = "수박";
console.log(fruit);
// 배열 주의점
// 가능한 동일한 데이터 타입
var num = [10, 20, 30, "Hello World"];
// 가능한 동일한 성격 데이터
var fruit = ["사과", "배", "바나나", "양상추"];
// 배열 안에 있는 배열 데이터에 접근하는 방법
var score = [
[10, 20, 30],
[100, 200, 300]
];
console.log(score);
console.log(score[1]);
console.log(score[1][2]);
// 객채 (Object)
// 이름, 나이, 스킬, 성별
// key - value = property
var student = {
name: "Bibi",
age: 20,
skills: ["자바스크립트", "HTML", "CSS"]
};
console.log(student);
console.log(student.name);
console.log(student['name']);
console.log(student.skills[1]);
student.age = 100;
console.log(student);
student.gender = "남자";
console.log(student);
var student = {
// 메서드 ( 객체 안쪽에 만들어진 함수 )
sum: function (num1, num2) {
return num1 + num2
}
};
var result = student.sum(10, 20);
console.log(result);
// 원시 타입과 참조 타입 차이점
// 원시 타입
// 원본 데이터를 수정 해도 복사본에는 영향을 주지 않는다.
// 참조 타입
// 수정시 양쪽 모두 영향
// 예약어
// var, typeof, function, null, undefined, false, true, console
// 변수 이름으로예약어 사용하면 안됨, 두개 이상의 명사 조합으로 작성
// yellow, green, pink, #dc143c, rgba(123, 123, 123, 0.5);
var colors = [
'yellow',
'green',
'pink',
'#dc143c',
'rgba(123, 123, 123, 0.5)'
];
var bg = document.getElementById('color-bg');
var btn = document.getElementById('btn');
// 콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수
btn.addEventListener('click', function() {
// 0 ~ 4
var random = Math.floor(Math.random() * 5);
// JavaScript는 카멜케이스
bg.style.backgroundColor = colors[random];
})
❌
🎁解決策
❌
🎉学習の心得.
JavaScriptは以前より難しいところが多いので、もっと頑張ります.基礎科目のほかに、さまざまな資料を調べて、コードの作成と実行方法を理解しなければならない.🐴
Reference
この問題について(210901), 我々は、より多くの情報をここで見つけました
https://velog.io/@cptdye77/210901
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
JavaScriptは以前より難しいところが多いので、もっと頑張ります.基礎科目のほかに、さまざまな資料を調べて、コードの作成と実行方法を理解しなければならない.🐴
Reference
この問題について(210901), 我々は、より多くの情報をここで見つけました https://velog.io/@cptdye77/210901テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol