[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 2주차 수업내용 회고록 ch.1 -Javascript 자료형, 표준객체, DOM, 이벤트 리스너, jQuery 메소드, jQuery 이벤트리스너(feat. 서울 적응기)

2023. 5. 3. 21:42ㆍStudy_Develop/포스코 X 코딩온 부트캠프

[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기]
2주 차 회고록 ch.1

1주차 html, css수업 때
건방지게 팔짱 끼고 수업 대충대충 듣고
수업 끝난 이후에 복습도 안 하던
한주가 지나고,

2주 차 시작과 함께
수업 내내 분노의 타이핑, 그리고 거북목 상태를
유지한 채 6시간 수업을 들었다.

js, jQuery는 혼자 깔짝 건드려보고
처음 제대로 배우는데,
꽤나 헷갈리고 응용문제가 나오면
약간의 버퍼링이 필요하다.

제대로 정리해 두어야
나중에 까먹더라도,
다시 감을 살릴 수 있을 듯하다.

내가 보려고 정리해 둔 글이니
다소 정신이 없을 수 있다.

Javascript 자료형

1. primitive(원초적인, 원시적인) 자료형

1.1 Boolean

참(true), 거짓(false) 둘 중 하나의 값을 갖는 요소

1.2 Number

숫자 형으로 정수와 부동 소수점, 무한대 및 NaN인 요소

1.3 String

문자 데이터를 나타낼 때 사용

1.4 Null

빈 값을 뜻하는 null타입, 타입은 존재하지만 값은 존재하지 않는다.

1.5 Undefined

값 X, 타입 X

2. Object 자료형

2.1 객체 자료형
객체란?
실생활에서 우리가 인식할 수 있는 사물

var cat={
  name:"나비",
  age: 1, 
  mew:function(){
      return "냐옹";
   }
 };

2.2 참조 자료형
배열 - 숫자형과 문자열과 마찬가지로
일반적인 스크립트와 동일

생성방법!

var arr1= [1, 2, 3, "안녕", "반가워"];
var arr2= new Array(1, 2, 3, "안녕", "반가워");

[ ]나 new Array()를 이용해 생성한다.

var me={
            name: 'kyuti',
            birth:'1115'
        };
        me['gender']='F';
        console.log(me);

me에 gender: 'F'
가 추가된 것을 확인할 수 있음.

Javascript 표준객체

- 자바스크립트가 기본적으로 가지고 있는 객체들

- 프로그래밍을 하는 데 기본적으로 필요한 도구들

- String, Number, Array, Date, Math...

1. Date 객체

Javascript에서 매 순간 바뀌는 시간과 날짜에 관한
정보를 얻기 위해 사용하는 객체

getFullYear() : 년도를 출력하는 함수

console.log(date.getFullYear()); //2023

getMonth() : 월을 출력하는 함수
단, 0부터 시작, 1월은 0
그래서, +1을 해줘야 현재 월을 알 수 있음

console.log(date.getMonth()); //현재 3월이면 2

getDate(): 날짜를 출력하는 함수

console.log(date.getDate()); //27

getDay() :요일을 출력하는 함수
월요일=1, 화요일=2, 수요일=3,...

console.log(date.getDay()); //3

2. Math 객체

수학에서 자주 사용하는 상수와 함수들을
미리 구현해 놓은 javascript 표준 내장 객체

Math.ceil() : 소수값이 존재할 때 값을 올리는 함수

var val = 324.6;
   document.write("Math.ceil(val) : " + Math.ceil(val) + "<br>");

Math.floor 사용방법 (내림)

Math.round 사용방법 (반올림)

javascript DOM

1. DOM?
Document Object Model(문서 객체 모델)

xml이나 html 문서에 접근하기 위한
일종의 인터페이스로 문서 내의 모든 요소를 정의하고,
각각의 요소에 접근하는 방법을 제공한다.

-> 보통 이런 구조이다.

Javascript Document

Document
웹 페이지에 존재하는 HTML요소에 접근하여
행동을 하고자 할 때 사용하는 객체

요소 선택

. append() 메서드
선택된 요소의 마지막에
새로운 HTML 요소나 콘텐츠를 추가한다.

<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

위와 같이 HTML요소가 있을 때,
. append() 메서드를 이용하면, 두 번째 <li> 뒤에
새로운 HTML요소를 추가할 수 있다.

$("#list").append("<li>새로 추가된  아이템</li>");

. prepend() 메서드
선택한 요소의 첫 번째에 새로운 요소나 콘텐츠를 추가한다.

. appendTo() 메서드
선택한 요소의 해당 요소의 마지막에 추가한다.
append() 메서드와 동일하지만, 소스(source)와 타깃(target)의
위치가 서로 반대로 되어 있다.

$(source).appendTo(target)

첫 번째 <p> 뒤에 새로운 HTML요소를 추가할 수 있다.

<p>안녕하세요.</p>

$("<span>jQuery입니다.</span>").appendTo("p");

. prependTo() 메서드
해당 요소의 첫 번째에 추가한다.

Javascript 이벤트 리스너

- 사용자의 행동에 반응하는 작업

- 사용자로부터 특정행동이 감지되면, 그에 따른 반응을 함

Javascript event listener 등록하는 방식

1. 인라인 방식

- 이벤트를 HTML 요소에 속성으로 직접 지정하는 방식
- HTML 코드에 자바스크립트를 추가함으로써 결국 HTML코드와 스크립트가
섞여 사용되기 때문에 관점에 따라 유지보수에 용이하지 않을 것이다.

<body> 
  	<button onclick="testHandler()">Test</button> 
	<script> 
    	function testHandler() { 
  			alert('Hello world');
  		}
	</script> 
</body>

<body>
    <button onclick="alert('Hello world');">Test btn</button>
</body>

2. onXXXX속성 (ex. onClick) 방식

- html 코드와 자바스크립트가 섞여
사용되지 않는다.

- 하나의 이벤트 핸들러 프로퍼티엔
하나의 이벤트 핸들러만 바인딩 가능하다.

let testBtn = document.querySelector('#testBtn'); 
	testBtn.onclick = function () {
		alert('Hello world1'); 
	}; 
    // 두번째 바인딩된 이벤트 핸들러 (하나의 이벤트 핸들러만 바인딩 가능하기때문에 "Hello world2"가 노출 된다. 
	testBtn.onclick = function () { 
  		alert('Hello world2'); 
	};

-> 마지막으로 만들어진 함수가 바인딩된다.

3. addEventListener() 메서드 방식

- onXXXX 방식에서는 1개의 이벤트 핸들러만 바인딩 가능했지만,
addEventListener() 방식은 하나 이상의
이벤트 핸들러를 바인딩한다는 특징이 있다.

- 객체. addEventListener('이벤트타입', 함수명[, 이벤트전파방식];

<body> 
    <button id="testBtn2">Test</button> 
  </body> 
  <script> let testBtn2 = document.querySelector('#testBtn2'); 
    function testFunc(){ 
    	alert('Hello world1');
    } 
    testBtn2.addEventListener('click', testFunc); 
    
    testBtn2.addEventListener('click', function () { 
    	alert('Hello world2'); 
    }); 
    } 
  </script>

-> Hello World1이 alert로 출력되고,
Hello World2가 또 alert로 출력됨.

jQuery

자바스크립트 언어를 간편하게 사용할 수 있도록
단순화시킨 오픈소스 기반의 자바스크립트 라이브러리

- 주요 웹 브라우저의 구버전을 포함한
대부분의 브라우저에서 지원 가능

- HTML DOM를 손쉽게 조작 가능하며,
CSS스타일도 간단히 적용 가능하다.

- 애니메이션 효과나 대화형 처리를
간단하게 적용가능하다.

- 같은 동작을 하더라도 더욱 짧게 구현 가능하다.

$는 jQuery() 함수의 축약 형태로,
식별자의 역할을 한다.

JQuery 메서드

1. 값 가져오기 & 설정하기

<input type="text"/>
    <button onClick="getValue()">값 가져오기</button>
    <button onClick="setValue()">값 설정하기</button>

function getValue(){
    let value=$('input').val();
    console.log(value)
}

function setValue(){
    $('input').val('패스워드를 입력하세요')
}

2. Style 변경하기

예제 1.

<h2>css()</h2>
    <div id="change">변경해주세요</div>
    <button onClick="changeJs()">js로 바꾸기</button>
    <button onClick="changeJquery()">jquery로 바꾸기</button>
    <button onClick="getJquery()">jquery로 CSS값 가져오기</button>

function changeJs(){
   let span= document.querySelector('#change')
   span.style='font-size: 20px; color: red;'
}
function changeJquery(){
    $('#change').css({"font-size": "40px", "color": "blue"})
}
function getJquery(){
    console.log($("#change").css('color'))
}

예제 2.

<h2>html()</h2>
    <p id="html">안녕하세요</p>
    <button onClick="changeHtmlJs()">js바꾸기</button>
    <button onClick="changeHtmlJquery()">jquery로 주소바꾸기</button>

function changeHtmlJs(){
   let p = document.querySelector('#html')
   p.innerHTML='<h3>javascript</h3>'
}

function changeHtmlJquery(){
    $('#html').html('<h1>Jquery</h1>')
}

3. 속성 변경하기

<h2>attr()</h2>
    <a href="https://www.naver.com" target="_blank" id="move">이동하세요</a>
    <button onClick="changeAttr()">주소바꾸기</button>
    <button onClick="changeAttraJs()">JS로 주소바꾸기</button>

function changeAttr(){
    $("#move").attr('href', 'https://www.google.com')
}
function changeAttraJs(){
    let a=document.querySelector('#move')
    a.setAttribute('href', 'https://www.daum.net')
}

4. Text변경하기

<h2>text()</h2>
    <p id="text">안녕하세요</p>
    <button onClick="changeTextJs()">js바꾸기</button>
    <button onClick="changeTextJquery()">jquery로 주소바꾸기</button>

function changeTextJs(){
    let p=document.querySelector('#text')
    p.textContent="<h3>js체인지</h3>"
}
function changeTextJquery(){
    $('#text').text("<h1>jquery체인지</h1>")
}

결과>

-> textContent는 < > 태그 안에 넣어도 적용되어 바뀌지 않음!

5. HTML 변경하기

<h2>html()</h2>
    <p id="html">안녕하세요</p>
    <button onClick="changeHtmlJs()">js바꾸기</button>
    <button onClick="changeHtmlJquery()">jquery로 주소바꾸기</button>

function changeHtmlJs(){
   let p = document.querySelector('#html')
   p.innerHTML='<h3>javascript</h3>'
}

function changeHtmlJquery(){
    $('#html').html('<h1>Jquery</h1>')
}

-> innerHTML을 사용하면, `< > 변경내용 <>`이
태그를 제외하고, 제대로
변경내용으로 변경됨.

` (백틱)

6. 요소 추가하기

<ul class="colors">
        <li class="orange">orange</li>
        <li class="green">green</li>
        <li class="navy">navy</li>
    </ul>
    
    <h6>append() - 선택된 요소의 자식 요소 중 마지막에 추가</h6>
    <button onClick="appendJS()">js바꾸기</button>
    <button onClick="appendJquery()">jquery바꾸기</button>

function appendJS(){
    let ul = document.querySelector('.colors')
    let li = document.createElement('li')
    li.innerHTML = '마지막 자식'

    ul.append(li)
}
function appendJquery(){
    $('.colors').append('<li> jquery 자식추가 <li>')
}

결과>

7. 요소 삭제하기

  <ul class="nums">
        <li>1</li>
        <li id="li2">2</li>
        <li>3</li>
    </ul>

function removeJs(){
   let li = document.querySelector('#li2')
   li.remove()
}
function removeJquery(){
  $('#li2').remove()
}

8. 요소 탐색하기

 <button onClick="findParent()">부모찾기</button>
 <button onClick="findParents()">조상찾기</button>

function findParent(){
    console.log($('.child:nth-child(2)').parent())
}
function findParents(){
    console.log($('.child2').parents())
}

결과>

9. 클래스 조작하기

<p class="origin-class">기존 클래스</p>
    <button onClick="addClass()">클래스 추가</button>
    <button onClick="addClassJs()">js클래스 추가</button>
    <button onClick="removeClass()">클래스 삭제</button>
    <button onClick="removeClassJs()">js클래스 삭제</button>

function addClass(){
   $('.origin-class').addClass('add-class')
}
function addClassJs(){
    let p = document.querySelector(".origin-class")
    p.classList.add('add-class')
}
function removeClass(){
    $('.origin-class').removeClass('origin-class')
}
function removeClassJs(){
    let p = document.querySelector(".origin-class")
    p.classList.remove('origin-class')
}

Jquery 이벤트 리스너

1. click : 마우스 버튼 클릭했을 때

<div class="hello">안녕하세요</div>
    <div class="numbers">
        <div class="num">one</div>
        <div class="num">two</div>
        <div class="num">three</div>
        <div class="num">four</div>
    </div>

$('.hello').click(function(){
    $('.hello').css('color', 'red')
})

$('.num').click(function(){
    // $('.num').css('color', 'blue') //전체 다 선택 됨
     $(this).css({'color': 'blue', 'font-weight':"bold"}) //누른애만 선택 됨
})
$('.num').on('click', function(){
    $(this).css({'color': 'red', 'font-weight': 'bold'})
})

+) this의 역할!

1. 자바스크립트에서의 this
자바스크립트에서의 this는 현재 실행 콘텍스트에서 참조되는 객체를 가리킨다.
이반적으로는 함수 내에서 사용되며, 함수 호출 방식에 따라
this가 가리키는 객체가 달라지게 된다.

2. jquery에서의 this
제이쿼리에서 $(this)는 이벤트 핸들러 내에서 이벤트가 발생한 요소를 가리키는 역할을 한다.
자바스크립트 this this는 현재 실행 콘텍스트에서 참조되는 객체를 가리키고,
$(this)는

<button class="btn">Button</button>

<script>
    $('.btn').click(function() {
        console.log(this);      // 현재 실행 컨텍스트에서 참조되는 객체
        console.log($(this));  // 이벤트가 발생한 요소
    });
</script>

위의 실행 결과를 보면, 자바스크립트의 this 경우는 태그가 표시되고,
제이쿼리 $(this)의 경우는 태그 요소의 정보를 담은 Object로 표시된다.

만일 제이쿼리 객체에서 자바스크립트 this와 같은 데이터를 갖기 위해서는
$(this)[0]로this===$(this)[0]인 것이다.

2. mouseover : 마우스를 요소 위로 움직였을 때 &

mouseleave(=mouseout) : 마우스가 요소를 벗어날 때

<div class="numbers">
        <div class="num">one</div>
        <div class="num">two</div>
        <div class="num">three</div>
        <div class="num">four</div>
    </div>

$('.numbers').mouseover(function(){
    //$('.numbers').css('background-color', 'green')
    $(this).css('background-color', 'yellow')
})

$('.numbers').on('mouseleave', function(){
    $(this).css('background-color', 'skyblue')
})

!! 비슷한 용어!!
- mouseenter, mouseover, hover : 마우스가 요소 안으로 들어가는 움직임을 감지
- mouseleave, mouseout : 마우스가 요소 밖으로 나오는 움직임을 감지

3. keydown : 누르고 있던 키를 땔 때

    <input class="input-key" type="text"/>

$('.input-key').keydown(function(e){
   //console.log(e.code)
   if(e.code==='ArrowUp'){
    console.log('up')
   }else if(e.code==='ArrowRight'){
    console.log('right')
   }else if(e.code==='ArrowLeft'){
    console.log('left')
   }else if(e.code==='ArrowDown'){
    console.log('down')
   }else{
    console.log('others')
   }
})

$(".input-key").on('keydown', function(e){
    console.log(e.code)
})

4. 폼 이벤트 input: input, textarea 요소 값이 변경되었을 때

submit : 폼을 제출(submit) 할 때

<h3>폼</h3>
    <form action="/" id="todo-form">
        <input type="text" name="todo"/>
        <button>추가</button>
    </form>
    <ul class="todos"></ul>

$('#todo-form').submit(function(e){
    e.preventDefault();
    const todo=$('input[name=todo]').val()
    console.log(todo)
    $('.todos').append(`<li>${todo}</li>`)

    $('input[name=todo').val("")//입력 값은 다시 빈 문자로 설정
})

결과>

+) e.preventDefault(); 란?

어떤 이벤트를 명시적으로 처리하지 않은 경우,
해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 설정한다.

여기까지 3일 만에 배운 내용
총정리이다.

다음 회고록에서는
실습 내용 문제 풀이를 다룰 예정이다.

전반적으로 내용이 아주 빠르게 진행되고
실습도 알차게 진행을 하여
따라가려면 매일매일 복습하고,
수업시간에 더 빡세게 집중해야겠다는 생각이 든다.

살짝 빠르게 진행되는데
워낙 빨리빨리를 좋아하는 나로서는
만족스러운 것 같다.

다만 걱정되는 것이 있다면,,
프로젝트 때 아무것도 못해서
민폐가 될 것 같아..
걱정이 되긴 하다만..ㅋ
아자아자
파이팅 해야지 ~

+)

글이 너무 밋밋하여

나의 서울 적응기를

살짝 넣어본다 ㅎ

공부 좀 하려 했는데

청주 친구들이 서울 왔다길래..

후다닥 만나러 간 날 ~

한강 구경하고 이태원을 다녀왔다.

저 딥초코 버터링 존맛이다.

서울에 취직한 학교 동아리 선배들과 함께

전부터 가보고 싶었던

무한도전 정총무가 쏜다 편에 나왔던 전 집에 다녀왔다 ㅎㅎ

직장인을 만나 대화를 하니

취업 꿀팁을 얻기는 하지만

취직하기 싫다 ,, 는 생각도 든다 ㅎㅎ

휴.. 돈 벌기 쉽지 않겠어~..

그럼 이만!

'Study_Develop > 포스코 X 코딩온 부트캠프' 카테고리의 다른 글

[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 4주차 회고록 ch. 1 Node.js, 비동기 처리, 분해 할당, ...연산자, rest (0)	2023.05.21
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 3주차 회고록 (1)	2023.05.14
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 2주차 회고록 ch.2 실습 문제 풀이 (4, 5번 문제 정리 해야 함..) (0)	2023.05.14
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 1주차 회고록(feat.험난한 서울살이) (12)	2023.04.28
[포스코 X 코딩온 풀스택 웹개발자 부트캠프 7기] 0주차 feat. 합격 회고록 (0)	2023.04.21

👩‍💻 코딩하는 지현, 일상기록