JS 13

JS 기초 - 비동기통신

컴퓨터가 통신하는 방법 중엔 동기통신과 비동기통신이 있다. 동기통신은 말 그대로 동시에 일어난다는 뜻. 요청과 응답이 동시에 일어난다는 약속이다. 바로 요청을 하면 시간이 얼마가 걸리던 요청한 자리에서 응답을 받아야 한다. 비동기통신은 동시에 일어나지 않는다는 뜻. 요청과 응답이 동시에 일어나지 않는다는 약속이다. 비동기통신은 결과가 주어지는데 시간이 걸리더라도 그 시간동안 다른 작업을 할 수 있어 효율적으로 자원을 사용할 수 있다는 장점이 있다. 우리는 비동기통신을 배우고 활용해 볼 것이다! * 통신방법 통신을 위한 url을 하나 가져오자 나는 영화진흥위원회 open api를 가져와 사용할 것이다. 영화진흥위원회 홈페이지에서 주간/주말 박스오피스 카테고리에 들어가면 맨 밑에 JSON 링크가 있다. 그 ..

JS/기초정리 2023.01.20

JS 기초 - jQuery 기초문법

1. jQuery jQuery 또한 Java Script의 일환이다. 다만 자바스크립트로 빈번하게 사용되는 기능들을 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리다. 일단 먼저 jQuery를 사용하려면 파일을 직접 다운로드 받아야 한다. 제이쿼리 홈페이지에 들어가 다운로드 페이지를 열면 이렇게 뜨는데 이 중 초록색 표시 있는 걸 다운받아 사용하면 된다. 제이쿼리파일이 없으면 제이쿼리문법을 썼을 때 오류가 나게 된다. 제이쿼리 문법을 쓰고 콘솔창에 출력을 했는데 '$ is not defined ~~' 라고 쓰여있다면, 제이쿼리가 다운되지 않았다는 뜻! 파일을 다운받은 뒤에는 html head태그내에 다운받은 파일을 불러와야 사용가능하다. 2. jQuery 문법 : jQuery 문법의 기호 : $ ..

JS/기초정리 2023.01.20

JS 기초 - DOM 속성 / DOM 스타일

1. DOM속성 인풋태그 값 이미지 값 불러오기 이미지 값 수정 일단 실습을 하며 배우기 위해 body 태그 안에 위의 코드를 써두자! 이미지 태그에 src = '가져오고 싶은 이미지' 를 각자 입력하자 1. input 태그 내에 사용자가 입력한 값을 가져오는 함수 : .value innerText 로는 컨텐츠(내용)만 가져올 수 있다. input 은 컨텐츠가 없기 때문에 value값으로 가져온다! 인풋태그 값을 클릭하면 위에 입력한 값이 콘솔에 출력되는 걸 볼 수 있다. 2. 현재 이미지에 속성 값을 출력하는 함수 : getAttribute('속성이름') / .속성이름 const img_val = () => { let imgTag = document.getElementByID('img1) console..

JS/기초정리 2023.01.17

JS 기초 - DOM이벤트

* 이벤트 : 특정 요소에 원하는 이벤트를 부여할 수 있다. 실습으로 이해하기 : 버튼들을 클릭할 시, id가 txt인 요소의 컨텐츠 값을 팝업창으로 띄어보자! 쉽게 이해하기 위해 body태그를 작성해두고 실습을 시작하자! 또, 이벤트를 설명하기 위해 함수를 미리 만들어두자 1. 이벤트 핸들러 : 하나의 요소 당, 하나의 이벤트만 부여가 가능 - 공식 : 변수명.onclick(클릭시만) = 함수명 → 만약 핸들러용 버튼을 클릭했을 때, popUp함수를 실행해줘라 ~ let btn = document.getElementByID('btn_han') btn.onclick = popUp 핸들러용 버튼을 클릭할 시 popUp 함수를 실행하여 출력되는 모습을 볼 수 있다. 하지만!!!!!! let btn = doc..

JS/기초정리 2023.01.17

JS 기초 - DOM객체

DOM : Document Object Model Document = HTML, Object = JS 라고 생각하면 받아들이기가 쉬울 것이다.. * 객체 : DOM 객체는 HTML 문서 내의 요소들을 전부 단일 요소로 쪼개주는 개념 : 왜 각각의 단일 요소로 쪼개주어야 하나? → 각각의 단일 요소에 접근하여 HTML요소들을 가져다가 JS 내에서 설정하고 사용하기 위해 1. ID를 통해 HTML 요소를 가져오고 싶을 때 (1) 문서에 접근 : document. (2) 요소를 가져오다 : getElement (3) 아이디를 통해서 : ByID 직접 해봐야 이해가 쉽다! 실습하기 위해 일단 body태그 안에 밑과 같이 작성하자 1) id가 h1Tag인 요소를 가져와보자 let h1Tag = document.g..

JS/기초정리 2023.01.16

JS 기초 - 실행방식

JS에서의 실행방식은 CSS에서 했던 선언방식과 유사하다. 1. 내부방식 : HTML코드 내에 script태그를 이용하여 직접 작성하는 방식 이제까지의 게시물들은 내부방식으로 사용되어 왔지만(공부하기 편하게, 보기 쉽게), 현업에서는 사용하지 않는다. 장점 : 빠르게 타이핑이 가능, 전체 코드를 한 눈에 볼 수 있다. 단점 : 코드가 노출되고, 코드의 재사용성이 낮다. → 현업에서 사용 X 2. 인라인방식 : 태그 안에 직접 명시하는 방법 장점 : 단순 로직 처리에 용이 단점 : 코드가 노출되고, 재사용성이 아주아주 낮다. → 현업에서 잘 사용하지 X 3. 외부방식 : JS 파일을 불러와서 동작하는 방식 (현업에서 주로 사용) JS와 HTML을 연결해주기 위해 body태그 맨 밑에 작성을 해주어야 그 b..

JS/기초정리 2023.01.16

JS 기초 - 객체

1. 객체 : 여러 속성을 하나의 변수 안에 저장할 수 있도록 해주는 데이터 타입 - 표시 : 중괄호 { } - key(속성), value(값)으로 구성 1) 객체 생성하기 let person = { name : '해린' age : 20 team : 'NewJeans' } 2) 객체 출력하기 console.log(person) 객체는 중괄호로 표현되고 객체 안의 데이터들이 출력된다. 앞으로 데이터를 보고 중괄호만 보더라도 이건 객체구나 ~ 하고 알아봐야 해! 3) 객체 내 데이터에 접근하기 (1) 객체이름.key이름 (주로 사용) console.log(person.name) (2) 객체이름['key이름'] console.log(person['age']) (1), (2) 순으로 출력 4) 객체 내 데이터 ..

JS/기초정리 2023.01.16

JS 기초 - 함수

1. 함수 : 특정 기능들을 묶어서 호출할 수 있도록 하는 기능(믹서기의 역할) 1) 매개변수를 활용한 함수 - function 함수이름(매개변수){ 누군가가 함수를 호출했을 때, 실행시킬 로직 } 함수 하나만 만들어놔도(믹서기) 레몬을 넣든 자몽을 넣든 수박을 넣든 주스를 만들어준다! 2) return을 이용한 함수 : 누군가가 함수를 호출했을 때 특정값을 받고 싶다면 활용 3) 화살표함수(Arrow Function) 전 포스팅에서 다뤘었던 호이스팅은 함수에서도 된다. 호이스팅으로 인해 개발자들은 불편함을 겪었고, 화살표 함수가 만들어졌다. - const 함수이름 = ()=>{} 4) 함수 예제 사용자에게 숫자를 입력받아 두 수를 더한 값을 팝업창으로 띄워보자! step 1) 사용자에게 숫자 두 개를 ..

JS/기초정리 2023.01.12

JS 기초 - 배열

그 놈의 배열 배열 배열 !!!!! 또 배열이다 하지만 프로그래밍 언어에서 절대 뺄 수 없는.. 그런 아주 중요한 배열 1. 배열 : 여러 변수를 하나의 묶음으로 다루는 것 - 인덱스로 접근, 0부터 시작 - 다양한 데이터 자료형 저장이 가능하나, 그건 지양함 - 배열의 크기가 가변적이기 때문에 데이터 추가 시 오류 없이 자동으로 저장 공간 할당 1) 배열의 선언([]) - 단순 배열 생성 : let a = [] - 초기 데이터를 넣은채로 생성 : let member = ['제니', '로제', '지수', '리사'] 2) 배열 내 특정 데이터에 접근 : 배열이름[원하는 인덱스 번호] console.log('두번째 멤버는', member[1]) 3) 배열 내 전체 데이터 출력 → for문, length (1..

JS/기초정리 2023.01.12