본문 바로가기

JavaScript & JQuery

(8)
JQuery serialize()를 사용하는 이유 JQuery serialize JQuery Ajax로 호출전에 serialize()를 해주면 form안에 값들을 한 번에 전송 가능한 data로 만들어 많은 data로 보낼때 유용하며 Ajax가 아닌 상황에서도 원하는 상황때 사용 할 수 있다. $(document).ready(function(){ $("#saveEmployee").click(function(e){ e.preventDefault(); var formData = $("#employeeForm").serialize(); $.ajax({ type: "POST", url: "${path}/employeeinsert", data: formData, success: function(response){ alert("입력이 완료되었습니다."); $('#..
JavaScript(7) 객체.내장객체 객체 : 객체는 우리 주변에 있는 모든것들. 사람, 사물, 개념, 논리...객체 선언 : 객체는 키 값을 사용하여 속성을 식별. key : value 형식으로 작성.value에는 모든 종류의 자료형이 올 수 있고, 이중에서 함수가 오면 메소드라고 부름 객체선언 객체 선언 객체는 키 값을 사용하여 속성을 식별 key : value 형식으로 작성. value에는 모든 종류의 자료형이 올 수 있고, 이 중에서 함수가 오면 메소드라고 부름. // 이름, 나이, 취미... let student = { name : '김철수', age : 20, hobby : ['독서','영화'], getString : function(){ return this.name+' '+this.age; }, item : { ..
JavaScript(6) 배열 다양한 타입의 데이터를 보관하는 하나의 묶음. 자료형 지정이 없어 모든 자료형 데이터로 저장가능 모든 자료형 (숫자, 문자열, 함수, Boolean, undefined, 객체) let 변수 명 = [값1(숫자), 값2(문자), 값3(객체), 함수....] * 변수라는 화물들을 배열라는 기차에 차례차례 순서대로 칸에 넣는 다고 생각하면 된다 * 변수 3 배열 1 2 3 4 5 arr [0] arr [1] arr [2] arr [3] arr [4] 배열의 장점 연관된 데이터 관리 가능 가독성이 좋아짐 코드량 감소 유지보수 용이 function plus(a,b) { return a+b;} function minus(a,b) { return a-b;} function multiple(a,b) { retur..
JavaScript(5) 함수 수학의 함수와 비슷하며 호출을 통해서 사용함. 전달 값이 없는 상태로 호출하거나 어떤 값을 전달하여 호출. 함수 내에 작성된 연산 수행 후 반환 값/ 결과값은 있거나 없을 수 있음. 자바스크립트에서 function자료형. 함수란 무엇인가? 함수는 자판기 같은 것 동전을 넣으면 어떤 작용을 한 후 음료를 주는 것처럼 전달값을 넣으면 연산을 한 다음 결과값을 도출한다. (주의! 함수는 전달값이 있을수도 없을수도, 결과값이 있을수도 없을수도 있다) 함수를 왜 사용하는가? 빨강색 주황색 노랑색 초록색 // document.getElementById('darkred').style.color = 'darkred'; // document.getElementById('coral').style.color = 'co..
JavaScript(4) 제어문 조건문 : if ~ else문 반복문 : fot. while, do ~ while, for in 분기문 : break, continue 조건문 조건문의 종류 1. if문 조건문 if ~ else문 조건식의 결과값이 true이면 if 뒤 내용 실행 조건식의 결과값이 false이면 else 뒤 내용 실행 const conditionNum = 5; if(conditionNum > 0) 2500 ? pri - 2500 : "아메리카노는 2500원입니다" // console.log(result3); 반복문 특정 문장들을 반복해서 수행하도록함 반복문의 종류 1. for문 반복문 조건문이 컴퓨터를 똑똑하게 한다면, 반복문은 컴퓨터를 강하게 합니다. 안녕하세요!! 안녕하세요!! 안녕하세요!! 안녕하세요!! 안녕..
JavaScript(3) 연산자 연산자 연산 - 데이터를 처리해서 결과물을 산출하는 것 연산자 - 연산에 사용되는 표시나 기호 피연산자 - 연산의 대상이 되는 데이터 종류 구분 연산자 최우선 연산자 직접 접근 (), [], . 단항 연산자 ++, --, +sign, -sign 이항 연산자 산술 연산자 +, -, *, / ,% 비교 연산자 > , =, 단항 > 산술 > 관계 > 논리 > 삼항 > 대입 단항 연산자 부호 연산자 [+ -] 논리 부정 연산자 [!] 증감 연산자 [++ --] 단항 연산자 부호 연산자 : + - 변수의 부호를 유지(+)하거나 변경(-)할 때 사용. 실제 값을 바꾸는 것은 아니며, 값을 바꾸기 위해서는 대입 연산자 (=)을 사용해야 함. 부호 연산자 예시 let num = 200; console.log(+..
JavaScript(2) 데이터 출력 코드 설명 console.log(내용); 개발자 도구 화면의 콘솔에 출력 window.alert(내용); 내용을 메시지 창에 출력 window.prompt(메시지,기본값 내용을 메시지 창에 출력 window.confirm(메시지); 입력창에 Boolean값을 입력받을 때 사용 document.write(내용); 브라우저 화면 상의 페이지에 값 출력 태그호출구문 .innerHTML = 내용; 태그 엘리먼트의 내용을 변경하여 출력 HTML 태그 접근 메소드 메소드 설명 getElementById("아이디명") 태그의 id속성 값을 이용해 / 태그 엘리먼트 객체의 정보를 가져옴 getElementsByName("이름") 태그의 name속성 값을 이용해 태그 엘리먼트의 객체 정보를 배열에 담아 가져..
JavaScript(1) JavaScript 웹 페이지의 기능을 구현할 수 있도록 하는 인터프리터 프로그래밍 언어. 인퍼트리터 언어 컴파일링 언어와 다르게 코드를 한 구문씩 기계어로 해석해나가면서 실행하는 프로그래밍 언어 스크립팅 언어 다른 응용 프로그램에 삽입되어서 동작하는 언어 자바스크립트 선언 HTML에서 제공하는 태그를 사용 자바스크립트 작성 영역을 설정하고 그 사이에 자바스크립트 코드 작성 type속성은 브라우저 호환성을 위해 사용되나 default값으로 생략 가능 자바스크립트 위치 자바스크립트 작성방식 inline 방식 html 태그의 on이벤트 속성을 이용하여 내장 메소드를 호출하거나 개발자가 선언한 사용자 정의 함수를 호출할 때 사용. 자바스크립트 양이 한 두줄 정도로 소량일 때 사용. internal 방식 가장 ..