본문 바로가기

Javascript

 (101)
JS 문법 : 데이터 타입_숫자타입 6가지 ✅ 데이터 타입 : runtime : run 하는 time에 결정된다. 코드를 작성할 때가 아니라 실제 코드가 실행될 때 터미널에 코드가 실행될 때, 그 때 데이터 타입이 결정된다. java : String a = "abc"; const a = "abc"; 1️⃣ 숫자(Number) 1-1. 정수형 숫자(Integer) let num1 = 10; console.log(num1); // 10 console.log(typeof num1); // "number" 1-2. 실수형 숫자(Float) let num2 = 3.14; console.log(num2); // 3.14 console.log(typeof num2); // "number" 1-3. 지수형 숫자(Exponential) let num3 = 2.5..
JS문법 : 변수와 상수 변수가 무엇이고, 왜 필요할까요? 모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용 하기 위해 변수라는 메커니즘을 이용한다. 만약, 변수를 이용해서 재사용을 하지 않는다면, 우리는 “10 + 20 + 30 = 60”이라는 식에서 60이라는 결과값을 얻기 위해서 항상 저렇게 긴 식을 써줘야 한다. 변수를 사용한다면 60이라는 결과만 변수에 담아놓고, 계속해서 재사용하기만 하면 된다. 🙂 ✅ 변수의 5가지 주요 개념 변수 이름 : 저장된 값의 고유 이름 변수 값 : 변수에 저장된 값 변수 할당 : 변수에 값을 저장하는 행위 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 변수 참조 : 변수에 할당된 값을 읽어오는것 자바스크립트에서 변수는 var, let, ..
Javascript의 역사 (1995~) ✅ 1995년 자바스크립트 기원 : 😃 프로그래밍 언어 : 컴퓨터와 소통 언어 : 0, 1 : Java, C, JS, Python 등 🌐 made in 넷스케이프 커뮤니케이션(당시 Java유행으로 LiveScript → Javascript) 변경 🖥️ 브라우저(크롬, 인터넷 익스플로어, 마이크로소프트 엣찌, 파이얼 폭스, 싸파리 등) 동작 스크립트 언어 1999년 자바스크립트 표준화(ECMA-262) 완료 2005년 (Javascript 기반의) AJAX 기술 등장 : 부분 새로고침 비동기 웹 애플리케이션 개발 가능 폭발적인 UX(User Experience) 향상 🚀 2008년 V8 엔진 출시(google crom) super fast(코드 실행 속도 상당부분 개선) 🛠️ 컴파일러, 메모리관리 시스템 ..
fetch 자동실행 /날씨 자동 로밍 함수 실시간 서울 날씨 자동 로딩 함수 & 날씨 API $(document).ready(function() { fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => { console.log(data) }) }) ✅ 내 생애 최고의 영화들 제목과 영화 기록하기 버튼 사이에 현재 서울의 날씨 뼈대 추가 fetch를 사용해 값을 가져오기 백틱을 사용해, 뼈대/문자/변수를 모두 섞어서 붙여보기 doctype html> 스파르타코딩클럽 | 부트스트랩 연습하기 @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swa..
fetch 반복문 / 조건문 doctype html> Fetch 연습하고 가기! div.question-box { margin: 10px 0 20px 0; } table { border: 1px solid; border-collapse: collapse; } td, th { padding: 10px; border: 1px solid; } .red { color: red; } function q1() { fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => { let rows = data['getStationList']['row'] $('#names-q1').empty() rows.forEach((a) => { let..
fetch / forEach / $('#id').append(temp_html) ✅브라우저 개발자도구(오른쪽 클릭→검사)에서 console탭에서 확인 function q1() { fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => { let rows = data['RealtimeCityAir']['row'] rows.forEach((a) => { let gu_name = a['MSRSTE_NM'] let gu_mise = a['IDEX_MVL'] console.log(gu_name,gu_mise) }) }) } ✅ 웹에 붙일 temp_html을 만들기 function q1() { fetch("http://spartacodingclub.shop/sparta_api/se..
Fetch / console.log(data) Fetch를 쓰면서 jQuery를 사용할 것이기 때문에 jQuery를 임포트한 페이지에서만 동작한다. 즉, http://google.com/ 과 같은 화면에서 [개발자도구]를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜬다. Uncaught TypeError: $ is not a function → jQuery 라는 게 없다는 뜻 Fetch 연습 prac2.html doctype html> Fetch 시작하기 Fetch 연습을 위한 페이지 ✅ Fetch 기본 골격 fetch("여기에 URL을 입력").then(res => res.json()).then(data => { console.log(data) }) fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한..
서버→클라이언트: "JSON" 서울시 OpenAPI에 접속 : 서울시 미세먼지 OpenAPI http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 크롬 익스텐션 JSONView를 설치 https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko JSONVue Validate and view JSON documents chrome.google.com ✅ JSON : Key:Value (자료형 Dictionary와 유사) RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트..
JQuery / $('#id').append(temp_html) checkResult() 함수 사과 >> ${a} function checkResult() { let fruits = ['사과','배','감','귤','수박'] fruits.forEach((a) => { let temp_html = `${a}` $('#q1').append(temp_html) }) } let people = [ {'name':'서영','age':24}, {'name':'현아','age':30}, {'name':'영환','age':12}, {'name':'서연','age':15}, {'name':'지용','age':18}, {'name':'예지','age':36} ] $('#q2').empty() people.forEach((b) => { let name = b['name'] let age..
JQuery 반복문 / 조건문 javascript만 사용하면 복잡하기 때문에 jQuery를 사용한다. HTML의 요소들을 조작하는 편리한 Javascript를 위해 미리 작성해둔 라이브러리, Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장한 것. # jQuery와 Javascript - 코드 비교해보기 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것! (그렇게 때문에, 쓰기 전에 꼭 "임포트"를 해야한다.) Javascript로 길고 복잡 document.getElementById..

티스토리툴바