이전에 올렸던 글 중 js 기초 정리

hyeojung·2022년 4월 12일

HTML과 JS의 만남

script 태그

HTML의 태그 중 script 태그 안에 Javascript 코드를 쓸 수 있다.
HTML로 작성한 코드와 다른 점은, Javascript로 쓴 코드는 동적이라는 것이다.
웹페이지에 글씨를 출력할 땐 document.write();를 쓴다.

이벤트

: 웹브라우저 내에서 일어나는 사건

<input type="button" value="hi" onclick="alert('hi')">

onclick의 속성값으로는 반드시 JS 코드가 와야 한다.
onclick 속성의 속성값은 사용자가 클릭을 했을 때 JS의 문법에 따라 해석되어 웹브라우저에서 출력된다.

<input type="text" onchange="alert('changed')">

입력창에서 사용자가 키보드를 이용해 무언가 입력하여 내용이 바뀌는 사건이 일어났을 때
이외에도 다양한 이벤트들이 있다. ex) onkeydown, onmouseover 등

콘솔

웹 브라우저에서 오른쪽 클릭 > 검사 > Console
(Elements에서 Esc를 누르면 Console 창을 함께 볼 수 있다.)
파일을 만들지 않고 코드를 웹페이지에서 즉석으로 실행할 수 있다.
콘솔에서 실행시키는 JS는 웹페이지를 대상으로 실행된다.

alert('Hello, World!'.length)

위 코드를 콘솔에 입력해 실행시키면 바로 경고창이 뜨고 문자열의 길이를 알려준다.

JS의 데이터 타입과 연산

데이터 타입: Boolean, Null, Undefined, Number, String, Symbol
연산자와 메소드
- Number 타입 - 산술 연산자
- String 타입
  - .length 연산자
  - str.toUpperCase(): 문자열의 모든 문자를 대문자로 변환
  - str.indexOf('hi'): 문자열 내에서 hi 문자열이 앞에서부터 몇 번째 문자인지 알려줌
  - .trim(): 공백을 없애줌
  - '1'+'1'을 하면 결과는 '11'이 됨
변수와 대입 연산자
- var(variable)을 변수 이름 앞에 붙여주면 좋음! ex.var x=1
- 대입 연산자 =

웹브라우저 제어

document.querySelector("body")
documnet.querySelector("body").style.backgroundColor = 'black';

<input type="button" value="night" onclick=
  "documnet.querySelector('body').style.backgroundColor = 'black';">

night 버튼을 클릭하면 body 태그를 선택하여 스타일 속성 중 backgroundColor을 black으로 변경하도록 한다.
HTML: 프로그래밍 언어가 아님
HTML로 만든 웹페이지는 시간의 순서에 따라 실행되지 않고, 한 번 만들어지면 바뀌지 않기 때문
Javascript: 프로그래밍 언어가 맞음
사용자와 상호작용하고, 이를 위해서 시간에 따라 여러 기능이 실행되기 때문

조건문

: 프로그램에서 조건에 따라 다른 기능들이 다른 순서에 따라서 실행되도록 만들어주는 것

if-else 문
: if문의 괄호 안 불리언 데이터 타입이 true이면 if문의 중괄호 안의 코드가 실행되고, false이면 else문의 중괄호 안의 코드가 실행된다.

if(document.querySelector('#night_day').value === 'night') {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  document.querySelector('#night_day').value = 'day';
}
else {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#night_day').value = 'night';
}

비교 연산자

동등 비교 연산자 ===: 이항 연산자로 좌우가 같으면 True, 다르면 False
비교 연산자 <,>: 이항 연산자로 좌우의 값을 비교하여 식이 옳으면 True, 옳지 않으면 False
- HTML에서는 태그를 나타낼 때 쓰이는 기호이므로 꺽쇠 기호 대신 <와 &rt;를 쓴다.

리팩토링 (중복 제거)

: 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것, 코드의 기능적인 측면에는 변화가 없어야 한다.

this: 자기 자신을 가리키기 위한 키워드
같은 부분이 계속 코드에서 반복된다면, 그 부분을 새로운 변수로 선언하여 코드의 길이를 줄일 수 있다.

var target = document.querySelector('body');
if(this.value === 'night') {
  target.style.backgroundColor = 'black';
  target.style.color = 'white';
  this.value = 'day';
}
else {
  target.style.backgroundColor = 'white';
  target.style.color = 'black';
  this.value = 'night';
}

반복문과 배열

배열

대괄호를 이용해 선언하고 각 요소들을 반점(,)으로 구분한다.
아래 제시된 기능들 외에도 다른 기능들이 많으니 찾아보자.

var fruits = ["apple", "banana"];
document.write(fruits[0]); // 배열의 값에 접근
document.write(fruits.length); // 배열의 길이 출력, 이 경우에는 2
fruits.push("coconut"); // 배열의 맨 뒤에 값 추가
fruits.splice("잘라낼 시작 위치", "제거할 원소 개수(생략가능)", "치환할 내용(생략가능)");

반복문

while 문
: while문의 괄호 안이 true 값을 가지는 동안 중괄호 내의 코드가 반복적으로 실행됨, false인 경우 while문을 빠져나옴

var i = 0;
while (i < fruits.length) {
  document.write('<li>'+fruits[i]+'</li>');
  i = i + 1;
}

활용

querySelectorAll이 찾은 모든 a 태그를 배열 형태로 alist에 저장

var alist = document.querySelectorAll('a');

문서 안의 모든 a 태그의 색깔을 powderblue로 변경

var i = 0;
while (i < alist.length) {
  alist[i].style.color = 'powderblue';
  i = i + 1;
}

+) console.log();를 콘솔 창에서 쓰면 괄호 안이 가리키는 값이 콘솔 창에 출력된다.

Ctrl + / 하면 드래그한 부분이 주석처리된다.

함수

반복문을 쓸 수 없는 경우일 때 리팩토링에 유용하다.

document.write('2');
document.write('3');
document.write('4');
document.write('2');
document.write('3'); // 이와 같은 코드를

function two() {
  document.write('2');
  document.write('3');
} // 함수를 선언하여

document.write('1');
two();
document.write('4');
two(); // 더욱 간결하게 나타낼 수 있다.

인자로 this 키워드를 전달받아 다양하게 활용 가능하다.
함수를 정의하는 다양한 방법

객체이름.func = function() {} // 객체의 메소드로 추가
var func = function() {}
function func = {}

매개변수(Parameter)와 인자(Argument)

: 함수의 입력에 해당

function sum(left, right) {
  document.write(left + right);
} // left, right는 매개변수

sum(2,3); // 2, 3은 인자

리턴(Return)

: 함수의 출력에 해당

function sum(left, right) {
  return left + right;
} // 위의 함수가 값을 직접 출력하는 것이 아니라 값을 반환하도록 함

객체

서로 연관된 함수와 변수가 아주 많아졌을 때 이를 정리하는 데 유용
객체에는 다양한 것들을 담을 수 있다. 함수도 담을 수 있음!

document.querySelector('body');

위와 같은 코드에서 document는 객체, querySelector는 메소드이다.
즉 객체에 속해 있는 함수들은 메소드(Method)라고 부른다.

객체의 읽기와 쓰기

객체의 각 요소들은 이름과 값으로 이루어져 있으며, 객체를 만들 때는 배열과 달리 중괄호 {}를 사용한다.

var coworkers= {
  "programmer": "egoing",
  "designer": "leezche"
};

객체에 요소를 추가할 때는 다음과 같은 코드를 쓴다.

coworkers.bookkeeper = "duru";
coworkers["bookkeeper"] = "duru";
// 객체 coworkers에 bookkeeper이라는 이름으로 duru라는 값을 넣는다.
// 이름에 공백이 포함된다면 두 번째 코드를 사용해야 한다.

객체의 요소들을 꺼낼 때는 다음과 같은 코드를 쓴다.

document.write(coworkers.programmer)
document.write(coworkers["programmer"])
// coworkers 객체 안에서 programmer이라는 이름을 가진 값을 가져와 출력
// 두 줄 모두 같은 결과 출력

순회

: 객체의 모든 요소에 접근하기

for in을 사용 - 이름과 값을 출력하는 법이 각각 다르니 주의
배열에서는 index를 쓰지만 객체에서는 key를 쓴다!
ex. 객체이름["key"]라고 쓰면 key라는 이름을 가진 값을 가리킨다.

for(var key in coworkers) {
  document.write(key+'<br>');
} //  coworkers에 있는 "이름"들을 하나씩 가져와 차례대로 key에 넣어 출력

for(var key in coworkers) {
  document.write(coworkers[key]+'<br>');
} // coworkers에 있는 이름들에 해당하는 "값"을 하나씩 출력

프로퍼티(Property)와 메소드(Method)

프로퍼티(Property): 객체에 소속된 변수, 컴마로 구분
메소드(Method): 객체에 소속된 함수

Javascript 활용

파일로 쪼개서 코드 정리하기

파일에 모든 페이지에서 공통적으로 사용되는 Javascript 코드를 넣고, 코드가 사용되는 태그의 src 속성에 파일 이름을 넣어서 바꾸면 된다.

<script src='colors.js'></script>

코드를 재사용할 수 있고, 동시에 코드를 수정할 수 있어서 유지보수가 편리
코드가 명확해지고 가독성이 좋아짐
파일을 한 번 다운로드해서 캐시에 저장해두면 다운로드 없이 사용할 수 있기 때문에 더 빨리 페이지를 표시 가능하므로 캐시 입장에서도 좋음

라이브러리와 프레임워크

라이브러리: 프로그램에 필요한 부품이 되는 소프트웨어가 정리되어 있는 것
프레임워크: 만들고자 하는 프로그램의 종류에 따라서 공통적인 부분을 미리 만들어놓는 것
JQuery 라이브러리: 가장 유명한 Javascript 라이브러리 중 하나
- 인터넷에서 jQuery를 다운로드해 사용 가능
- CDN을 사용해 더 간편하게 사용 가능(jQuery 홈페이지에서 찾을 수 있음)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// 구글 CDN, 이 한 줄을 head 태그에 추가하면 됨

라이브러리와 프레임워크를 이용하면 프로그래밍의 생산성을 크게 높일 수 있다. 문법 공부도 중요하지만 어떤 라이브러리가 있는지도 살펴볼 것

웹 개발과 관련된 검색어

document 객체: 태그를 삭제하거나 자식 태그를 추가하고 싶은 경우
그래도 찾을 수 없다면 DOM 객체
windows 객체: 웹브라우저 자체를 제어해야 하는 경우, 예를 들면 웹페이지의 주소를 알아낸다거나 창을 열거나 해야 하는 경우
ajax: 웹페이지를 새로고침하지 않고도 정보를 변경하고 싶다면
cookie: 웹페이지가 새로고침되어도 현재 상태를 유지하도록 만들고 싶으면
offline web application: 인터넷이 끊겨도 동작하는 웹페이지를 위해
webRTC: 화상 통신 웹 앱을 만들고 싶을 때
speech로 시작되는 API: 음성을 인식하거나 음성과 관련된 것을 처리하고 싶을 때
webGL: 3차원 그래픽을 이용하고 싶다면
webVR: 가상현실에 대해서 알아보고 싶다면

hyeojung

응애 나 애기 개발자

이전 포스트

이전에 올렸던 글 중 html/css 정리

다음 포스트