🐷전동준(Jeon DongJun)

Go with the flow

[web]JavaScript 정리2

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!


JavaScript 정리 2

  • 이 포스트에 나온 코드들은 모두 <script></script> 안에서 사용되야 합니다.🥰

DOM

  • DOM(Document Object Model)은 문서 객체모델로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다.
  • 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근(탐색)하는 메서드다.
  • document.Element대상으로 접근한다.

방법

1. CSS 선택자를 이용한 방법

  • Document 메소드 querySelector('css 선택자')는 CSS의 선택자를 사용해 노드 하나를 반환한다.

    • 예시로 id가 test인 선택자를 불러올때는 이렇게 적어준다.

      var doc = document.querySelector('#test') // 반환한 노드를 doc 변수에 저장

    • 또한 이렇게 불러온 노드의 내용을 바꿔줄 수도 있다.

      doc.innerHTML = '바꾸고 싶은 내용';

  • Document 메소드 querySelectorAll()은 지정된 셀렉터 그룹에 일치하는 문서의 엘리먼트 리스트를 나타내는 정적 노드리스틀 반환한다.(파이썬의 배열같다고 생각하면 된다. 특정 노드를 가져올때 대괄호[]를 이용해 인덱싱을 해줌)

    • 예시로 id=test인 노드 전체를 불러와 첫번째 노드를 반환한다.([0])

      var doc = document.querySelectorAll('#test')[0];

2. 엘리먼트의 id로 탐색

  • 엘리먼트 하나를 선택하여 값 하나(Node)를 반환한다. 중복은 불가하다.

    • 예시 : id에 지정되어있는 요소 1개를 가져올 것이다.

      var doc = document.getElementById('test');

    • 동일하게 노드의 내용을 바꿔줄 수도 있고, 스타일을 입혀줄 수도 있다.

      doc.innerHTML = '바꾸고 싶은 내용';
doc.style.color = '바꾸고 싶은 글자 색상';

3. 엘리먼트의 name으로 탐색

  • 엘리먼트 여러개를 선택해 노드 여러 개. 즉, 배열(NodeList) 을 반환한다.

    • 예시: name 이 test2인 요소들을 가져온다.

      var doc = document.getElementsByName('test2');

    • 쿼리선택자All과 같이 변수에 저장해서 인덱싱해서 값을 넣어줄 수도 있다.

      doc[1].value = "바꾸려고하는 내용을 적어주자." // 배열 중 두번째에 위치한 노드

4. 엘리먼트의 태그 이름으로 탐색

  • 엘리먼트를 여러 개 선택해서 노드 여러개. 즉, 배열(NodeList)을 반환한다.

    • 예시: <p>태그인 요소들을 가져온다.

      var doc = document.getElementsByTagName('p');

    • doc 변수에 저장했으니 블록요소들의 내용을 바꿔주거나 입력해줄 수 있다.

      doc[3].innerHTML = '배열의 [3]에 위치한 영역에 내용 추가! ';

Tip. 왜 값을 저장할 때 .value .innerHTML 두 가지를 사용할까?

  • 왜냐하면, value는 input 요소 안에 저장해 주는 것이고, innerHTML은 여는 태그와 닫는 태그 사이의 영역 값에 저장해 주는 것이기 때문이다.


Object

  • 객체의 구성
  • property : 속성이다.
  • function(method) : 함수 및 기능을 의미한다.
  • this : 객체 내부의 메서드나 속성을 정의하여 외부에서 접근을 가능하게 만들어준다. 파이썬의 self에 빗대어 생각하면 기억하기 좋을 것 같다.
  • prototype : 객체의 확장
  • 파이썬에서는 객체를 생성할때 Class()생성자를 이용하는데, JS에서는 var 변수명 = new 객체생성자 를 사용한다.

1. function(함수 정의)를 이용한 객체 생성

  • 파이썬에서 Class문을 사용해서 만드는 것처럼 JS에서는 function을 사용해서 객체 생성자를 만들어 준다.

  • 예시

    • function object01(){
    this.name01 = '전동준'; // name01이라는 객체 내부 속성 정의
    var name02 = 'jeon-dj'; // name02 변수에 문자를 저장했고
    this.getName02 = function(){ // name02를 속성으로 반환하는 getName02 메서드를 정의
    return name02;
            }

    • 함수 objTest()를 정의해 그 안에서 object01()객체 생성자를 사용해 객체를 만들어 주고 alert를 사용해 객체와 그 속성과 메서드를 확인해보자.

    • function objTest(){
            // 객체 생성 new 
            var obj01 = new object01(); // 변수 obj01에 객체를 생성해준다.
            alert(obj01.name01);
            alert(obj01.name02);
            alert(obj01.getName02());

    • alert(obj01.name01);

      image

    • alert(obj01.name02);

      image

      • 어??? undefined. 정의가 되지않았다고 한다. 분명 아까 object01()객체 생성자를 만들면서 name02에 'jeon-dg'를 저장해줬는데?..
      • 그 이유는 그 과정 내에서만 지정된 지역 변수이기 때문에 다른 function 내에서 사용할 수가 없다. 그래서 정의되지 않았다고 나오는 것이다.

    • alert(obj01.getName02());

      image

      • 반대로 여기에 jeon-dj이 나온 이유는 아까 내부함수에서 저장시켜줬기 때문이다.

2. 객체 리터럴을 이용한 객체 생성

  • function을 사용하지 않고 var 변수지정을 사용해 객체 리터럴을 만들어줄 수 있다.

  • 예시

    •  var object02 = {
            name: "j-dj", // 파이썬 딕셔너리같은 느낌
            prn: function(){
                alert(object02.name + '의 전화번호 : 010-1234-5678');
            }

    • 파이썬에서 key:value 형태로 딕셔너리에 넣어주는 것 처럼

    • 왼쪽 부분에는 속성이나 메서드 이름을 , 오른쪽에는 그 값들을 적어주고 중괄호{}로 묶어준 후에 var를 사용해 변수에 저장해 주면 객체 리터럴이 완성된다.

    • 1번과 같이 objTest()에서 alter를 이용해 object02 객체의 속성과 메서드를 확인해보자.

    • alert(object02.name);

      image

    • object02.prn();

      image

3. 프로토 타입을 이용해 기존 객체에 기능과 속성 추가

  • prototype 메서드를 사용하면 이미 생성된 객체에 속성이나 메서드를 추가할 수 있다.

  • 예시 : object01 객체에 prn이라는 메서드를 추가해보자.

    • object01.prototype.prn=function(){ // prototype은 객체에 기능을 추가하고 싶을 때 사용
            alert(this.name01 + '은 최고다.');

    • obj01.prn();

      image


String

  • JavaScript에서는 string(문자열)의 다양한 기능을 사용할 수 있다.

문자열 합치기

  • JS에서는 더하기 연산자(+)로 문자열과 문자열을 연결할 수 있다.

    • var str01 = 'String';
var str02 = 'Test';
var str03 = str01 + str02;
alert(str03);
    • image

  • concat 함수를 이용해서 문자열 연결이 가능하다.

    • var newString = str01.concat('Test', 'Java', 'Script');
alert(newString)
    • image

  • join 함수를 사용해서도 연결이 가능하다.

    • 배열.join(문자)의 형식으로 배열의 사이사이에 문자가 삽입된다.(파이썬에서는 리스트라 부르며, 문자.join(배열)로 식이 조금 다르다.)

    • var joinTest = ['5','10','15','20'].join('+');
alert(joinTest);
    • image

다른 자료형 합치기

  • 파이썬에서는 다른 타입끼리의 더하는 연산이 불가능했다. 하지만 JS에서는 문자열과 다른 타입(숫자, 불리언 등)이 만나면 문자열로 합쳐진다.

    • var numVal = 12.5; // 숫자형
var bool = true; // 논리형
var result = 'String' + numVal + bool; // str + int + boolean 타입을 더하기 연산자로
alert(result); // 결과 확인
alert(typeof(result)); // typeof는 타입 확인

    • image

    • 이렇게 다른 타입의 변수들이 자동으로 문자열로 타입이 바뀌어 연결되는 것을 확인할 수 있다.

    • 타입은 string으로 나온다.

    • image

문자열 비교하기

  • if문을 사용해서 문자열이 같은지 다른지도 비교할 수 있다.

    • var str = prompt('이름을 입력하세요'); // 문자를 적는 대화창에 변수 `str` 값을 받아준다.
var span = document.getElementById('res'); // id가 res인 노드를 span에 저장
if (str == '동준') { // 만약 대화창에 적은 내용이 '동준'이라면
    span.textContent = str + "님 환영합니다!"; // res라는 노드에 '동준님 환영합니다!' 출력
} else if (str.toLowerCase() == 'dongjun') { // 적은 값을 소문자로 바꿔 donjgun과 같다면
    span.textContent = str + ', hello!'; // 'dongjun, hello!'를 출력
} else {
    span.textContent = '이름을 다시한번 확인해 주십시오~'; // 그 외의 것을 적었을 때
}

    • 동준을 적었을 때 : image

    • DongJUN을 적었을 때 : image

    • 그 외의 값을 적었을 때 : image

  • JS에서는 숫자형 정수를 문자형 정수와 비교할 때 자동으로 문자형으로 반환 시켜주기도 한다.

    • var numVal = 10; // 변수 numVal에 숫자형 10을 저장
if (numVal == '10') { // 숫자형 10과 문자형 10을 비교
    alert('== 연산자 사용 : 숫자 10 입니다.');
} else {
    alert('== 연산자 사용 : 숫자 10이 아닙니다.');
}
    • image

  • 하지만 === 비교연산자(엄격한 비교를 함)를 사용하면 타입의 다름을 정확이 구분한다.

    • if (numVal === '10') {
    alert('=== 연산자 사용 : 숫자 10입니다.');
} else {
    alert('=== 연산자 사용 : 숫자 10이 아닙니다.');
}
    • image

  • 문자열과 문자열 객체를 비교할 때도 이를 확인 할 수 있다.

  • 엄격한 연산자 ===는 다르다고 나온다. 왜냐하면 문자열 != 문자열 객체 이기 때문이다.

    • var strObj = new String('동준');
var strLiteral = '동준';
    
if (strObj == strLiteral) {
    alert('문자가 같습니다.');
} else {
    alert('문자가 다릅니다.');
}
                
if (strObj === strLiteral) {
    alert('문자가 같습니다. ===');
} else {alert('문자가 다릅니다. ===');
}

    • image

    • image

​

문자열 추출하기

  • indexOf와 lastIndexOf 메소드를 사용해 문자열도 추출할 수 있다.

  • indexOf는 왼쪽에서 오른쪽(->), lastIndexOf는 오른쪽에서 왼쪽(<-)으로 탐색한다.

  • 검색해서 일치하는 단어의 첫번 째 인덱스 값을 반환한다.

  • 값이 존재하지 않으면 -1을 반환한다.

  • var strVal = '차범근 박지성 손흥민 홍명보 차범근';
var prop = prompt('검색할 이름을 입력해 주세요');
alert('indexOf : ' + strVal.indexOf(prop)); 
alert('lastIndexOf : ' + strVal.lastIndexOf(prop));

  • prompt창에 차범근을 적어넣어봤다.

    • image
    • image
    • 문자열의 첫번 째 차범근의 첫글자 인덱스 0을 반환했고, 두번 째 차범근의 첫글자 인덱스 16을 반환했다.

  • strVal 문자열에 없는 값을 아무거나 적어봤다.

    • image
    • -1 을 반환한다.

문자열 추출하기

  • substring과 인덱스 메서드를 이용해서 원하는 문자열을 추출할 수 있다.

  • 파이썬의 슬라이싱처럼 lastIndexOf가 포함한 문자의 -1자리 까지 추출가능하다.

  • var strVal = 'substring을 @활용해서 문자를 나눌 수 있다.';
var startIndex = strVal.indexOf("@"); // 첫 @가 나올때부터 슬라이싱 시작
var endIndex = strVal.lastIndexOf("."); // 마지막 .의 -1 위치까지 슬라이싱(다)
var res = strVal.substring(startIndex, endIndex); // substring으로 문자열 추출 후 변수에 저장
alert(res); // 대화창에 출력

  • image

  • split메서드를 사용해서 문자열을 나눈후 배열에 저장해 인덱싱을 활용해서도 추출할 수 있다.

키워드 나누기

  • split 메서드를 사용해 문자열을 나눠줄 수 있다.

  • prompt(x, y)의 y자리는 대화상자가 켜졌을 때 자동으로 입력이 되는 값이다.

  • 예시: 문자열을 쉼표로 나눠 id가 key인 영역에 줄을 바꾸며 순서대로 출력한 경우

  • var prop = prompt('쉼표로 구분하여 키워드를 입력해주세요', '사과,바나나,키위,수박');
var propArr = prop.split(','); // 쉼표로 문자열을 나눠서 propArr에 저장
  
var propResult = ""; // 빈 문자열을 만들어 줌
for (var i = 0; i < propArr.length; i++) { // propArr의 길이까지 반복, i는 1씩 증가
    propResult += propArr[i] + "<br/>"; // 빈 문자열에 순차적으로 나눠진 문자들이 저장된다.(줄바꿈을 하면서)
}
document.getElementById('key').innerHTML = propResult;  // 출력 확인
  • image


Number

숫자

  • 리터럴 형태

    • var num01 = 3;
alert(num01 + ":" + typeof(num01)); // 타입도 확인
    • image

  • 객체 형태

    • var num02 = new Number(3);
alert(num02 + ':' + typeof(num02));
    • image

  • 문자형을 정수형으로 바꿔줘서 연산

    • parseInt는 문자를 정수형으로 바꿔준다.

    • alert(parseInt("1") + 1);
    • image

  • 정수형으로 바꿀 수 없는 문자와 연산

    • 알파벳과 같은 문자는 숫자로 바꿀 수 가 없다.

    • parseInt를 그런 문자에 적용하고 숫자와 연산시키면 NaN (Not a Number)가 반환된다.

    • alert(parseInt('a') + 1);
    • image

난수

  • Math 객체의 메서드들을 사용해서 난수를 생성할 수 있다.

  • Math 객체의 메서드 몇 가지

    • Math.random() : 0 <= x < 1 에 해당하는 난수 생성
    • Math.fllor() : 숫자 내림
    • Math.round() : 숫자 반올림
    • Math.ceil() : 숫자 올림
    • Math.PI : 파이값 반환

  • 0부터 100까지의 난수(정수)를 생성하는 경우

    • var hundred = Math.floor(Math.random() * 101);

  • 10부터 99까지의 난수(정수)를 생성하는 경우

    • var min = 10;
var max = 100;
var ran = Math.floor(Math.random() * (max-min) + min);

  • 로또 번호 생성(1부터 45)하는 경우

    • var lotto = Math.floor(Math.random() * 45 + 1);

배경색 반환

  • CSS의 style의 색상은 RGB(red/green/blue)로 이루어져있다.

  • RGB는 각각 256가지(0~255) 값을 갖고 있으며 그 조합들로 색이 만들어 지는 것이다.

  • rgb(256, 256, 256)속성을 이용해 난수를 만들어 배경색을 랜덤하게 바꿔볼 수 있다.

  • function randomBG(){
    var rum = function(){
        return Math.floor(Math.random() * 256); // 0부터 255까지의 난수를 반환하는 함수 값
    }
    document.body.style.backgroundColor = 'rgb(' + rum() + ',' + rum() + ',' + rum() + ')'; // 문서의 몸통부분의 배경색 스타일을 rgb(난수,난수,난수)로 적용
}


Date

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

16 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑