본문 바로가기

HTML CSS JS21

자바스크립트 비동기 통신 Ajax를 이용해 영화진흥위원회 api 데이터 접근 (JavaScript Asynchronous communication Ajax) 자바스크립트 비동기 통신 Ajax를 이용해 영화진흥위원회 api 데이터 접근 (JavaScript Asynchronous communication Ajax) ▶ 목표 영화진흥위원회 오픈 api에서 주간/주말 박스오피스 데이터 접근 자바스크립트 ajax를 이용해 사용자가 날짜를 입력하면 해당 날짜의 데이터에 맞는 영화랭킹, 영화명, 개봉일자가 나오는 테이블 출력하기 1. 영화진흥위원회 오픈 api에서 JSON 가져오기 2. ajax로 데이터 확인하기 3. 사용자로부터 날짜를 입력 받고, 날짜에 맞는 데이터를 가져와 영화랭킹, 영화명, 개봉일자가 담긴 테이블을 출력하기 데이터 가져오기 2023. 1. 21.
자바스크립트 비동기 통신 기본 (JavaScript Asynchronous communication) 자바 스크립트 비동기 통신 (Java Script Asynchronous communication) 1. 동기식, 비동기식 비교 동기식 웹 브라우저에서 서버에 요청을 보내고 응답을 받는다. 모든 정보를 받기 때문에 화면이 하얗게 되면서 응답이 끝날 때까지 다른 작업을 할 수 없다. 비동기식 웹 브라우저에서 서버에 요청을 보내고 응답에 상관하지 않는다. 그렇기 때문에 화면이 하얗게 되는 것도 없고, 서버로부터 응답이 끝나지 않더라도 다른 작업을 할 수 있다. 2. 데이터 형식 : 데이터를 주고 받을 때에는 특정 형식으로 맞춰주어야 한다. CSV (Comma-Separated Value) : 쉼표를 기준으로 항목을 구분하여 저장한 데이터 XML (eXtensible Markup Language) : 다목적 .. 2023. 1. 21.
자바스크립트 jQuery 기본 문법 (JavaScript jQuery) 자바스크립트 jQuery 기본 문법 (JavaScript jQuery) 1. jQuery 불러오기 ① 파일을 직접 받아서 사용 compressed, uncompressed 차이는 보기 좋게 정렬된 차이이므로, 그냥 원하는 거 선택 헤드태그 안에 script 태그를 사용해서 주소값 적어주기 ② CDN을 이용해서 사용 2. jQuery 문법 : 문법 기호 $ 기능 v-JS jQuery 원하는 HTML 요소 가져오기 document.getElement~ $('선택자') 원하는 요소 내용 가져오기 .innerText .text() 원하는 내용으로 바꾸기 .innerText = '바꿀값' .text('바꿀값') 태그 포함해서 바꾸기 .innerHTML = '바꿀값' .html('바꿀값') 버튼 클릭 이벤트 .ad.. 2023. 1. 20.
자바스크립트 DOM (JavaScript Document Object Model) 자바스크립트 DOM (JavaScript Document Object Model) DOM (Document Object Model) HTML 문서 내의 요소들을 전부 단일 요소로 쪼개주는 개념 Hello (태그), id(속성), abc(속성에 대한 값), Hello(내용, 컨텐츠) HTML 요소들을 가져다가 JS로 설정하고 싶을 때 사용 : 각각의 단일 요소에 접근해서 사용 가능 1. HTML 요소를 가져오기 문서에 접근 : document. 요소를 가져오기 : getElement 아이디를 통해서 : ByID 클래스를 통해서 : ByClassName[인덱스번호] 2. 가져온 요소에서 컨텐츠만 추출 및 수정하기, HTML 태그 넣기 태그에 손대지 않고 안의 글자만 바꾸고 싶을 때 : innerText 태그.. 2023. 1. 15.
자바스크립트 객체 (JavaScript Object) 자바스크립트 객체 (JavaScript Object) 객체 (Object) 여러 속성을 하나의 변수 안에 저장할 수 있도록 해주는 데이터 타입 대표 괄호 = { } key(속성), value(값)로 구성 (파이썬 딕셔너리와 유사) 1. 객체 생성 : 객체명 = { } 2. 객체 출력 : 자바와 달리 바로 출력 가능 3. 객체 내 데이터에 접근 객체명.key이름 객체명['key이름'] 4. 객체 내 데이터 변경 객체명.바꿀데이터key = 바꿀데이터value 5. 배열 안에 객체를 넣을 수 있고, 객체 안에 배열을 넣을 수 있음 배열 함수 map() : 조건에 맞는 새로운 배열을 만들어내는 함수 객체명.map(매개변수 => 매개변수.key이름) (배열 내 객체 각각의 같은 key값을 가진 모든 데이터를 가져.. 2023. 1. 15.
자바스크립트 함수 (JavaScript Function) 자바스크립트 함수 (JavaScript Function) 1. 함수 : 특정 기능들을 묶어서 호출할 수 있도록 하는 기능 2. 함수의 선언 기존 함수 선언 (호이스팅이 일어남) : function 함수이름(매개변수){로직} 화살표 함수 선언 (Arrow Function) : const 함수이름 = (매개변수)=>{로직} return : 함수를 호출 했을 때 특정 값을 받고 싶다면 사용 ※ 매개 변수 : 함수의 재료, 로직 : 누군가가 함수를 호출했을 때 실행시킬 로직 3. 함수 호출 : 함수이름() ▶ 연습 ▶ 예제 사용자에게 숫자를 두 개 입력 받고, plus라는 함수를 이용해 두 개의 숫자를 더하기 결과는 팝업창으로 띄우기 ▶ 실습 햄버거 만들기 ① 사용자에게 먹고 싶은 햄버거의 종류를 입력 받기 ②.. 2023. 1. 14.
자바스크립트 배열 (JavaScript Array) 자바스크립트 배열 (JavaScript Array) 배열 여러 변수를 하나의 묶음으로 다룬다. 인덱스번호로 접근하고 0부터 시작한다. 다양한 데이터 자료형이 저장 가능하나 지양한다. 배열의 크기는 가변적, 데이터 추가 시 오류 없이 자동으로 저장 공간이 할당된다. 1. 배열 생성과 데이터 접근, 출력 ① 배열 생성 ※ 주의 let arr; let arr=[1,2,3] 이런 식으로 undefined 배열을 생성하지 말 것 ② 배열 확인 : console.log(배열이름), 배열이름을 직접적으로 적어줘도 확인 가능 ③ 배열 내 특정 인덱스에 접근 : 배열이름[원하는인덱스번호] ④ 배열 내 전체 데이터 출력 : 배열명.length(배열 전체 길이)를 이용한 for문을 사용해서 전체 데이터 출력 2. 배열 함수.. 2023. 1. 14.
자바스크립트 연산자, 조건문, 반복문 (JavaScript Operator, Conditional Statements, Loop) 자바스크립트 연산자, 조건문, 반복문 (JavaScript Operator, Conditional Statements, Loop) 1. 연산자 ※ 자바와 다른 연산자 / (실제 나누기 연산 결과) == (타입이 달라도 값만 같으면 true, 숫자를 문자로 강제 형 변환해서 비교) === (타입과 값이 모두 일치해야 true) 2. 조건문 ※ 자바와 다른 조건문 구문 구문 자체 형식은 똑같음 변수 타입은 자바의 int,str 등이 아닌 var, let, const 사용 문자열 비교 조건 시 자바의 .equals()가 아닌 비교연산자 사용 ▶ 연습 ▶ 예제 코로나 검사 프로그램 ① 사용자에게 코로나 검사 여부 확인하기 (confirm, '코로나 검사 하셨나요?') ② 검사를 했을 때 : 사용자에게 양성 음성.. 2023. 1. 14.
자바스크립트 자료형, 형 변환 (JavaScript type, type casting) 자바스크립트 자료형, 형 변환 (JavaScript type, type casting) 1. 자료형 (type) ① String (문자 형태) : 큰따옴표(" "), 작은따옴표(' ') 둘 다 사용 가능 let name = '명수' console.log('string :',name) ② number (숫자 타입) : 정수, 실수 모두 포함 ※ 타입을 알 수 있는 방법 (console 창의 글자 색상, typeof()) let num = 10 console.log('num :',num) let num2 = 13.33 console.log('num2의 타입은?', typeof(num2)) ③ boolean : 참, 거짓 let choice = true let choice2 = false console.log.. 2023. 1. 11.

티스토리툴바