본문 바로가기
반응형

전체 글256

JSP / JSP 컨테이너 JSP 자바프로그램을 컴파일 하고 실행할 수 있는 환경을 포함하고 있는 프로그램입니다. JDK는 자바컴파일 환경과 자바 런타임 환경으로 구성되어있는데 컴파일 환경은 자바 파일을 컴파일 할 수 있는 컴파일러를 포함한 일부분이고 런타임 환경은 컴파일된 자바 프로그램을 실행할 수 있도록 해주는 환경입니다. JDK 설치 후 시스템 내의 어느 위치에서도 자바명령을 사용할 수 있게 패스(Path)를 설정해주어야합니다. 자바 컴파일 명령과 실행명령 등이 있는 폴더의 위치는 JAVA_HOME\bin 입니다. 그래서 이 폴더까지의 경로를 패스(Path)에 등록해줌으로써 시스템 내의 어느 위치에서도 자바 명령을 사용할 수 있게 합니다. JSP 컨테이너 동적인 페이지 생성을 맡아서 처리할 프로그램으로 jsp 페이지에 대한 .. 2021. 10. 27.
노마드코더 ( addEventListener, toggle ) addEventListener("click", handleTitleClick); 1. listen하고 싶은 event를 찾는 가장 좋은 방법은, 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색한다. 2. javascript의 element를 원하기때문에 링크에 Web APIs라는 문장이 포함된 페이지를 찾는다 왜냐면 이건 JS관점의 HTML Heading Element란 의미이기 때문. 너무 복잡하면 element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 사용하면 됨. function handleMouseEnter() { title.innerText = "Mouse is here!" } function handleMouseLeave() { t.. 2021. 10. 27.
JavaScript를 이용한 계산기 만들기(addEventListener) * 계산할 값을 각각 입력하고 연산작업 버튼([더하기], [빼기], [곱하기], [나누기]) 클릭 시 하단의 계산한 값을 출력한다. * 계산할 값을 입력하지않고 연산작업 버튼 클릭 시 "계산할 값을 입력하세요"라는 안내를 출력한다. * [초기화] 클릭 시 입력한 값을 초기화 한다. document.querySelector('#plus').addEventListener('click',function() { //#plus 요소 클릭 시 핸들러(함수) 실행. const num1 = parseInt(document.querySelector('#num1').value); //#num1 요소의 값을 정수로 변환. const num2 = parseInt(document.querySelector('#num2').val.. 2021. 10. 21.
JavaScript를 이용한 나이 계산기(출생연도) * 태어난 연도를 입력하고 [submit]클릭 시 나이를 계산하여 출력시킨다. * 태어난 연도를 입력하지 않은 상태에서 [submit] 클릭 시 "태어난 연도를 입력하세요"라는 문구를 출력한다. StudyPoint.1 document.querySelector('#AgeBtn').addEventListener('click', function() { }; //addEventListener : 요소에 특정 이벤트 발생 시 실행할 함수(핸들러) 생성. HTML 문서 내 ID가 AgeBtn인 요소를 찾아 해당요소에 click 이벤트 발생 시 함수 실행. StudyPoint.2 if(! birthYear) { // birthYear 변수의 값이 Null인 경우 if { } 문 실행. alert('태어난 연도를 입력.. 2021. 10. 21.
JS 선행(DOM API) DOM API (Document Object Model Application Programming Interface) DOM은 문서 객체 모델(Document Object Model)을 의미하며 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서의 구조, 스타일, 내용 등을 변경할 수 있게한다. 그렇다면 DOM 구조는 무엇일까? DOM은 위의 이미지처럼 Tree형식의 자료구조로 되어있어 DOM 트리라고도 한다. Tree에서 위쪽의 노드를 부모노드, 아래쪽 노드를 자식노드라고 부르며, 최상단의 부모노드가 없는 노드를 Root(뿌리) 노드라고 하고 반대로 자식노드가 없는 노드를 Leaf(잎).. 2021. 10. 21.
JS 선행(표기법/데이터종류/변수/함수/조건문/메소드체이닝/defer) 1) 프로그래밍 표기법 ① dash-case(kebab-case) : 일반적으로 마이너스 기호를 사용하여 단어와 단어 사이를 꼬챙이 - 로 꽂은듯한 표기법. : HTML, CSS에서 주로 이용 ② snake_case : 언더바를 사용하여 단어와 단어 사이를 잇는 표기법 : HTML, CSS에서 주로 사용 ③ camelCase (낙타의 혹) : 첫글자만 소문자로 표기하고 다음에 오는 단어부터 맨 앞글자를 대문자로 적는 표기법. : JavaScript에서 주로 사용 ④ PascalCase : 카멜케이스와 유사하지만, 첫 단어의 맨 앞글자도 대문자로 적는 표기법. : JavaScript에서 많이 사용. 2) Zero-based Numbering : 일반적으로 숫자는 1부터 번호를 매기지만, 프로그래밍에서는 특.. 2021. 10. 20.
반응형

티스토리툴바