DEV Note

onclick 버튼을 클릭했을 때 효과가 발생한다. 클릭 onchange 내용이 변경되었을 때 효과가 발생한다. 함수의 Parameter 부분에 object 인 자기 자신을 쓰기 위해 this 를 사용하기도 한다. 핸드폰 번호 입력 T: - 문자열 포함을 검사하고자 할 때 검사하려는 변수명.match( /[^0-9]/g ); 정규식을 사용해서 구별할 수 있다. onload 페이지가 열리기 전에 읽어온다 부분에 onload를 설정해주면 된다. //여기에 텍스트가 삽입된다. onkeydown key를 눌렀을 때 효과가 발생한다. 개발자 도구 - console 에서 확인할 수 있는데 값은 ASCII 값으로 표시되고 알파벳은 대문자로만 인지한다. onkeypress key를 눌렀을 때 효과가 발생한다. 셋의 차..

Cookie란? Cookie는 데이터이면서 우리가 현재 사용하는 컴퓨터에 작은 텍스트파일로 저장되어 있는 것이다. 어떤 사이트에 접근을 하고 '하루동안 이 창을 보지 않기'라는 문구를 본 적 있을것이다. 아니면 로그인을 위해 로그인 정보 저장, 자동 로그인같은 경우를 본 적 있을 것이다. 사실상 브라우저는 내용을 기억할 공간이 없다. 따라서 그러한 것을 기억하도록 도와주는 것이 쿠키이다. 쿠키가 저장되는 방식은 key : value 방식임을 알아두자. 브라우저가 웹 페이지를 서버로부터 요청하게되면, 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. 쿠키와 세션의 차이 쿠키는 사용자가 브라우저의 쿠키데이터를 비우거나 ..

Ajax 란? Ajax(Asynchronous Javascript And XML)란 비동기 방식의 자바 스크립트와 XML을 의미한다. Ajax를 이용하는 주 목적은 화면 전환 없이 클라이언트와 서버간의 정보를 교환하기 위해서이다. Ajax는 클라이언트가 비동기 방식으로 자바스크립트를 이용해 화면 전환 없이 서버측에 자료를 요청할 때 사용한다. ajax 관련 메서드를 호출하면 서버 측에 원하는 요청을 보내 응답을 받아오는 것이 가능하다. load() load() 메서드는 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용한다. 요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있다. $(선택요소).load(url, 요청데이터, 함수_선택사항); $.ajax() $.a..

라이브러리(library)란? 자주 사용하는 코드를 재활용, 유통하여 재사용할 수 있는 형태로 가공된 프로그래밍 효율을 높여주는 코드들이다. JavaScript 라이브러리에는 prototype, jQuery, YUI 등이 있다. 제이쿼리(jQuery)란 ? jQuery는 자바스크립트의 생산성을 10배 이상 향상 시켜주는 자바스크립트 라이브러리이다. html element를 제어하는것이 JS의 역할인데 그러려면 내가 제어하고자 하는 element를 선택해야 한다. 그 선택을 하기 쉽도록 혹은 한 번에 선택할 수 있도록 해주는 등 여러 방법을 제공 하는 것이 jQuery이다. jQuery UI는 파생된 라이브러리를 가지고있다. jQuery UI는 jQuery 기반의 GUI 라이브러리이다. 이것을 이용해 윈도..

노드(node) HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다. HTML DOM은 노드들을 정의하고 그 사이의 관계를 설명해주는 역할을 한다. HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장된다. 노드 트리는 노드들의 집합이며 노드 간의 관계를 보여준다. 노드 트리는 최상위 레벨인 루트 노드로부터 시작하여 가장 낮은 레벨인 텍스트 노드까지 내려간다. HTML DOM을 이용해 노드 트리에 포함된 모든 노드에 접근할 수 있다. 노드 종류 문서 노드 (document node) : 문서 전체를 나타내는 노드 요소 노드 (element node) : HTML 요소는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드이다. 속성 노드 (attribute node) : HTML ..

javascript에서의 문자열 함수 사용법에 대해 알아보자 jsp 파일 1. 문자열 합치기 2. 서로 다른 자료형 합치기 3. 문자열 비교하기 4. 문자열 찾기 5. 문자열 추출 6. 문자열 자르기 js 파일 function strTest1() { var str1 = 'string '; var str2 = 'function'; var str3 = str1 + str2; console.log(str3); //concat() 함수로 문자열에 인수로 지정한 문자열을 합칠 수 있다. var newStr = str1.concat('test', 'java', 'script'); console.log(str1); console.log(newStr); //join() 함수로 문자열에 인수로 지정한 문자열을 사이사에 ..

eval()은 전역 객체의 함수 속성이다. 인자는 문자열이며 인자가 표현식을 나타낸다면 eval()은 표현식을 평가한다. 인자가 하나 이상의 JavaScript 명령문을 나타낸다면 모두 실행한다. 연산식을 계산하기 위해 eval()을 호출하지 마라. 자바스크립트는 연산식을 알아서 계산하기 때문이다. 일반적으로는 다음 예제처럼 함수의 매개변수로 문자 값을 사용하면 문자 리터럴로 인식되고 있는 리터럴로 사용된다. console.log('2 + 2'); // result: '2 + 2' 하지만 eval()은 매개변수로 받은 문자 값을 값으로 사용하는 것이 아니라 실행문으로 변환해 실행시키기 때문에 문자를 출력하지 않고 문자의 실행 결과를 반환한다. console.log(eval('2 + 2')); // Exp..

Number 객체는 Number() 생성자 함수를 사용해 생성할 수 있다. Number() 생성자는 파라미터 값을 Number 타입으로 변환하고 파라미터 값이 String 타입이라도 값이 숫자이면 변환이 가능하다. 숫자는 10진수의 값으로 변환되며 파라미터 값을 작성하지 않으면 0을 반환한다. 만일 인자가 숫자로 변환될 수 없다면 NaN을 반환한다. var x = new Number(123); var y = new Number('123'); var z = new Number('str'); console.log(x); // 123 console.log(y); // 123 console.log(z); // NaN 일반적으로 숫자를 사용할 때는 원시 타입 숫자를 사용한다. var x = 123; var y =..

기본 창 : javascript19_윈도우.jsp / javascript19.js 아이디 중복 체크할 새 창 : javascript20_윈도우2.jsp / javascript20.js 회원가입에서 아이디 중복체크 버튼을 눌렀을때 나오는 새 창 : javasciprt21_윈도우3.jsp / javascript21.js 파일 구성은 이렇게 하고 코드를 작성해보자. javascript19_윈도우.jsp 팝업창 만들기 - 새창 회원가입 - 현재창 아이디 비밀번호 javascript19.js function openWin() { //window.open();// 아무 내용이 없는 빈 윈도우가 실행된다. //window.open(url, title, option); var url = './javascript20_윈..

브라우저 객체 자바스크립트를 통해 브라우저의 여러 기능들을 제어할 수 있고 전역 객체로 해당 기능들을 제공한다. Window객체란 웹 브라우저의 창(window)을 나타내는 전역 객체로 브라우저를 시작할 때 가장 처음 생성되는 객체이다. 모든 객체가 소속된 최상위 객체로 브라우저 요소, JS엔진, 모든 변수를 담고 있으며 전역 변수가 저장되는 위치가 된다. window가 생성된 이후에 안에 다른 window나 document를 추가할 수 있다. *대표적인 window 메서드 window.open(url) 새 창 열기. 여는 방식 등을 추가로 설정 가능 window.close() 현재 창 닫기 window.setTimeout(function, time) 일정 시간 후 함수 실행 모든 객체는 window에 ..