Web Development (7)

Web Development (7) : Java Script 기초

1. 표기법

기본

head
  <script src="./main.js"></script>
main.js
  console.log('Anthony');

dash-case(kebab-case)
대쉬기호 사용하는 표기법
단어와 단어 사이 꼬치 (케밥)
html, css에서 많이 사용
“-“를 통해서 띄어쓰기 대신

snake_case
언더바 / 언더스코어 사용
html, css 많이 사용
“_”를 통해서 띄어쓰기 대신

camelCase
첫글자 소문자
다음 단어부터 대문자
JS에서 주로 사용
대문자를 통해서 띄어쓰기 대신

PascalCase
첫단어도 대문자
그 다음 단어도 대문자
JS에서 주로 사용
*new키워드 생성자 함수 개념에서 이것을 통해 함수 이름

Zero-based Numbering
기본적으로 0부터 숫자셈

ex)

let fruits = [‘Apple’, ‘Banana’, ‘Cherry’]
ㅤ
console.log(fruits[0]);  // Apple 
console.log(fruits[1]);  // Banana
console.log(fruits[2]);  // Cherry
ㅤ
console.log(new Date(‘2021-01-30’).getDay());  // 6, 토요일
console.log(new Date(‘2021-01-30’).getDay());  // 0, 일요일
console.log(new Date(‘2021-01-30’).getDay());  // 1, 월요일

주석 (Comments)

// 한 줄 메모
/* 한 줄 메모 */
ㅤ
/**
* 여러 줄 메모
* 여러 줄 메모
*/

ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

2. 데이터 종류 (자료형)

JS는 모두 데이터로 이루어져있고, 데이터로 동작

String (문자 데이터)
큰 따옴표 작은 따옴표 모두 가능

ex)

let myName = “Anthony”;
let email = ‘[email protected]’;
let hello = ‘Hello ${myName}?!’
ㅤ
보관법 : 달러 + 중괄호 
ㅤ
console.log(myName);
console.log(email);
console.log(hello);

Number (숫자 데이터)
정수 및 부동소수점 숫자를 나타냄

ex)

let number = 123;
let opacity = 1.57;
*따옴표 유무 확인!
ㅤ
console.log(number);
console.log(opacity);

Boolean (불리언 데이터)
true/false : 두 가지 값만 있는 논리 데이터

ex)

let checked = true;
let isShow = false;
ㅤ
console.log(checked);
console.log(isShow);

Undefined
값이 할당되지 않은 상태

ex)

let undef;
let obj = { abc: 123};  // 객체데이터
ㅤ
console.log(undef);  // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined

Null
어떤 값이 의도적으로 비어있음을 의미

ex)

let empty = null;
console.log(empty);

Object (객체 데이터)
중괄호를 사용, 여러 데이터를 key:value 형태로 저장 {}

ex)

let user = {
name : ‘ANTHONY’,
age : 85,
isValid: true
};
ㅤ
console.log(user.name);
console.log(user.age);
console.log(user.valid);

Array (배열 데이터)
대괄호를 사용, 여러 데이터를 순차적으로 저장 []

ex)

let fruits = [‘Apple’, ‘Banana’, ‘Cherry’]
ㅤ
console.log(fruits[0]);  // Apple 
console.log(fruits[1]);  // Banana
console.log(fruits[2]);  // Cherry

ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

3. 변수 : 데이터를 저장하고 참조(사용)하는 데이터의 이름

var
권장 X

let
재사용 가능 (값 재할당 가능)

ex)

let a = 2;
let b = 5;
ㅤ
console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
ㅤ
let a =12; //값 재할당 가능
console.log(a); //

const
값(데이터)의 재할당 불가능

대부분 const 사용
재할당 해야하는 경우에는 const를 let으로 고쳐 사용

ex)

const a =12;
console.log(a); //12
ㅤ
a = 999;
console.log(a); // TypeError: Assignment to constant variable

예약어
특별한 의미를 가지고있어, 변수나 함수 이름으로 사용할 수 없는 단어

변수로 할당하면 Syntax Error
에디터의 도움을 받을 수 있기 때문에 외울 필요 X

ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

4. 함수 : 특정 동작(기능)을 수행하는 일부 코드의 집합 (부분)

ex)

function hellofunc() {   // 함수선언
console.log(1234);   // 실행코드
}
ㅤ
hellofunc();            // 함수호출 (1234)
ㅤ
function retrunFunc() {
return 123;
}
ㅤ
let a =returnFunc();  // 호출 (실행)
ㅤ
console.log(a);      // 123
ㅤ
function sum(a, b) {    // a와 b는 매개변수 (Parameters)
return a + b ;
}
ㅤ
let a =sum(1,2);  // 호출 (실행)  // 1,2는 인수 (Arguments)
let b =sum(3,4);  // 호출 (실행)
let c =sum(5,6);  // 호출 (실행)
ㅤ
console.log(a, b, c);      // 3, 7, 11

기명함수 : 이름이 있는 함수 (함수 선언)

funciton hello() {
  console.log(‘Hello~’);
}

무명함수 : 이름이 없는 함수 (함수 표현 = Hoisting)

let world = function() {
  console.log(‘World~’)
}

함수호출

hello();
world();

객체 데이터
(함수를 데이터처럼 활용할수 있음 = 메소드)

const heropy = {
name: ‘HEROPY’
age: 85
getName: function() {
  return this.name;
}
};
ㅤ
const hisName = heropy.getName();
- console.log(hisName);
OR
- console.log(heropy.getName());

ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

5. 조건문 : 조건의 결과에 따라 다른 코드를 실행하는 구문

조건문
조건의 결과에 따라 다른 코드를 실행하는 구문
(if, else)

ex)

let isShow = true;
let checked = false;
ㅤ
if (isShow) {
console.log(‘SHOW!’);
}
ㅤ
if (checked) {                // or else
console.log(‘Checked’);
}

ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

6. DOM API (Document Object Model / Application Programming Interface)

dom = html 속 div span input
api = 웹사이트 동작하기 위해 입력하는 프로그램 명령

ex)

<body>
  <div class="box">Box</div>
</body>
ㅤ
let boxEl = document.querySelector('.box');
console.log(boxEl);

스크립트 읽는 순서때문에 box라는 class 찾을 수 없는 것
-> 해결방법
1) body 안에 script 명시 but 정보는 head 태그 안에 들어가야함
2) defer라는 속성 추구해서 다시 읽을 수 있게

<script defer src="./main.js"></script>

const boxEl = document.querySelector('.box'); // html요소 1개 검색/찾기
boxEl.addEventListener();                       // html요소에 적용할 수 있는 메소드
boxEl.addEventListener(1,2);                    // 인수(arguments)를 추가 가능
boxEl.addEventListener('click', 2);            // 1-이벤트(Event, 상황)
boxEl.addEventListener('click', function() {  // 2-핸들러(Handler, 실행할 함수);
  console.log('Click~');
});
ㅤ
*핸들러를 확인하고 발생한다면 함수 호출

const boxEl = document.querySelector('.box'); // html 요소 검색
ㅤ
//요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); //true
ㅤ
boxEl.classList.remove('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); //false

let boxEl = document.querySelector('.box');
ㅤ
console.log(boxEl);
ㅤ
boxEl.addEventListener('click', function() {
  console.log('Click!');
  boxEl.classList.add('active');
  console.log(
    boxEl.classList.contains('active')
  );
  boxEl.classList.remove('active');
  console.log(
    boxEl.classList.contains('active')
  );
});

<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</body>
ㅤ
//html 요소 (element)모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
ㅤ
//찾은 요소들 반복해서 함수 실행
//익명 함수를 인수로 추가
boxEls.forEach(function() {});  //유사배열

//첫번째 매개변수(boxEl): 반복중인 요소
//두번째 매개변수(index): 반복중인 번호
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');
ㅤ
//Getter, 값을 얻는 용도
console.log(boxEl.textContent); 
ㅤ
//Setter, 값을 지정하는 용도
boxEl.textContent = 'ANTHONY!';
console.log(boxEl.textContent);
ㅤ
Getter : 텍스트로 이루어진 내용만 반환
Setter : 값의 지정 (html 코드를 제어하여 텍스트 값을 바꿀 수 있음)

ㅤ
ㅤ
ㅤ

ㅤ
ㅤ

7. Method Chaining

const a = 'Hello~';
//split : 문자를 인수 기준으로 쪼개서 배열로 반환
//reverse: 배열을 뒤집기
//join: 배열을 인수 기준으로 문자로 병합해 반환
ㅤ
const b = a.split('').reverse().join(''); //메소드 체이닝
ㅤ
console.log(a);
console.log(b);

본 게시글은 fastcampus 박영웅강사 수업을 듣고 개인적으로 정리한 내용임을 밝힘.

Author And Source

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

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

Web Development (7)