환경

Atom
패키지: emmet, open-in-browser

출력방법

document.getElementById('one').innerHTML

1.document: 이 문서 전체에서,
2. getElementById('one'): 아이디('')를 가져올 것,
3. innerHTML: HTML을 안에 쓸 것

적은대로: document.write('');

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
 
    document.write('write');
 
  </script>
</body>
</html>

경고창: window.alert('');

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
 
    window.alert('경고창');

  </script>
</body>
</html>

개발자 도구 콘솔에 : console.log('');

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Document</title>
</head>
<body>
  <script>
    console.log('개발자 도구 콘솔');
  </script>
</body>
</html>

주석

<!DOCTYPE html>
<html lang="ko">
<head>
<!-- HTML주석 -->
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* CSS 주석 */
  </style>
</head>
<body>
  <script>
    // JS주석
  </script>
</body>
</html>

변수

숫자:''

문자열: ""

boolean: true or fale

Array: 여러가지 자료형 저장

function: 함수

숫자 연산

사칙연산

제곱: x**y

중복 생략: x*=y

x=y : x = xy

증감 ++, 삭감--

비교연산

값과 변수 타입이 모두 같음: x===y

x=3;, y='3';
인 경우, x == y는 참이지만(값만 같으면 참), x===y는 거짓

함수 : function f(x,y){}

String 내장함수

글자수 : .length

글자의 위치 숫자로 : .indexOf()

x번째 부터 y번째까지 자르기 : .slice(x,y)

글자 a를 b로 바꾸기: .replace('a','b')

대문자로, 소문자로 : .toUpperCase();

숫자 내장함수

소수점 n번째 까지 출력 : .toFixed(n)

문자열로 변환: .toString()

Math

최댓값: Math.max(a,b,c)

Date

배열[]

let 변수명 = [];

인덱스 번호로 뽑기: 배열명[n]

배열명.slice(n,m)(n부터(m까지))

배열 끝 요소 빼기 pop()

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.

배열 끝 삽입 push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

배열명.join('')

배열의 모든 요소를 연결해 하나의 문자열로 만들고
''안에 있는 문자를 각 요소 사이에 넣어준다.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

let 배열명 = { object:{a:'a',b:'b';}}

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics

쌍괄호: 반드시 쌍괄호 안의 object까지 입력해야 접근이 가능하다.
괄호 하나(age, married): ['age']``['married']로 접근 가능

element 반환함수

단일 element 반환함수

getElementsById()

querySelector()

복수 element 반환함수

getElementsByClassName(''): 클래스명이 겹치는 모든

querySelectorAll(): 정확히 이름이 같은 클래스

// getElementsByClassName only selects elements that have both given classes
var allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
var result = "document.getElementsByClassName('orange juice')";
for (var i=0; i < allOrangeJuiceByClass.length; i++) {
    result += "\n  " + allOrangeJuiceByClass[i].textContent;
}

// querySelector only selects full complete matches
var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (var i=0; i < allOrangeJuiceQuery.length; i++) {
    result += "\n  " + allOrangeJuiceQuery[i].textContent;
}

document.getElementById("resultArea").value = result;

버튼에 함수걸고 아이디를 통해 글자 바꾸기

💔jQuery

jQuery CDN 사용하기

https://releases.jquery.com/
uncompressed, <script> 위에 붙이기

jQuery 개념

jQuery 는
DOM manipulation, AJAX calls, Event handling 을 간소화하는
JavaScript Library 이다.

jQuery 문법

문법 상세 페이지

작성법: $(selector).action() : to assign an element(s) to an event. To explain it in detail, $(selector) will call jQuery to select selector element(s), and assign it to an event API called .action().

$(document).ready(function(){
  alert("Hello World!");
  $("#blackBox").hide();
});

위의 코드는 아래 두 코드 처럼 표현도 가능하다.
1.

window.onload = function() {
  alert("Hello World!");
  document.getElementById("blackBox").style.display = "none";
};

window.addEventListener("load", () => {
  alert("Hello World!");
  document.getElementById("blackBox").style.display = "none";
});

필터

💔JSON

데이터 자동 생성

https://json-generator.com/

Author And Source

이 문제에 관하여(JavaScript 개념정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kji306301/JavaScript-개념정리

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JavaScript 개념정리

환경