본문 바로가기
728x90
반응형

전체 글244

[UI5] JSON Model 입력필드의 값을 바꾸면 오른쪽의 텍스트도 바로 변경된다. 인사버튼을 누르면 입력필드에 입력한 데이터와 함께 반갑습니다라는 알림창이 뜬다. App.view.xml i18n>showHelloButtonText 프로포티는 /로 가져왔다면 Model을 가져올땐 >로 가져온다. 키워드를 적어주면, 키워드에 해당하는 값을 가져온다. 그래서 버튼의 텍스트는 해당 키워드의 value인 '인사'를 가져오게 된다. press=".onShowHello" .은 명시한 파일의 펑션을 말하고, 버튼을 클릭했을때 onShowHello라는 함수를 실행한다. sap.m.Input control을 view에 추가하면 이를 통해 사용자는 인사말을 받을 사람을 입력할 수 있다. XML 뷰에 대한 선언적 바인딩 구문을 사용하여 모델에 해당 .. 2023. 3. 7.
[UI5] Binding (Two-way& One-way) 체크박스를 해제하면 입력가능하게 필드를 열어준다. App.view.xml 바인딩을 하려면 중괄호 {}를 사용한다. property를 가져오려면 /프로포티로 사용한다. 함수를 실행할땐 앞에 .을 붙여 사용한다. App.controller.js sap.ui.controller("test.App", { onInit: function() { var oModel = new sap.ui.model.json.JSONModel({ firstName: "Harry", lastName: "Hawk", enabled: false }); this.getView().setModel(oModel); }, //양방향 //값이 변경되었을때 firstChange : function () { var oModel = this.getVie.. 2023. 3. 7.
[UI5] UI5 구성 순서는 첫시작으로 html파일 index.html을 만들고 oninit을 통해 index.js를 읽어온다. view.xml으로 화면을 그리는 영역을 구성한다. controller.js로 화면을 구성한다. 현재 작업들을 수행할 파일을 모두 포함하는 가장 상위 폴더 sap.ui.demo.walkthrough를 먼저 생성한다. 생성한폴더에 하위폴더인 WebContent을 생성한다. index.html WebContent 폴더에 새로운시작 html파일인 index.html파일을 생성해준다. src="/resources/sap-ui-core.js" src 속성은 브라우저에 SAPUI5 코어 라이브러리를 찾을 위치를 알려준다. SAPUI5 런타임을 초기화하고 data-sap-ui-libs 속성에 지정된 라이브러리와.. 2023. 3. 7.
[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
반응형

티스토리툴바