Study/JavaScript

코딩애플 - 웹 개발로 배우는 자바스크립트 기초

posey 2023. 3. 2. 12:50

 

  • 코딩애플 - 웹 개발로 배우는 자바스크립트 기초



Review

 

 

  제로초님과 얄코님의 자바스크립트 강의를 듣고 나서 아직 헤롱헤롱한 상태이다.

올인원 강의를 1회독한 것처럼 개념은 파악했으나 너무 많은 양의 정보를 받아들여서 완전히

정리가 되지 않은 상태랄까...

 

다음주 스터디 때까지 예제를 만들어가기로 해서 이번주는 자바스크립트로 이것저것

만들어보려고 한다. 만들다보면 머릿속에서 어느정도 정리가 되겠지... 

그런 김에 코딩애플님의 강의도 재밌어 보여서 한번 들어보기로 했다 !

 

무료 강의는 총 6강으로 진행되어서 하루 만에 다 들었는데 엄청 쉽게 잘 알려주신다. 

완전 기초이긴 했지만 또 다시 개념을 정확하게 다잡을 수 있어서 좋았다.

 

파이팅 - !

 

 

 

  • 코딩애플 - 웹 개발로 배우는 자바스크립트 기초

 

 

여기서 응용을 해보는 예제를 실행했다.

 

 

코드를 작성하는 방식은 위와 동일하고, '올 때 메로나' 라는 문구를 '올 때 바밤바'로 바꾸도록 했다.

 

글자 사이즈를 30px로 바꾸려면 어떻게 해야할까?

 

 

이런 식으로 작성하면 된다. CSS와 거의 동일한데, 자바스크립트에서는 공백이 생기면

대문자로 표현한다. 그래서 font-size가 아니라 fontSize 라고 표기하는 것이다.

 

 

 

 

<첫 번째 프로젝트 : 버튼 누르면 Alert 등장>

 

: 웹에 존재하는 UI 종류로는 모달, Alert, 탭, Tool tip, 서브 메뉴, 경고문, 캐러젤 등이 있다.

그 중 Alert를 만들어보았다.

 

UI를 만들 때는 먼저 디자인을 해놓고 숨기는 방식으로 진행한다. 그런 다음 버튼을 누르면 

보이도록 한다.

 

 

버튼을 누르면 alert 박스가 나타나고, 닫기 버튼을 누르면 다시 없어지도록 만들었다.

display: none;과 display: block; 속성을 활용하면 된다.

 

 

 

 

<function 문법>

 

: function 문법을 쓰는 이유는 긴 코드를 깔끔하게 한 단어로 축약할 수 있기 때문이다.

 

 

function의 기본 문법을 작성하여 복잡한 코드를 깔끔하게 축약할 수 있다.

결과는 위와 동일하다.

 

 

 

 

<파라미터 문법>

 

: 파라미터는 일명 구멍, 인자라고도 하며, 함수를 업그레이드 하고 싶을 때 사용한다.

 

function showAlert(구멍) {
  document.getElementById('alert').style.display = 구멍;
}

showAlert(123);
showAlert('안녕');
showAlert('block');

 

파라미터 문법을 이용해서 showAlert() 함수를 업그레이드 한 것이다.

함수에 구멍을 뚫어 놓으면 앞으로 함수를 사용할 때 () 안에 아무거나 입력할 수가 있다.

위와 같이 작성한다면, 구멍에 '123'을 넣어서 실행하거나 '안녕'을 넣어서 실행하는 것이다.

 

 

 

 

파라미터의 장점은 함수 하나로 다양한 기능 만들기가 가능하다. 

이것을 살펴보면 showAlert() 함수 하나로 열기와 닫기 기능 모두를 할 수 있도록 했다.

위의 이론대로 구멍에 block, none을 각각 넣어 실행시켰다.

 

파라미터를 사용하면 코드의 양이 확 줄게 되는 것을 볼 수 있다.

 

function plus(구멍) {
  2 + 구멍
}
plus(1);
plus(2);
plus(3);

 

이것도 plus(1); 이라고 입력한다면, plus() 함수를 실행하는데 구멍에 1을 넣어서 실행해달라는

뜻이다. plus(2);, plus(3)은 각각 2를 집어 넣어서 실행해주세요, 3을 집어 넣어서 실행해주세요

라는 뜻이다. 그러면 결과는 2+1, 2+2, 2+3 이런 식으로 나타나게 될 것이다.

 

 

 

<버튼 1, 버튼 2를 각각 만들어서 알림창 변경하기>

 

 

 

 

우선 버튼 1과 버튼 2를 만들고 나서 파라미터를 이용해서 알림창 안의 HTML을 변경하고,

닫기 버튼을 누르면 알림창이 사라지도록 만들었다. 

 

function buttonAlert () {
  1. 제목 바꾸기
  2. 열기
}

function 알림창열기(구멍) {
  document.getElementById('').style.display = 구멍;
}

 

함수는 이런 식으로 만들면 된다.

파라미터를 사용하면 비슷한 함수를 여러 개 만들 필요가 없어서 간편하다.

 

 

 

 

<EventListener 알아보기>

: 웹 탐색을 할 때 여러가지 Event가 발생한. click, keydown, scroll, mouseover 등이 있다.

그런 것들을 EventListener 바로 옆에 기재해주면 어떤 요소에 어떤 이벤트가 발생하는지

바로바로 체크할 수가 있다.

그런 다음 그 이벤트가 발생하면 특정 코드를 실행해주는 원리이다.

 

 

 

저기 click 자리에 keydown, scroll, mouseover 등의 이벤트를 작성하면 각각의 이벤트가 발생

했을 때 밑의 코드를 실행하게 된다.

 

 

 

 

<jQuery 기초>

 

: 요즘 jQuery를 잘 사용하지 않는다고 하는데 이유는 무엇일까?

React를 더 많이 사용하기 때문인데, React는 HTML 조작을 더 잘하고 앱처럼 스무스하게

동작하는 웹이다. 그리고 HTML를 재활용하기 편리하기 때문에 React를 모르는 개발자는

존재할 수 없다.

하지만 React가 존재하지 않는다면 jQuery가 1인자이고, jQuery로 개발된 사이트 또한

어마어마하게 많으니 jQuery도 배워야만 한다.

jQuery의 장점은 긴 JS 코드를 간략하게 줄여 작성할 수가 있다는 것이다.

 

jQuery로 HTML을 변경하는 방법은 $('CSS 셀렉터').어쩌구(); 이런 식으로 작성해주면 된다.

 

자바스크립트에서는 innerHTML 이라고 작성해야하지만 jQuery에서는 .html()나 .text()

라고 작성해서 HTML을 변경할 수 있다.

 

.html()이라 하면 안에 있는 모든 HTML 요소를 의미하고, .text() 라고 하면 안에 있는 모든

글자를 뜻한다.

 

jQeury로 HTML 스타일 변경하는 방법은 $('CSS 셀렉터').css(이걸, 이렇게); 이런 식으로 작성

해주면 된다.

 

jQuery로 HTML의 세부 속성들을 변경하려면 $('CSS 셀렉터').attr(이걸, 이렇게); 이런 식으로

작성해주면 된다.

 

 

반응형