본문 바로가기

전체 글

 (91)
Project(2)-1. 개인 프로젝트 구성 자바스크립트 과정을 마치고 강사님이 여태 배웠던 HTML과 CSS, JS를 활용해 간단한 페이지를 구성해보라 하셨다. 한참을 고민하다가 자바스크립트를 배우면서 종종 예제로 나왔던 시계 기능을 페이지로 구성해보자는 생각이 들었다. 페이지 구성 주제가 시계인 만큼 시계와 관련된 기능마다 페이지를 따로 해주기로 했다. 따라서 페이지는 다음과 같이 세 개가 존재한다. 알람 예약 페이지 스톱워치 페이지 타이머 페이지 그리고 각 페이지마다 이동이 원활하도록 헤더를 추가로 구성해줄 것이다. 페이지별 시계 콘텐츠는 화면의 센터로 올 수 있도록 적절히 조절해주고 버튼도 새로이 디자인하기로 했다. 마지막으로 컬러는 헤더 부분을 가져올 부트스트랩 컬러에 맞춰 갈색으로 결정했다. (시간에 쫒기는 삶 속에 푸근함이 느껴지도록...
Java_0강(Java 및 IntelliJ 설치) 1. Java 다운받기 Java는 Oracle도 존재하지만 슬금슬금 유료로 전환한다기에 openJDK를 이용해주었다. 아래 링크로 들어가 사진에 표시된 버전을 다운받는다. https://github.com/ojdkbuild/ojdkbuild GitHub - ojdkbuild/ojdkbuild: Community builds using source code from OpenJDK project Community builds using source code from OpenJDK project - GitHub - ojdkbuild/ojdkbuild: Community builds using source code from OpenJDK project github.com 2. IntelliJ 다운받기 Intel..
16. 객체 객체란? - 위키백과 정의 컴퓨터 과학에서 객체 또는 오브젝트(object)는 클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료구조, 함수 또는 메소드가 될 수 있다. - 나무위키 정의 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 '메소드(함수)와 변수(데이터)'의 묶음으로 봐야한다. 객체의 유형은 다음과 같이 분류할 수 있다. 정보를 저장(또는 전달)하기 위한 객체(변수만 포함) 특정 기능들을 묶어두기 위한 객체(메소드만 포함) 기본 객체(변수, ..
15. classList 외 다양한 키워드 classList classList은 HTML 요소의 class 속성에 저장된 값을 제어하는 키워드이다. 주요 함수) add(string) : 새로운 'string' 값을 class 속성에 추가 remove(string) : 'string' 값을 class 속성에서 제거 toggle(string) : add와 remove가 합쳐진 상태 contains(string) : 'string'이 class 속성에 있는지 여부 확인 => 들어가 있으면 true, 없으면 false replace(str1, str2) : class 속성에 str1이 있으면 str2로 변경 아래 코드는 classList의 주요 함수를 활용한 예제이다. BOX toggle change retrun return 키워드는 '함수의 종료'를 ..
14. 함수 함수란? 함수는 특정 동작(기능)을 수행하는 일부 코드의 집합이다. '함수를 실행한다'는 것은 '함수를 호출'한다는 것과 같은 의미이다. 묶인 명령어를 반복적으로 사용할 수 있다는 재사용성 장점이 있지만 설계가 어렵다는 단점이 존재한다. 함수의 선언과 구조 함수도 사용하려면 선언을 해야 한다. => 함수 선언 >> 함수 호출 또한 기본적인 구조가 존재한다. function [함수명] ([매개변수1, 매개변수2, ...]) { 실행문장; ... return [반환값]; } => 함수 이름 뒤 괄호 안에 들어가는 데이터는 매개변수(파라미터)라고 한다. 매개변수는 함수 안에서만 사용 가능하다. 함수의 유형 함수의 유형은 총 4가지로 나눌 수 있다. 계산기 예제를 통해 각 유형을 살펴보자. 계산기 N1 : N2..
13. 다양한 for문 for in 'for in'은 배열의 순번을 활용하기 위한 반복문이다. let person = { "이름" : "홍길동", "나이" : 20, "주소" : "인천시 미추홀구 }; for (let key in person) { console.log(key); console.log(person[key]); } for of 'for of'는 배열의 원소를 순차적으로 활용하기 위한 반복문이다. let arr = ["apple", "banana", "pear", "peach"]; for(let v of arr) { console.log(v); } // for of를 풀어써보면 for(let i = 0; i < arr.length; i++) { let v = arr[i]; console.log(v); } forEa..
12. 배열 메소드 1. 원소의 추가 배열에서 원소를 추가하고 싶을 때는 push()와 unshift()를 사용한다. push(새 값)는 뒤에 새로운 값을 추가하고, unshitf(새 값)는 앞에 새로운 값을 추가한다. 2. 원소의 삭제 배열에서 원소를 삭제하고 싶을 때는 pop()과 shift()를 사용한다. pop()은 맨 뒤의 값을 삭제하고, shift()는 맨 앞의 값을 삭제한다. 3. splice(idx, n[, add_item list]) => idx = 삭제할 원소의 위치(순번), n = 삭제할 원소의 개수, add_item list = 삭제 후 추가할 원소의 목록 splice()는 배열의 원소를 지정한 개수만큼 삭제한다. let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.l..
11. 참고 JS 내 페이지 이동 button을 이용해 다른 페이지로 이동시키고 싶을 때 Javascript 내에서 사용할 수 있는 코드가 있다. => location.href = "이동할 페이지"; input value 값 가져오기 함수 내에서 input 태그의 value 값을 가져오려면 함수 내에서 따로 지정해주어야 한다. 만약 함수 밖에서 지정해주게 되면 빈 칸을 value 값으로 인식하게 된다. 로그인 화면 로그인 위 코드는 로그인을 했을 때 id와 password의 값이 일치하는지 확인하고 맞을 경우 condition.html로 이동, 틀렸을 경우 각각의 alert창이 뜨게 한다. 이렇게 비교를 하기 위해서 함수 밖에서 미리 선언해준 vid값과 vpw값이 input 태그에서 직접 입력한 값을 저장한 변수인 ..

티스토리툴바