javascript 정리 1

javascript 기초 데이터 종류 (자료형)

- String : 문자 데이터

ex
const name = "kwonbeomjun";
const email = 'kjun_all@naver.com'
const hello = `Hi ${name}`

console.log(name);   // kjunbeomjun
console.log(email);  // kjun_all@naver.com
console.log(hello);  // Hi kjunbeomjun

 

- Number : 숫자형

ex
const number = 123456789;
const opacity = 0.123456;

console.log(number);   // 123456789
console.log(opacity);  // 0.123456

 

- Boolean : 불린 데이터, 참 거짓

const ok = true;
const no = false;

console.log(ok);   // true
console.log(no);   // false

 

- Undefined

*값이 할당되지 않은

 

- Null

*의도적으로 비어있는 값

 

- Object : 객체데이터

*여러 데이터를 key : value 형태로 저장

ex
const user {
    name: "kwonbeomjun",
    age: 93,
    isValid: true
}

console.log(user.name);      // kwonbeomjun
console.log(user.age);       // 93
console.log(user.isValid);   // true

 

- Array : 배열 데이터

*여러 데이터들을 순서대로 저장한다.

ex
const number = ['one', 'two', 'three'];

console.(number[0]);   // one
console.(number[1]);   // two
console.(numver[2]);   // three

---

변수

- let 재할당 가능

- const 재할당 불가능

---

함수

- function

ex
함수선언
function kjun() {
	console.log("Hi")
}

kjun() // Hi

- return

function returnFunc() {
   return 123;
};

const a = returnFunc();

console.log(a); // 123

 

- 함수선언

function sum(a, b) {
   return a + b
};

const c = sum(2, 3);
const d = sum(3, 7);
const e = sum(2, 12);


console.log (c, d, e); // 5, 10, 14

* a, b는 매개변수(Parameters)

* 2, 3, 7, 12는 인수(Arguments)

 

- 기명 함수 : 이름이 있는 함수

function hello() {
   console.log("hello~");
};

hello() // hello~

 

- 익명 함수 : 이름이 없는 함수

const hello = function() {
   console.log("hello~");
};


hello(); // hello~

---

- 메소드 ex

ex
const kjun = {
   name: "kwonbeomjun",
   age: 93,
   getName: function () {
      return this.name;
   }
};

1)
const hisName = kjun.getName();
console.log(kjun); // kwonbeomjun
2)
console.log(kjun.getName()); // kwonbeomjun

---

조건문

const ok = true;
const no = false;

if(ok) {
   console.log('okay'); // okay
}

if(no) {
   console.log('nope');
}

* false는 부합하지 않기 때문에 console이 나오지 않는다. 실행되지 않음. true만 실행

 

const ok = true;

if(ok) {
   console.log('okay'); // okay
} else {
   console.log('nope');
}                                // ture이기 때문에 okay 실행

----------------------------------------------------------------------
const ok = false;

if(ok) {
   console.log('okay'); 
} else {
   console.log('nope'); // nope
}                                // false이기 때문에 nope 실행

*true면 첫번째 false면 두번째가 실행

---

DOM API (Document Object Model, Application Programming Interface)

ex - html에 box이름을 가진 class가 있을 시


const boxEl = document.querySelector('.box');
// HTML 요소에 1개를 검색하여 찾아서 요소에 할당


boxEl.addEventListener("이벤트에 대한 정보", "실행할 함수(핸들러 Handler)")
// HTML 요소에 이벤트를 추가한다.
// 

ex 
const boxEl = document.querySelector('.box');
boxEl.addEvernListener('clicl', function () {
   console.log('Click~');
});
// box라는 클래스를 찾아서 클릭을 했을때 콘솔창에 Click~를 호출

const boxEl = document.querySelector('.box');

boxEl.classList.add('active'); // box라는 클래스에 'active' 이름을 추가
boxEl.classList.remove('active'); // box라는 클래스에 'active' 이름을 제거

const isContains = boxEl.classList.contains('active'); // box  클래스에 'active'가 포함 되어 있는지
console.log(isContains);
// 클래스에 'active' 이름을 가진 클래스가 있으면 true / 없으면 false

const boxEl = document.querySelector('.box');

console.log(boxEl); 

boxEl.addEventListener('click', function () {
   console.log('Click~'); // console창에 클릭할 때마다 'Click~'이 호출
   boxEl.classList.add('active'); // 클래스 이름에 'active'가 추가 된다.
   console.log(boxEl.classsList.contains('active'); // true 포함되어 있음 (클래스에 'active'이름을 가진 클래스가 포함되어 있는지 확인.)
   boxEl.classList.remove('active'); // 클래스 이름에 'active'를 제거 한다.
   console.log(boxEl.classList.contains('active') // false 포함되어 있지 않음 (클레스에 'active'이름을 가진 클래스가 포함되어 있는지 확인.)
});

add 추가

remove 제거

contains 포함되어 있는지 확인

---

const boxEls = document.querySelectorAll('box'); //HTMl에 'box'라는 이름을 가진 클래스를 모두 찾는다.
console.log(boxEls); // 'box'라는 이름을 가진 클래스 모두 호출

boxEls.forEach(function () {}); // 찾은 요소들을 forEach라는 메소드로 반복해서 함수를 실행

//boxEl 첫 번째 매개변수 : 반복중인 요소 / 이름을 지정
//index 두 번째 매개변수 : 반복중인 번호

boxEls.forEach(function (boxEl, index) { // 반복중인 요소에 반복중인 번호인 매개변수를 넣는다.
   boxEl.classList.add(`order-${index + 1}`); 
   console.log(boxEl, index);
});

forEach 반복해서 함수를 실행

첫번째 반복중인 요소 / 반복중인 번호

- 클래스 이름을 제어할 수 있다.

---

<div class="box">box!!</div>
 
const boxEl = document.querySelector('.box');

Getter, 값을 얻는 용도
console.log(boxEl.textContent); // 'box!!'

Setter, 값을 지정하는 용도
boxEl.textContent = 'byebye';
console.log(boxEl.textContent); // 'byebye'

textContext 요소에 있는 text를 얻거나 지정할 수 있다.