Web/JavaScript
JavaScript 따라하기 8일 차 | 실습_회원 가입
join_form.html 회원가입 이름 ID 비밀번호 비밀번호확인 주민번호 - E-Mail @ 직접입력 naver.com gmail.com nate.com 직업 항목을 선택하세요 개발자 DB엔지니어 관리자 기타 성별 남 여 취미 여행 독서 게임 전체선택 가입동기 check_id.html ID 중복 체크
JavaScript 따라하기 7일 차 | 내장 객체 window location history document
window 객체 - 자바스크립트에서 미지 정의하여 제공하는 내장 객체 중 최상위 객체 - 웹브라우저의 창(browser window) 자체를 가르키는 용도로 사용됨 - window 객체명은 생략이 가능함 => ex) window.open() => open() 형태로 사용 가능 window 객체 예제 //#1. window.open("새 창에서 접속할 URL", "창이름", "창옵션(크기, 위치 등)") window.open("http://www.itwillbs.co.kr", "창이름", "width=300,height=300"); // 새 창 열기 window.close();// 현재 창 닫기 // window 객체의 innerHeight 와 innerWidth 속성에 접근하여 창의 ..
JavaScript 따라하기 6일 차 | 객체 { : }
객체란? - 객체는 다양한 데이터를 하나의 단위로 묶어서 구성한 자료구조(Data Structure)이다. - 자바스크립트는 객체 기반 프로그래밍 언어이며 객체는 자바스크립트의 거의 모든것을 구성한다. var 변수명 = { 키1 : 값1, 키2 : 값2, ...생략... 키n : 값n } 객체 예시 // 사용자 정의 객체 - person 객체 정의 // => 객체의 이름(= 변수명)을 person 으로 지정하고 // 중괄호 내부에는 person 객체가 가질 수 있는 속성들을 키:값 의 형태로 명시 var person = { name : "이연태", // name 속성에 "이연태" 라는 문자열이 저장 gender : "남", // gender 속성에 "남" 이라는 문..
JavaScript 따라하기 5일 차 | 이벤트 input onclick, etc...
Input 이벤트 - 클릭이나 입력 시 이벤트에 대한 처리를 수행하는 기본적인 방법 - HTML에서 자바스크립트를 건드리는 방법 => input 태그의 type="button" 이나 type="text" 속성 뒤에 이벤트속성명="자바스크립트함수()" 속성 종류 - button - 1. onclick="" => 버튼 클릭 시 ""안의 자바스크립트가 실행됨 - 2. ondblclick="" => 버튼 더블 클릭 시 ""안의 자바스크립트가 실행됨 - 3. onmouseover="" & mouseenter="" => 버튼 위로 마우스가 들어올 시 ""안의 자바스크립트가 실행됨 - 4. onmouseout="" & mouseleave="" => 버튼 밖으로 마우스가 나갈 시 ""안의 자바스크립트가 실행됨 속성 종..
JavaScript 따라하기 4일 차 | 함수 function
함수 - 특정 기능을 수행하는데 필요한 코드들의 모음 - 반드시 호출을 통해서 사용 - 함수 호출 시 전달하는 값을 "전달인자(Argument)" 라고 함 - 함수 정의 시 전달인자를 전달받아 저장할 변수를 "매개변수(Parameter)" 라고 함 - 함수 작업이 끝난 후 호출한 곳으로 되돌아 갈 때 전달하는 값을 "리턴값(Return value)"라고 함 function 함수이름([매개변수선언...]) { // 외부로부터 함수가 호출되면 실행할 코드들... [return [값];] } 함수 예시 // #1 전달인자 X, 리턴값 X // showMessage() 함수 정의 => 전달인자가 없는 형태의 함수로 정의 function showMessage() { // 전달인자가 없..
JavaScript 따라하기 3일 차 | 배열 Array
배열(Array) - 복수개의 데이터를 연속적인 공간에 저장하는 객체(자료구조) - 변수와 달리 한 번에 여러 데이터를 저장(관리) 기능 - 배열에 저장되는 데이터 공간은 인덱스(index)라고 하는 번호를 붙여서 관리 => 인덱스 번호는 자동으로 부여되며 [0]부터 시작하여 [배열크기-1]까지 부여됨 // [ 배열 선언 기본 문법 ] let 배열명 = []; //#1 let 배열명 = new Array(); //#2 //=> 주로, 1번 형태를 많이 사용하며, 1번 형태를 그대로 사용하지 않고 대괄호 내에 초기값 지정 let 배열명 = [값1, 값2, ..., 값n]; //#3 => n개 만큼의 공간을 할당받아 자동으로 데이터를 저장함 => 각 항목은 콤마(,)로 구분 // [ 배열 접근 기본 문법 ]..
JavaScript 따라하기 2일 차 | 조건문 if switch for while
조건문 - 주어진 조건식에 따라 특정 문장의 실행 여부를 결정하는 문 - 조건식은 결과값이 boolean(true 또는 false) 형태인 식만 사용 가능 ex) 비교연산자(>, >=, 4 과정에서 2번이 true 일 동안 2 -> 3 -> 4 를 반복하고 2번의 조건식이 false 가 되면 반복문이 종료됨 ----------------------------------------------------------------------------------------- 초기식(var i = 1) 조건식(i 2 i = 2 true "2 : Hello, World!" 출력 i = 2 -> 3 i = 3 true "3 : Hello, World!" 출력 i = 3 -> 4 i = 4 true "4 : Hello,..
JavaScript 따라하기 1일 차 | 주석과 변수 생성
주석 - 자바스크립트에서 주석은 //(한 줄 주석) 이나 /* */(블록 주석) 로 사용 가능하다 - 주석에 포함된 단어들은 자바스크립트 코드 작동 시 무시된다. JS변수 생성 과정 - 변수의 생성은 2단계만 생각하면 된다 - 1. 선언 : 소스코드 평가 과정에서 변수를 선언한다 - 2. 초기화 : 런타임에 변수에 데이터를 할당한다 - 변수란. 데이터를 집어 넣을 수 있는 데이터 상자를 뜻한다고 보면 된다. 변수의 선언명 - var, let, const가 있다. - 변수 명으로 첫번째에 영어 대소문자, $, _만 사용 가능하다 - 맨 뒤에 ;(세미콜론)으로 문장이 끝났다는 것을 컴퓨터에게 알려야한다 - 자바스크립트는 데이터타입에 따른 제약이 없다 (동적 타입 언어) 생성 방법 - 1. 선언명 변수명; 으..
JavaScript 따라하기 0일 차 | Javascript 사용법
설치하기 - 먼저 기본적으로 Eclipse가 설치 되어 있는 환경에서 진행을 할 것이기 때문에 미리 설치해 주길 바란다. - [JavaEE + Tomcat 다운로드 및 설치] 기초지식 - HTML에 대한 기본 지식이 조금 필요하다. - [HTML 지식 살펴보기] HTML에서 JS사용법 - 1. html에서 작성 => 확장자명이 .html파일에서 태그 안에 JavaScript를 작성 - 2. js에서 작성 => 확장자명이 .js파일에서 JavaScript를 작성한 뒤 .html파일에서 태그의 src속성에 .js파일 경로 확인 alert(String str) - 예시를 도와 줄 자바스크립트의 알림창 함수이다. (해당 함수를 사용해 js가 잘 동작하는지 확인 할 것이다.) 1. html에서 작성 | 예시 - ..