본문 바로가기
반응형

Web Front 개발공부/HTML과 JAVASCRIPT16

슬기형의 자바스크립트 기초강의 - HTML 변경하기 02 슬기형의 자바스크립트 기초강의 - HTML 변경하기 02 이전 강의 슬기형의 자바스크립트 기초강의 - 알림 박스, 다이얼로그 박스 표시 01 슬기형의 자바스크립트 기초강의 - 알림박스, 다이얼로그 박스 표시 01 슬기형의 JS초보무료 강의 - 다이얼로그 박스 표시 01 자바스크립트로 브라우저 실행 시 알림 박스를 만들어 보자. 다이얼로그 박스라고들 한다. 실행 화면 1 01_alert.html 소스 코드 다이얼로그 박 ecolumbus.tistory.com 이번 포스팅은 자바스크립트로 HTML을 변경하는 기능을 알아본다. 이미 표시되고 있는 HTML의 요소를 자바스크립트로 얻어오고 콘텐츠를 변경한다. 매우 중요한 내용이므로 익혀두면 많은 도움이 된다. 구현할 기능 1. 변경하고 싶은 부분의 HTML 태그.. 2022. 12. 25.
슬기형의 자바스크립트 기초강의 - 알림박스, 다이얼로그 박스 표시 01 슬기형의 JS초보무료 강의 - 다이얼로그 박스 표시 01 자바스크립트로 브라우저 실행 시 알림 박스를 만들어 보자. 다이얼로그 박스라고들 한다. 실행 화면 1 01_alert.html 소스 코드 다이얼로그 박스 표시 경고 다이얼로그 박스를 표시한다 JavaScript Samples 설명 alert, window.alert window.alert() 나 alert()나 동일하다. 초보강좌니 길게 설명은 안 하겠다. 우선 같은 기능이라고 알고 있자. 다만 특이한 점은 alert() 안에 숫자를 넣었을 경우, 숫자와 문자를 혼합으로 넣었을 경우, 자바스크립트 엔진이 이해하는 방식이 다르다. 숫자계산 : alert(100 + 156) : 오로지 숫자만 넣었고 수식을 넣었다. 그리고 싱글 쿼테이션이 없으므로 계산.. 2022. 12. 24.
JavaScript Fetch API사용 예제 JavaScript Fetch API사용 예제 자바스크립트 자체 통신 API Fetch를 이용. 간단 예제를 포스팅해본다. Fetch API는 Promise로 서버에 요청을 할 수 있는 표준이 되어가고 있다. 간단한 예제 초 간단 예제를 작성해본다. 이전에 포스팅한 Json 무료 가상 Rest JSONPlaceholder API를 백엔드라고 가정하고 통신을 해본다. 2022.12.06 - [슬기로운 자바 개발자 생활/etc] - Json 무료 가상 Rest API 서버 - JSONPlaceholder Json 무료 가상 Rest API 서버 - JSONPlaceholder HTTP 통신을 해서 JSON 데이터를 받아야 할 경우 (Backend API가 필요할 때) J-query나 리액트, Vue 같은 자.. 2022. 12. 20.
웹브라우저 저장소 스토리지storage 간단 예제 웹브라우저 저장소 스토리지storage 간단 예제 HTML5가 되면서 storage 기능이 추가 됐다. 간단하게 localStorage 예제를 만들어 사용해본다. 1. 간단한 예제 및 실행 로컬스토리지 예 브라우저를 실행 한 후, F12를 눌러서 Console 탭으로 이동해 로그를 보면 코딩했던 예상대로 확인을 해볼 수 있다. 2. 웹브라우저 저장소 웹 스토리지 쿠키 웹 스토리지는 html5 부터 사용가능한 Key-Value 형식의 저장소이며, 로컬 스토리지와 세션 스토리지로 나뉜다. 쿠키는 서버와 클라이언트 간의 데이터 교환을 위해 만들어진 Key-Value 형식의 저장소 3. 로컬 스토리지와 세션 스토리지의 차이 그리고 쿠키 둘의 차이는 데이터의 유지와 범위로 약간의 기능이 나뉜다. 두 차이를 이해한.. 2022. 12. 20.
반응형