728x90
반응형
SMALL
<head> ~ </head>태그 사이에
<script src="./main.js"></script>위 표기를 추가하여 html과 javascript 문서를 연결함
표기법
- dash-case(kebab-case) : HTML & CSS 단어 표기법
ex) the-quick-brown-fox-jumps-over-the-lazy-dog
- snake_case : HTML & CSS 단어 표기법
ex) the_quick_brown_fox_jumps_over_the_lazy_dog
- camelCase : JavaScript 표기법 - 거의 대부분 경우
ex) theQuickBrownFoxJumpsOverTheLazyDog
- ParcelCase : JavaScript 표기법 ( new 생성자 함수) - 특수한 경우
ex) TheQuickBrownFoxJumpsOverTheLazyDog
Zero-based Numbering : 0 기반 번호 매기기!
특수한 경우를 제외하고 0부터 숫자를 시작합니다.
주석 - //한 줄 메모 , // → ctrl + /
데이터 종류(자료형)
String : 문자 데이터 / “” 따옴표를 사용함
let myName = "HEROPY";
let email = 'thesecon@gmail.com';
let hello = 'Hello ${myName}?!' -> 보간법, 기존에 작성한 myName을
Hello HEROPY?!로 출력하도록 추가하는 것
console.log(myName); //HEROPY
console.log(email); // thesecon@gmail.com
console.log(hello); // Hello HEROPY?!
Number : 숫자 데이터 / 정수 및 부동소수점 숫자를 나타냄
let number = 123; <- 정수
let opacity = 1.57; <- 부동소수점
console.log(number); //123
console.log(opacity; // 1.57
단, ""(따옴표)로 묶여져 있는 데이터는 무조건 문자 데이터임
ex) "123" <- 문자 데이터
Boolean : 불린 데이터 / true, false 2 가지 값밖에 없는 논리 데이터
let checked = true;
let isShow = false;
console.log(checked); // true
console.log(isShow); // false
Undefined : 값이 할당되지 않은 상태를 나타냄
let undef;
let obj = {abc: 123};
console.log(undef); //undefined
console.log(obj.abc); //123 <- obj 내부 abc의 데이터 값 123을 출력
console.log(obj.xyz); //undefined <- obj 내부에 xyz가 존재하지
않으므로 undefined를 콘솔에 출력
Null : 어떤 값이 의도적으로 비어있음을 의미
let empty = null;
console.log(empty); // null
Object : 객체 데이터 / 여러 데이터를 Key:Value 형태로 저장함
{} ← 여기에 데이터들의 집합을 저장함
let user {
//Key: Value.
name: 'HEROPY',
age: 85,
isValid: true
};
console.log(user.name); //HEROPY <- user의 내부 name 데이터를 출력
console.log(user.age); //85
console.log(user.isValid); //true
Array : 배열 데이터 / 여러 데이터를 순차적으로 저장함
[] ← 여기에 데이터들의 집합을 저장함
let fruits = ['Apple','Banana','Cherry'];
console.log(fruits[0]); //Apple
console.log(fruits[1]); //Banana
console.log(fruits[2]); //Cherry
-> ZeroBasedNumbering에 따라서 처음부터 0,1,2 순서대로 출력됨
변수 : 데이터를 저장하고 참조(사용)하는 데이터의 이름
→ var(사용하지 않는게 좋음), let, const
let - 재사용이 가능 / 변수 선언
let a = 2;
let b = 5;
console.log(a+b); // 7
console.log(a-b); // -3
console.log(a*b); // 10
console.log(a/b); // 0.4
let - 값(데이터)의 재할당 가능!
let a = 12;
console.log(a); //12
a = 999;
console.log(a); //999
const - 값(데이터)의 재할당 불가!
const a = 12;
console.log(a); //12
a = 999;
console.log(a); //TypeError: Assignment to constant variable
예약어
특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
let this = 'Hello!'; //SyntaxError
let if = 123; // SyntaxError
let break = true; //SyntaxError
함수
특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
// 함수 선언
function helloFunc() {
// 실행 코드 <- 함수의 명령어들
console.log(1234);
}
// 함수 호출
helloFunc(); //1234
함수 반환
function returnFunc() {
return 123;
}
let a = returnFunc();
console.log(a); //123//함수 선언!
function sum(a,b) { // a와 b는 매개변수
return a + b;
}
//재사용!
let a = sum(1,2); // 1과 2는 인수
let b = sum(7,12);
let c = sum(2,4);
console.log(a,b,c); // 3, 19, 6
실행 순서 - 위 -> 중간 -> 아래// 기명(이름이 있는) 함수
// 함수 선언!
function hello() {
console.log('Hello~');
}
// 익명(이름이 없는) 함수
// 함수 표현!
let world = function () {
console.log('World~');
}
// 함수 호출!
hello(); // Hello~
world(); // World~// 객체 데이터
const heropy = {
name: 'HEROPY',
age: 85,
//메소드
getName: function() {
return this.name;
}
};
const hisName = heropy.getName();
console.log(hisName); // HEROPY
혹은
console.log(heropy.getName()); // HEROPY
-> 위 2가지 경우 중 1의 경우만 골라서 사용해도 됨!
조건문
조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문
→ if, else
let isShow = true;
let checked = false;
if(isShow) {
cosole.log('Show'); // Show!
}
if(checked) {
console.log('Checked!');
}let isShow = true;
if(isShow) {
console.log('Show!')
} else {
console.log('Hide?');
}
-> 사용자가 지정한 조건에 맞게 출력이 되는 것 true값을
false값으로 변경하면 그에 따라 조건도 달라짐
DOM API
Document Object Model, Application Programming Interface
→ div, span, input(Document Object Model)
html 문서에 javascript 문서를 연결할 때, <script>가 <body> 태그 안에 들어 있는지 와 defer 요소를 체크할 것
//HTML 요소(Element) 1개 검색/찾기
const boxEL = document.querySelector('.box');
//HTML 요소에 적용할 수 있는 메소드
boxEl.addEventListener();
// 인수를 추가 가능!
boxEl.addEventListener(1,2);
// 1- 이벤트(Event, 상황)
boxEl.addEventListener('click',2);
// 2- 핸들러(실행할 함수)
boxEl.adddEventListener('click', function () {
console.log('Click~!');
});
//HTML 요소 검색/찾기
const boxEl = document.querySelector('.box');
//요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); //true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); //false// HTML 요소 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
//찾은 요소들 반복해서 함수 실행!
//익명 함수를 인수로 추가!
boxEls.forEach(function () {});
// 첫 번째 매개변수: 반복 중인 요소
// 두 번째 매개변수: 반복 중인 번호
boxEls.forEach(function (boxEl, index) {});
//출력!
boxEls.forEach(function (boxEl, index) {
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});const boxEl = document.querySelector('.box');
box 요소 중 제일 처음 값을 적용
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!
//Setter, 값을 지정하는 용도
boxEl.textContent = 'HEROPY?!';
console.log(boxEl.textContent); // HEROPY?!
메소드 체이닝 - 메소드를 마치 체인모양처럼 연결시켜 표시하는 것
const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환.
// reverse: 배열을 뒤집기.
// join: 배열을 인수 기준으로 문자로 병합해 반환.
const b = a.split('').reverse().join(''); // 메소드 체이닝....
console.log(a); // Hello~
console.log(b); // ~olleH <- 메소드 체이닝 입력 형태
가져온 js파일을 html 문서 분석 이후에 실행하도록 지시하는 html 속성은? defer
728x90
반응형
LIST