본문 바로가기

전체 글163

[JavaScript]연산자(Operator) ⚫자바스크립트 연산자 ⬇️연산자 처리 순서에 의한 분류⬇️ 최우선 연산자 : (), [], {}, 단항 연산자 : +, -, ++, --, !, new, typeof 산술 연산자 : *, /, %, +, - 관계(비교) 연산자 : >, >=, <, <=, ==, !=, ===, !== 논리 연산자 : &&, || 삼항 연산자 : 조건식?참값:거짓값 대입 연산자 : =, *=, /=, %=, +=, -= 실습예제👩‍💻 자바스트립트 연산자 123과 "123"은 값은 같지만, 자료형은 각각 number와 string으로 다르다. 그런데 == 또는 != 연산자는 값만 비교 하기 때문에 두개가 같다고 볼 수 있다. 그러나 === 또는 !== 연산자는 자료형과 값 둘 다 비교하기 때문에 자료형에서 서로 다른 123.. 2023. 12. 29.

[JavaScript]변수(Variable) 및 자료형 자바스크립트는 자바와 많이 유사함. 자바에서 배웠던 변수를 떠올리며 살펴보면 됨. 실습예제 1👩‍💻 자바스트립트 변수 및 자료형 변수(Variable) : 리터럴(값)을 저장하기 위한 저장공간(메모리)의 이름(식별자) 자바스크립트는 변수를 선언하지 않아도 값을 저장하여 사용 가능하지만 변수를 선언하는 것을 권장 형식) var 변수명 = 초기값 자바스크립트 변수는 저장값에 따라 변수의 자료형이 자동으로 변환 자바스크립트 자료형 - 숫자형(number), 문자형(문자열 - string), 논리형(boolean) , 함수형(function), 객체형(object) variable은 같은 이름의 변수 재선언해도 에러가 발생하지 않아, 아래와 같이 경고창이 두번 다 실행됨. 실습예제 2👩‍💻 자바스크립트에서 변수.. 2023. 12. 28.

[Java]OOP-클래스와 클래스의 관계 & Car 객체 구현 예제 ⚫클래스와 클래스의 관계 => UML(Unified Modeling Language)를 사용하여 클래스 다이어그램(Class Diagram)으로 표현 1. 일반화(Generalization) 관계 : 상속 관계 - X is a Y => 클래스를 선언할 때 기존 클래스를 제공받아 작성하기 위한 관계 => 사원 클래스와 관리자 클래스의 관계 - 관리자는 사원이다.(O), 사원은 관리자다.(X) 2. 실체화(Realization) 관계 : 상속 관계 => 인터페이스를 제공받아 새로운 클래스를 작성하기 위한 관계 => 인터페이스 : 현실에 존재하는 대상을 클래스보다 추상적으로 표현하기 위한 자료형 => 도형 인터페이스와 삼각형 클래스의 관계 3.연관(Association) 관계 : 포함 관계 = X has a .. 2023. 12. 28.

[JavaScript]자바스크립트(JavaScript) 특징 & 작성(선언)하는 법 & 출력하는 법 🤔자바스크립트(JavaScript)란? 웹페이지에서 발생된 이벤트를 처리하기 위한 기능을 제공하는 스크립트 프로그래밍 언어 (클라이언트 브라우저에서 해석되어 실행) => 자바스크립트 표준 규약은 ES15(ECMAScript15)까지 정의되어 있으나 일반적으로 ES6(ECMAScript6) 표준 규약을 사용하여 작성 => HTML로 웹의 내용 작성, CSS로 웹 디자인, JavaScript로 웹의 동작 구현 => 타입을 분명하게 명시하지 않아도 되는 인터프리터 언어(=컴파일 작업 필요 없음) *[참고]네이버 지식백과에서 용어 확인⬇️ https://terms.naver.com/entry.naver?docId=3580851&cid=59088&categoryId=59096 자바스크립트 우리가 매일 접속하는 웹.. 2023. 12. 28.

[Java]OOP-member 클래스 ⚫VO(Value Object) 클래스 : 특정 대상의 값을 저장할 목적의 객체를 생성하기 위한 클래스 🔘구성 요소 1. 필드 => 표현 대상의 값을 저장하기 위한 변수를 선언 2. 생성자 => 필드에서 선언된 변수에 초기값을 저장하기 위한 메소드 작성 => 따로 작성하지 않으면 기본생성자가 자동 생성 => 그러나 생성자를 작성하면 기본 생성자는 자동 생성되지 않음. (생성자 오버로딩을 통해 기본생성자부터 보통 여러개를 작성함) 3. 메서드 => 명령을 실행하여 객체의 기능을 구현하기 위한 클래스의 요소 더보기 🔸참고🔸 this : 메소드 내부에서 메소드를 호출한 객체의 메모리 주소(HashCode)를 저장하여 객체의 객체의 요소(필드 및 메소드)를 사용하기 위한 키워드 => 메소드 내부에서 객체를 대신.. 2023. 12. 27.

[Java]OOP - 메소드(Method) ⚫메소드(Method) : 클래스 내부에 선언한 함수 - 멤버함수 => 필드(멤버변수)를 사용하여 필요한 기능을 제공하기 위한 명령의 모임 => 메소드 내부에서만 Java 명령을 작성하여 실행(외부에는 절대 작성할 수 없음!) *함수(Function) : 매개변수로 값을 제공받아 연산 처리하여 반환하는 명령의 모임 🔘메소드 선언 방법 형식) 반환형 메소드명(자료형 변수명, 자료형 변수명...) { 명령; ... } 🔸 메소드를 호출(Invoke)해야 메소드 내부에 작성된 명령 실행 - 기능 구현 🔸 반환형(ReturnType) : 메소드를 호출하여 얻을 수 있는 결과값에 대한 자료형 => void 자료형(무반환형) : 메소드를 호출하여 얻을 수 있는 결과값이 없는 경우에 사용하는 자료형 🔸 메소드명은 식.. 2023. 12. 27.

[Java]접근제한자(Access Modifier) - (1) 🤔접근제한자(Access Modifier) 클래스, 필드, 생성자, 메소드 작성시 클래스 외부에서의 접근을 제한하기 위해 사용하는 제한자 => 정보 은닉(data hiding)을 통해 사용자가 최소한의 정보만으로 프로그램을 사용할 수 있게 하기 위해 => 종류 및 허용 범위 : public > protected > default > private 접근제어자 클래스 내부 동일 패키지 상속받은 클래스 (다른 패키지) 이외 다른 패키지 private O X X X default O O X X protected O O O X public O O O O ⚫private 접근 제한자 필드, 생성자, 메소드를 클래스 내부에서만 사용 가능하도록 설정하는 접근 제한자 - 은닉화 => 클래스 외부에서 필드, 생성자, 메소.. 2023. 12. 26.

[HTML] <p> <div> <span> 차이점 https://mainia.tistory.com/3289 HTML div, span 태그 사용법과 차이 와 태그는 영역을 설정할 때 필요합니다. 웹 페이지에 레이아웃을 구성하고자 할 때 없어서는 안 되는 태그입니다. 그럼 두 태그의 차이는 무엇일까요? 두 가지가 있습니다. 하나는 줄 바꿈 입니 mainia.tistory.com https://blog.naver.com/leejsys_cs/222982318025 vs vs 차이점 div와 p는 블록요소이고 span은 인라인 요소이다. p는 단락을 나누는 용도이고 div는 layout 계층을 나누는... blog.naver.com 2023. 12. 26.

[HTML]19_fieldset 태그 ⚫fieldset 태그 : 입력태그의 영역을 구분하기 위한 태그 => 하위태그 : legend 태그, input 태그, textarea 태그, select 등 fieldset 태그 회원가입 인증정보 아이디 : 비밀번호 : 개인정보 이름 : 이메일 : 전화번호 : 회원가입 다시입력 실행결과⬇️ 2023. 12. 26.

[HTML]18_datalist 태그 ⚫datalist 태그 : input 태그에 입력 가능한 값을 제공하기 위한 태그 => 하위태그 : option 태그 datalist 태그 좋아하는 과목 : JAVA JSP SPRING 제출 실행결과⬇️ 아래와 같이 직접 입력할 수 있음. 옆에 화살표를 클릭하면 옵션으로 달아놓은 리스트가 뜨고 선택할 수도 있음. 2023. 12. 26.

[HTML]17_select 태그 ⚫select 태그 : 다수의 아이템에서 하나의 아이템을 선택하여 입력하기 위한 태그 - 입력태그 => 하위태그 : option 태그, optgroup 태그 => 기본적으로 하나의 아이템을 선택하여 입력받지만 multiple 속성을 사용하여 다수의 아이템을 선택해 입력 가능 select 태그 학과 건축공학과 기계공학과 산업공학과 컴퓨터공학과 화학공학과 사학과 어문학과 철학과 실행 결과⬇️ 2023. 12. 26.

[HTML]16_label 태그 ⚫textarea 태그 : 키보드로 다수행의 문자값을 입력받기 위한 태그 - 입력태그 => 태그내용이 textarea 태그의 초기값으로 사용 - value 속성으로 입력태그에 초기값 제공 불가능 textarea 태그 장점 장점이 아주 많습니다. 단점 제출 실행결과⬇️ 장점 부분에 '장점이 아주 많습니다'라고 적어놓으니, 실행하자마자 텍스트박스 안에 그 문구가 뜸. 2023. 12. 26.

[HTML]15_label 태그 ⚫label 태그 : 입력태그에 포커스(Focus)를 제공하기 위한 태그 label 태그 label 태그 미사용 이름 : 취미 : 독서 게임 등산 낚시 label 태그 사용 이름 : 취미 : 독서 게임 등산 낚시 실행결과⬇️ 라벨태그를 사용하지 않으면 체크박스를 클릭해야만 체크 표시됨. 그러나 라벨태그 사용 시, 체크박스가 아닌 글씨를 눌러도 체크 표시 됨. 2023. 12. 26.

[HTML]14_input 태그 14_input.html 파일 코드👩‍💻 input 태그 아이디 : 비밀번호 : 이름 : 성별 : 남자 여자 취미 : 독서 게임 등산 낚시 사진 : 이메일 : 나이 : 전화번호 : sns : 좋아하는 단어 : 좋아하는 색 : Java 실력 : 하상 생년월일 : 기상시간 : 알람 : 회원가입 다시입력 실행 결과⬇️ 2023. 12. 26.

[HTML]13_form 태그 🤔form 태그 웹프로그램을 요청하여 사용자로부터 입력받은 값을 전달하기 위한 태그 => 하위태그로 반드시 사용자로부터 값을 입력받기 위한 입력태그와 웹프로그램을 요청하기 위한 Submit Event를 발생하는 태그를 반드시 작성 *제출 이벤트(Submit Event) : form 태그를 사용하여 웹프로그램을 요청하기 위한 이벤트 🔶action 속성 : form 태그를 사용하여 요청할 웹프로그램의 URL 주소를 속성값으로 설정 => action 속성을 생략한 경우 현재 실행중인 웹프로그램의 URL 주소를 속성값으로 사용 🔶 method 속성 : 웹프로그램을 요청하는 요청방식(GET 또는 POST)을 속성값으로 설정 => method 속성을 생략한 경우 GET 방식으로 웹프로그램 요청 => 웹프로그램을 요.. 2023. 12. 26.

[HTML]11&12_audio/video 태그 ⚫audio 태그 : 서버에 저장된 소리 파일을 제공받아 재생하는 태그 🔘embed 태그 : 플래시 재생, object 태그 : 멀티미디어 파일 재생 => 웹에서 사용한 소리 파일 : mp3 파일, ogg 파일 등 audio 태그 실행결과⬇️ ⚫video 태그 : 서버에 저장된 동영상 파일을 제공받아 재생하는 태그 => 동영상 파일 : mp4 파일, ogg 파일(ogv 파일), webm 파일 등 video 태그 실행결과⬇️ 2023. 12. 26.

[HTML]10_iframe 태그 ⚫iframe 태그 : 내장 브라우저를 생성하여 웹문서(웹프로그램)을 요청하여 HTML 문서를 응답받아 출력하기 위한 태그 iframe 태그 iframe 태그에서 요청한 웹문서 코드⬇️ 오른쪽 페이지 왼쪽 페이지 다음 실행결과👩‍💻 left.html 파일에 Daum 홈페이지로 이동하는 a태그를 작성하고, target을 right.html 파일로 설정해 오른쪽에 Daum 홈페이지가 나오도록 함⬇️ 2023. 12. 25.

[HTML]09_map 태그 ⚫map 태그 : 하나의 이미지에서 영역을 구분해 하이퍼링크 기능을 제공하기 위한 태그 => 하위태그 : area 태그 🔘area 태그 : 이미지맵에서 링크가 연결될 영역을 정의할 때 사용 map 태그 실행결과⬇️ 위의 이미지는 하나의 이미지지만, map 태그를 통해 각기 다른 링크로 연결되게끔 설정함. 트위터 부분을 클릭하면 https://twitter.com/?lang=ko 이 링크로, 페이스북 부분을 클릭하면 https://www.facebook.com/?locale=ko_KR 이 링크로 이동. 2023. 12. 25.

[HTML]08_anchor 태그 ⚫앵커(Anchor) : 페이지에서 특정 태그로 위치(스크롤)를 이동하는 기능 => href 속성값으로 설정된 URL 주소 뒤에 # 기호를 사용하여 태그 식별자(id 속성값)를 설정하면 해당 식별자의 태그로 위치가 이동 - 앵커 기능 a 태그 제품소개 구매후기 주의사항 제품소개 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품입니다. 아주 좋은 제품.. 2023. 12. 25.

[HTML]07_a 태그 ⚫a 태그 : 클릭 이벤트로 웹문서(웹프로그램)을 GET 방식으로 요청하기 위한 태그 => 하이퍼링크(Hyper Link) 기능을 제공하는 태그 - 페이지를 연결하여 출력 처리(페이지 새로 고침) a 태그 다음 네이버 구글 실행결과⬇️ 🔘a태그를 이용하여 이동할 페이지를 만들기 위해 kor.html 과 eng.html 문서 작성 eng.html 문서👩‍💻 Hello [home] '영어로' 버튼 클릭시 이동페이지⬇️ kor.html 문서👩‍💻 안녕 [home] '한글로' 버튼 클릭시 이동페이지 ⬇️ 2023. 12. 25.

이전 1 2 3 4 5 6 7 8 9 다음

티스토리툴바