JS 단품

leephoter·2020년 8월 17일
htmljs객체배열
0

JavaScript

목록 보기
1/4
post-thumbnail

JS

js : https://www.youtube.com/playlist?list=PLEOnZ6GeucBW11uFNvzxToKym9Zv74hxh

  • null ≒ undefined : 값이 없음. 애초에 정하지 않은 값은 undefined로 나옴. 빈값을 지정할 땐 null을 사용하자
  • console.log( ) : 일반값 콘솔
  • console.dir( ) : 태그값 콘솔
  • var : 같은 이름의 변수를 한 번 더 선언해도 에러 발생X
  • let : 같은 이름의 변수를 한 번 더 선언하면 에러 발생O. 재선언 불가, 재할당 가능
  • const : 같은 이름의 변수를 한 번 더 선언하면 에러 발생O. 재선언 불가, 재할당 불가
    var : 사용X
    let : 재할당 필요한 경우 사용
    const : 재할당 필요 없는 경우 사용
  • 재귀함수 : 반복문을 함수로 표현

데이터 타입

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
Boolean

  • true
  • false

Null
Undefined
Number
String
Symbol
Object

JS 함수

-https://developer.mozilla.org/ko/ 참고

  • window.open() : 새로운 창 생성 (Chrome)

  • parseInt()

  • String(num) : 숫자 or 숫자값을 문자열로 변환

  • prompt : alert 입력창 (style 적용 불가)

const name = prompt("이름 입력.");
// name = 입력한 값 할당
// 미 입력시 name = null
  • confirm : 확인 창 (style 적용 불가)
const check = confirm("20세 이상입니까?")
// 확인 버튼 >> check = true
// 취소 버튼 >> check = false
let a = 1;
console.log(a + a);
->2
console.log(String(a) + String(a))
->11
  • typeof(a) : 데이터 또는 변수 a의 데이터 타입을 반환
let a = 3;
typeof a;
console.log(typeof a);
-> "number"
-> number

배열

  • array.every(function() {}) : 배열이 조건에 모두 충족하는지 반환값 : boolean
let array = [1, 2, 3, 4]
array.every(function (item) {
    return item < 6
});
->true
array.every(function (item) {
    return item < 4
});
->false
  • array.indexOf(a, b) : array[b]부터 요소 a와 같은 값의 index값을 반환, 없으면 -1 반환
var arr1 = [1, 2, 1, 3, 1];
arr1.**indexOf**(1);
-> 0
arr1.**indexOf**(1,1);
-> 2
arr1.**indexOf**(1,4);
-> 4
  • string.split("a") : 문자열(string)을 ""기준으로 나눈 배열 생성 얕은복사
const str = "one, two";

const str1 = str.split(",");
const str2 = str.split(" ");
const str3 = str.split("");

console.log(str1); -> ["one", " two"] 
console.log(str2); -> ["one,", "two"]
console.log(str3); -> ["o", "n", "e", "," " ", "t", "w", "o"]
  • array.join(a) : 배열의 모든 요소를 a기준, 하나의 문자열로 변환
const array = ['A', 'B', 1];
console.log(array.join());
-> "A,B,1"
console.log(array.join(""));
-> "AB1"
console.log(array.join("-"));
-> "A-B-1"
  • array.push(a) : 배열에 a를 추가하고 배열의 길이를 반환, 깊은복사
let array = [1, 'a'];
console.log(array.push('b', 2));
-> 4
console.log(array);
-> [1, 'a', 'b', 2]
  • array.pop() : 배열에서 마지막 요소를 제거하고 그 요소를 반환, 얕은복사

let array = ['a', 'b', 1];
console.log(array.pop());
-> 1
console.log(array);
-> ['a', 'b']

  • array.unshift(a) : 새로운 요소 a를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환 얕은복사

let array = [1, 'a'];
console.log(array.unshift('b', 0));
-> 4
array
-> ["b", 0, 1, "a"]

  • array.shift() : 배열에서 첫 번째 요소를 제거, 그 요소를 반환 얕은복사

let array = ['a', 1, 2];
console.log(array.shift());
-> "a"
console.log(array);
-> [1, 2]

  • array.reverse() : 배열의 순서를 반전시킴. 얕은복사

let array = ['a', 'b', 1, 2];
array.reverse();
-> [2, 1, 'b', 'a']

  • array.includes(조건) : 조건을 충족시키는 값이 array에 있으면 True. (||를 많이 사용할 때 대체)

(a-b === 0 || a-b === -1 || a-b === 3)
-> [-1, 0, 3].includes(a-b)

  • array.find(function () {}) : 주어진 함수를 만족하는 첫 번째 요소의 값을 찾음

var array = [5,12,8,130,44]
array.find(a => a > 10)
-> 12
(10보다 큰 수를 가장 먼저 만족시키는 값은 12)

  • Array(num) : num개의 빈 공간 생성, undefined도 없는 empty로 생성됨

  • Array.from(array) : array배열 복사 깊은복사

const arr = [1,2,3];
const arr1 = Array.from(arr);
const arr2 = Array.from(arr, x => x + x);
arr === [1,2,3]
arr1 === [1,2,3]
arr2 === [2, 4, 6]
  • array.filter(function (a, b, c) {}) : a는 array의 요소, b는 index, c는 원시배열 깊은복사

const array = [1, 2, 3, 4];
array1.filter(function (each, index, originArray) {
return index < 2;
});
-> [1, 2]

  • array.fill(a, b, c):
    array[b]부터 array[c]전까지 a로 채움.

const array1 = [1, 2, 3, 4, 5];

array1.fill(0, 2, 4);
-> array === [1, 2, 0, 0, 5]
array1.fill(5, 2); array1[2]부터 5로 채움
-> array === [1, 2, 5, 5, 5]
array1.fill(6); 6으로 다 채움
-> array === [6, 6, 6, 6, 6]

  • array.map(function(a, b) {return ?}) : a는 array의 요소, b는 index값 (깊은복사)

const array1 = [-2, -1, 0, 1, 2]
array.map(function(each, index) {
return each * index;
})
-> [-0, -1, 0, 3, 8]

  • array.forEach(function(a, b, c)) : 배열의 각 요소들을 순서대로 실행, (a, b는 array의 요소, c는 원시배열) (깊은복사)

const array = [0, 1, 2];
array.forEach(function (each1, each2, originArray) {
console.log(each1, each2 + 2, originArray)
});
-> 0 2 [0, 1, 2]
1 3 [0, 1, 2]
2 4 [0, 1, 2]

  • array.concat(숫자, text 등등) array에 요소 추가 (깊은복사)

const array = ['a', 1];
array.concat('c', 3);
-> ["a", 1, "c", 3]

  • array.splice(a, b) : array[a]부터 array[b]까지 범위 지정 선택, 원래 배열에서 삭제 (얕은복사)

const array = ['a', 'b', 3, 4];
const array1 = array.splice(1, 2);

console.log(array);
-> ["b", 3]
console.log(array1);
-> ["a", 4]

  • array.slice(a, b) : array[a]부터 array[b]전까지 범위 지정 선택, 원래 배열은 유지 깊은복사

const array = ['a', 'b', 3, 4];
const array1 = array.splice(1, 3);

console.log(array);
-> ["a", "b", 3, 4]
console.log(array1);
-> ["b", 3]

숫자

  • Math.ceil(a) : 숫자 a보다 크거나 같은 숫자 중 가장 작은 정수값 반환 (소수15째 자리까지)

let a = 1.2;
Math.ceil(a);
-> 2

  • Math.random() : 1미만의 랜덤의 숫자

  • Math.abs(a) : 숫자a의 절댓값 반환

객체

  • Object.keys(object); : object의 key값을 배열로 변환
    (숫자인 key는 우선으로 배치됨)
    (key의 숫자는 문자열로 반환)

var obj = {
a: 1,
b: [2, 3],
5: { h: 10 }
}
Object.keys(obj);
-> ["5", "a", "b"];

  • Object.values(object); : object의 value값을 배열로 변환
    (숫자인 key의 value가 우선으로 배치됨)

var obj = {
a: 1,
b: [2, 3],
5: { h: 10 }
}
Object.values(obj);
-> [{ h: 10 }, 1, [2, 3]]

  • Object.entries(object) : object와 object안에 모든 형태를 배열로 변환
    (숫자인 key는 우선으로 배치됨)
    (key의 숫자는 문자열로 반환, value의 숫자는 숫자로 반환)

var obj = {
a: 1,
b: [2, 3],
5: { h: 10 }
}
Object.entries(obj)
->[["5", { h: 10 }], ["a", 1], ["b", [2, 3]]]
0: ["5", { h: 10 }]
1: ["a", 1]
2: ["b", [2, 3]]

JS HTML

  • document.Method : html의 body안에 있는 것들.
    아이디값 : #(IDname), 클래스값 : .(classname) 으로 사용.

(function() {
return console.log(1);
})
같은의미
( () => {
console.log(1)
});

element.addEventListener('click', function () {
alert('누름!');
});

-> element를 클릭할 때마다 '누름!'창 표시
'click' -> 좌클릭
'contextmenu' -> 우클릭

  • **target.appendChild(a) : target요소 안쪽, 가장 뒤에 자식 요소 a 생성

  • **target.prepend(a) : target요소 안쪽, 가장 앞에 자식 요소 a 생성

  • setTimeout(()=>{}a) : 설정된 시간(a) 후 코드 실행 후 종료, a=millisecond

setTimeout(() => {
console.log(1)
}, 3000)
console.log(2)
-> 2
(3초 후)-> 1

  • setInterval(() => {}a) : 설정된 시간(a)마다 코드 반복 실행, a=millisecond

var a = 0;
setInterval(function() {
console.log(a);
return a++;
}, 1000);
(1초 후) -> 1
(2초 후) -> 2
(3초 후) -> 3
---(반복)---

  • clearInterval : setInterval을 정지시키는 기능

var num = 0;
var abc;
function name() {
abc = setInterval(function() {
console.log(num);
}, 1000)}
-> 0
-> 0
--(반복)--

clearInterval(abc);

--(setInterval 정지)--

  • element.classList.add('classname');

--> css의 'classname' class를 element에 추가

  • element.classList.remove('classname');

--> css의 'classname' class를 element에서 제거

  • element.classList.contain('classname');

--> css의 'classname' class가 element에 있는지 확인
(있으면 true, 없으면 false값 반환)

  • document.getElementById('Idname') : Idname과 일치하는 id를 가진 요소를 객체로 반환

  • document.querySelector()

  • document.querySelectorAll()

  • document.createElement('name')

  • document.title

  • Element.innerHTML

JS css 문법

ex)

border-radius : 20%;
--> element.style.borderRadius = '20%';

profile
leephoter
🔥 🧑🏾‍💻 🔥
다음 포스트

JS 세트

0개의 댓글