본문 바로가기
728x90
반응형

분류 전체보기244

[JavaScript] To Do List 예제 화면 구성 My To Do List Add 삭제 완료 Complete To Do List CSS 구성 todo.css * { box-sizing: border-box; } #grid { display: grid; grid-template-columns: 1fr 1fr; } #grid > div { margin: 30px; } .button_area { width:100%; } .button_area > div { margin:20px 30%; } .date { position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px; } /* Remove margins and padding from the list */ ul { margin: 0; paddi.. 2023. 3. 7.
[JavaScript] 회원정보 예제 불러오기 : 기본정보(userId)를 입력하고 불러오기 버튼을 누르면 해당 회원이 json 파일에 있는 회원이면 해당하는 회원의 정보를 불러온다. 저장 : 기본정보, 이름, 주소, 나이, 핸드폰 번호는 필수값이고 입력하지 않고 저장버튼을 누르면 입력필드를 빨갛게 표시한다. json 데이터 {"users": [ {"userId": "hong", "name": "홍길동", "address": "서울특별시 중랑구", "age": 29, "phone": "01011112222", "housePhone": "0212345678"}, {"userId": "chulsoo", "name": "배철수", "address": "경기도 오산시 오산구", "age": 59, "phone": "01055543467", "hou.. 2023. 3. 7.
[JavaScript] jQuery jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. 를 입력해주면 jQuery를 사용하겠다라는 말이 된다. 사용하는 script로직 이전에 넣어줘야한다. 순서에 유의하지 않으면 jQuery문법이 html에서 먹지않는다. 제어 대상 찾기 예제 WEB HTML CSS Javascript SAPUI5 jQuery 태그, Class, Id 모두 사용가능하다. Javascript 자바스크립트에선 이런식으로 변수를 선언해서 데이터.. 2023. 3. 7.
[JavaScript] JSON Javascript Object Notaiton의 약자이다. 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량도 적다. 이런 이유로 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송하는 등에 많이 사용된다. JSON 문법은 세 가지 타입을 사용한다. 단순한 값 : JSON에서 문자열, 숫자, Boolean, null은 모두 자바스크립트와 같은 문법으로 표현한다. Undefined는 지원되지 않는다. 객체 : 객체는 순서 있는 키-값 쌍으로 표현한다. 각 값은 원시 타입일 수도 있고 객체나 배열 같은 복잡한 타입일 수도 있다. 배열 : 배열은 숫자형 색인으로 접근할 수 있는, 순서 있는 목록으로 표현한다. 각 값은 단순한 값이나 객체, 다른 배열 등을 모두 쓸 수 있다. 자바스크립트에선.. 2023. 3. 7.
[JavaScript] 이벤트 이벤트 등록하는 방법에는 3가지가 있다. inline 방식 태그안에 넣는 방법이다. 재사용이 불가능하다는 단점이 있다. buttonType propertyListener 방식 마지막에 셋팅한 event만 실행한다. buttonType 실행시 두번째 클릭 alert만 나온다. addEventListener 방식 세팅한 Event 모두 실행한다. 문법: addEventListener("이벤트종류","콜백함수"); buttonType 모두 실행되기 때문에 첫번째클릭, 두번째클릭 알림창이 모두 나온다. 숫자만 입력할 수 있게 하는 이벤트 2023. 3. 7.
[JavaScript] Element 속성 속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 이 속성을 제어하는 API를 알아본다. 텍스트를 누르면 네이버홈페이지가 나오고 버튼을 클릭한뒤 다시 텍스트를 누르면 다음홈페이지가 나오게 해본다. NAVER change 버튼을 클릭한뒤 브라우저에서 f12의 elements를 보면 id이름과 주소가 daum홈페이지의 값, 변경된값으로 바뀌어있는걸 확인할 수 있다. getAttribute(key) : 값 가져옴,return값 존재 setAttribute(key,value) : 값 내보냄, 값 세팅, return값 존재x 이미지를 클릭하면 커지고, change 버튼을 누르면 이미지가 변경되게 해본다. changeImg 2023. 3. 7.
728x90
반응형

티스토리툴바