Front/js
-
html 에서 javascript 다루기Front/js 2024. 7. 23. 17:59
▤ 목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 ✔ HTML 에서 js(javascript) ⌨ 코드로 보기자바스크립트 연습 이런 식으로 표에 넣을 수 있다. 👏 연습 문제9단까지 구구단을 출력하자.단, table tag를 사용조건1 : 단은 행으로 구분조건2 : 홀수 단은 aqua배경색으로 채우기 ( td가 아닌 tr에 색을 넣자.)조건3 : 모든 계산식이 각 테이블 열에 맞춰 들어가도록 하자. 풀이식더보기 ✔ 외부 js 파일 불러오기 위와 같이 html은 webapp에 존재하고js 파일 속에 js4.js 파일이 존재한다고 가정하자. 위와 같은 코드를 사용하면 선언한 해당 부분에서 js 파일이 들어간다.권장 사항 태그 안에 작성하자. ..
-
JS의 라이브러리 (jQuery)Front/js 2024. 7. 11. 18:07
▤ 목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 ✔ jQuery⌨ jQuery란?javaScript 라이브러리이다.html 속 클라이언트 javascript 작업을 간소화해 생산성을 향상 시켜주도록 설계된 자바스크립트 라이브러리이다.라이브러리란 프로그램 제작시 자주 사용하는 함수, 서브루틴 등 여러 기능을 모아둔 파일을 의미한다.재사용성이 높고 프로그램 코드도 간결해진다. DOM 요소의 속성을 설정한다.DOM 요소를 생성하거나 삭제, 표시 또는 숨긴다.클릭 이벤트, 마우스 이동, 동적 스타일 등을 정의한다.Ajax를 호출한다(비동기적 데이터 교환) 💻 Vanila JSvanila JS는 외부 라이브러리나 프레임워크를 쓰지 않는 순수한 javaScript를 이르는..
-
Ajax 사용, DB 읽어와서 웹브라우저에 보이기(레거시 방식 jsp)Front/js 2024. 7. 10. 14:25
▤ 목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 ✔ DB연결DB에 있는 데이터를 web브라우저에 보이려고 한다.DB의 데이터를 가져오기 위해서는 jsp를 사용해야한다. 데이터 테이블은 아래와 같다. ⌨ jsp 파일JDBC로 연결{"sangpum":[]}jsp는 안에 java를 사용한다.그 밖은 html소스를 사용한다. 위의 코드는 java를 사용해서 DB를 연결하는 코드이다.우선 프린트가 잘되는지 확인해보기위해 out.print(rs.getString("sang"));이 코드를 찍어봤다. 데이터베이스와 잘 연결되었음을 알 수 있다. 그럼 각 데이터를 추출해보자. String result = ""; while(rs.next()){ result +="{"; re..
-
Ajax) get방식/ post 방식 데이터를 받기Front/js 2024. 7. 10. 12:36
▤ 목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 ✔ 기본적인 세팅get 방식과 post 방식 모두, 서버에 요청을 하는 메서드이다.이때 get 방식은 url뒤에 붙여서 보낸다. ⌨ html 파일Ajax get,post 요청이름: 나이: 이렇게 get 버튼을 누르면 get방식으로 post 버튼을 누르면 post 방식으로 데이터를 넘기도록 하겠다. 💻 getpost.jsp ✔ get 방식⌨ 코드let xhr;function getFunc(){ //alert('a'); let irum = frm.name.value; let nai = frm.age.value; //alert(irum+" " +nai); fName="getpost.jsp?name="+..
-
Ajax( Asynchronous JavaScript and XML / XMLHttpRequest )Front/js 2024. 7. 9. 17:23
▤ 목차" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 더보기아래 정리는 해당 코드를 기반으로 진행한다. [ html파일 ] Ajax test Ajax원리를 찾아서 CSV 읽기 xml 읽기 json 읽기 각각의 txt,xml .. 등 파일은 따로 만들고 진행한다. ✔ Ajax ( Asynchronous JavaScript and XML )웹서버와의 통신을 비동기로 할때 사용한다.네트워크상 값이 언제 넘어올지 모르기때문에 비동기 상태로 받아야한다. 이름 그대로 JavaScript와 xml파일을 이용하는 비동기 방식을 말한다.서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있도록 해준다.최근에는 Json 파일 형식을 주로 사용한다.xml 파일보다 Json파일을..
-
JavaScript) 모듈이란?Front/js 2024. 7. 8. 12:01
▤ 목차">HTML 삽입미리보기할 수 없는 소스 일반적으로 js 코드를 별도의 파일로 작성후 하나의 같은 기능을하는 모듈을 만들어 언제든 필요한 모듈을 불러오는 방법이 있다. 이런 식으로 부를 수 있다. 👏 중요내보내고 받아야하는데 이때 다양한 파일이나 형식을 내보내고 싶을 수 있다.이제 각 파일이나 형식을 export / import 하는 방식을 알아보자. ✔ Export 와 Import 방법 📝 변수🔷 export (js 파일)export let user ='홍길동'; 🔷 import (js 받는 파일)import {user} from './js/js32module.js';console.log(user); 📝 json 형식🔷 export (js 파일)const na..
-
객체에 대해서(생성과 중첩 객체)Front/js 2024. 7. 5. 15:11
▤ 목차">HTML 삽입미리보기할 수 없는 소스 ✔프로토 타입 객체⌨ 프로토 타입java는 클래스 기반 객체지향 프로그래밍 언어이다.객체 생성 이전에 클래스를 정의하고 객체를 생성한다. 하지만 javascript는 프로토타입 기반 객체지향 프로그래밍 언어이다. 자바스크립트의 동작 원리를 잘 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야한다. 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이 객체를 생성할 수 있다.자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있다. 👏 객체 생성 방법자바스크립드의 객체 생성 방법에는1. Object 생성자2. 객체 리터럴3. 생성자 ..
-
javaScript 클래스(+ 프로퍼티 getter와 setter / 상속)Front/js 2024. 7. 4. 17:08
▤ 목차">HTML 삽입미리보기할 수 없는 소스 함수형 프로그래밍 언어인 javascript에서 최근 클래스의 개념이 나왔다.java에서 클래스와는 차이가 있다. 그 차이를 위주로 정리해보려고한다.java가 익숙한 사람은 java와 비슷한 부분이 있기에 금방 익숙해 질 수 있다고 개인적으로 생각한다. ✔ 클래스클래스는 OOP에서 특정 객체를 생성하기 위해 멤버를 정의하는 일종의 틀(설계도)을 말한다.기존의 PROTOTYPE을 기반으로 객체를 생성하는 것보다 명료하게 객체 작성이 가능하다.클래스도 함수와 같이 호출하기 전까지는 코드가 실행되지 않는다. ⌨ 형식class 클래스명{ 멤버 변수; constructor(){} // 생성자 메소드명(){}; //메서드} JAVA와 비교..