JSON 실습은 body 부분에 input 태그 아래 주석으로 달아둔 결과 값을 잘 관찰해보자! 💫 JsonTest01.html 💫 JsonTest02.html ➰체크할 내용➰ - onclick="myJsonObject2.test='new test'; alert(myJsonObject2.test)" : 클릭이 일어나면 myJsonObject2.test 속성의 값을 'new test'로 바꾸고, 바뀐 값으로 alert 창을 띄어주세요~! 💫 JsonTest03.html 💫 JsonTest04.html (『eval()』) ➰체크할 내용➰ · eval() - 변수를 자바스크립트 함수처럼 사용할 수 있도록 해 주는 함수 - 즉, 정적인 문자열을 동적인 코드 형식으로 처리해 주는 함수 - but!! 보안성 이슈로..
📚 Study/Javascript
🔎 JSON(JavaScript Object Notation) 이란? - JavaScript Object Notation, RFC 4627 - Javascript 구문 형식을 따르며, 언제나 플랫폼에 독립적 - 미디어 타입 : 'application/json' - 표현 가능한 자료형 : object, array, string, number, boolean, null ✔ 개요 JSON은 네트워크 상에서(대표적으로 인터넷 상에서) 데이터를 주고 받을 때, 그 데이터를 표현하는 방법이다. 자료의 종류에 큰 제한은 없으며 특히 프로그램의 변수값을 표현하는데 적합하다. JSON(JavaScript Object Notation)은 경량 데이터 교환 방식으로 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성하는 과..
💫 AjaxTest05 (추천 검색어) # web.xml, Test05Send.java 코드 생략! # AjaxTest05.jsp AJAX 실습 - 추천 검색어 검색어 추천 검색어 ➰체크할 내용➰ - 전체적으로는 주소 처리 방식과 비슷해서 큰 어려움은 없었지만 정규표현식!은 따로 공부해보기✔ # Test05.java - DB 사용하지 않고 ArrayList에 키워드 저장하고 기능 구현해보기 protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // GET 방식이든 POST 방식이든 // 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 ..
💫 AjaxTest03 (아이디 중복 확인) # web.xml (해당되는 부분만 코드 기록~) test03send com.test.ajax.Test03Send test03send /test03send.do test03 com.test.ajax.Test03 test03 /test03.do # Test03Send.java 해당되는 부분만 코드 기록~ ( 사용자 정의 메소드 부분) protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // GET 방식이든 POST 방식이든 // 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드 Stri..
💫 AjaxTest01 # AjaxTest01.html AJAX 를 이용하여 이 텍스트를 바꾸어본다. Content 바꾸기 # ajaxTarget.txt (텍스트만 있는, 버튼 누르면 요청할 페이지 코드는 생략~~) 💫 AjaxTest02 # ajax.js - AJAX 객체 생성 함수 정의 var ajax = null; function createAjax() { if (window.XMLHttpRequest) return new XMLHttpRequest(); else if (window.ActiveXObject) return new ActiveXObject("Msxml2.XMLHTTP"); else return null; } # web.xml test02send com.test.ajax.Test02Se..
🔎 AJAX(에이작스) ✔ 개요 AJAX 는 XML 에 기반한 종합 기술로 비동기 자바스크립트 XML (Asynchronous Javascriopt And Xml) 을 줄인말로 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용하는 기술이다. AJAX 는 하나의 독립된 기술이 아니다. 화면은 HTML + CSS 로 구성 및 작성하고 화면에 대한 조작과 상호 작용은 문객체모델(Document Object Model : DOM)로 처리하고 데이터 교환은 XML 형식으로 처리하며, 데이터 변환과 검색은 XML 기술인 XSL 과 XPath 를 사용하며, 비동기 통신에는 웹 브라우저 안에 내장되어 있는 XMLHttpRequest 객체를 사용하고, (비동기 : 아메리카노 주문하고 진동벨 받아감, 나올 때..
# Test024 ✔ 입력받은 데이터를 테이블 형태로 붙여넣기 자바스크립트를 활용한 테이블 동적 생성 이름 전화번호 주소 회원 정보 입력 이름전화번호주소 홍길동010-1111-1111제주 서귀포 둘리010-2222-22232전남 여수 또치010-3333-3333경남 산청 희동이010-4444-4444서울 마포구 # Test025 (만년 달력 만들기) ✔ 달력 테이블을 생성하는데 3가지 방법으로 풀이 (① 기존 테이블 활용, ② tbody 활용, ③ 새로운 달력 그리기) 테이블 동적 생성으로 만년달력 그리기 년 월 일 월 화 수 목 금 토 ① 기존 테이블 활용 ② tdody 활용하기 ③ 새로운 달력 그리기
# Test019.html ✔ 입력받은 수까지의 합을 계산하되, 10의 배수가 될 때 마다 중간합 출력하는 페이지 구성 자바스크립트 활용 정수 입력(100이상) ➰체크할 내용➰ 1) document.getElementById("textarea의 id").value="" ; : 칠판을 지우자! 초기화! - += 로 문자열을 이어붙이는 형태이기 때문에 새로운 정수를 입력하면 기존 결과값에 이어 붙어서 나오게 되는 현상이 발생하게 되므로, 함수가 불러지면 칠판을 지우는 작업 (공백 상태)을 먼저 수행해준다. # Test023
🔎 Javascript 컴파일 과정이 필요없거나 처리 과정이 적은 프로그램에 유리한 스크립트 언어로 다른 언어에 비해 소스 코드의 수정 및 유지보수가 간편한 편이다. HTML 코딩에서 자바스크립트 소스 명시만으로 웹 브라운저가 자동 실행된다. 자바 스크립트는 서버 스크립팅 언어와 연동되어 입력란에 입력한 값이 제대로 된 값인지의 여부 등을 체크하는 상호작용적 요소와 웹 페이지에 동적인 효과 등을 적용하는 부분에 사용되며 그 밖에도 많은 기능을 사용자가 추가하여 사용하는 매우 중요한 요소라고 할 수 있다.! ※ 자바스크립트는 HTML 문서에 상호작용하는 요소와 동적인 요소를 추가하기 위해 사용하는 언어!! ✔ HTML에 Javascript 추가하기 1) Inline Javascript (HTML Tag 속..
