메모장

자바스크립트 라는 컴퓨터 언어에 어떤 형태의 데이터가 있는지 살펴 보고, 그중 대표적인 것으로 문자와 숫자 라는 데이터 타입에 대해 깊게 이해 해보자   숫자를 의미하는 Number 라는 데이터 타입에서 아주 중요한 것은 연산입니다. 더하기 (+)는 왼쪽에 있는 값과 오른쪽에 있는 값을 더해서 하나의 값을 만든다는 점에서 이항 연산자 라고 부릅니다.이항 연산자 중에서 산수를 하는 것이기 때문에 산술 연산자 라고 부릅니다.문자열이라는 데이터 타입에 대해서 살펴보자. 문자열은 따옴표(" ")로 이뤄져 있습니다. (작은 따옴표로 해도 무방합니다. ) 다만, 큰따옴표로 시작하면 큰 따옴표로 끝나고, 작은 따옴표로 시작하면 작은 따옴표..

지금까지는 자바 스크립트 코드를 실행하기 위해 웹페이지 , 즉 파일을 만들었습니다. 경우에 따라서 파일이 아니더라도 간단하게 어떤 코드를 실행해야 하는 상황 들이 있습니다. 그런 경우에 콘솔을 사용할 수 있습니다.자료형 스크립트 var str="문자열"; var num=15; var flag=true; var arr=[1,2,3]; console.log('str: '+str); -- 콘솔로 다양하게 표현 해볼수 있다. 문자열도 표현 가능 console.log('num: '+num); -- 정수 console.log('flag: '+flag); -- true,false console.log('..

이번에는 이벤트라는것을 알아 볼 텐데 , 이벤트는 자바스크립트가 사용자와 상호작용 하는데 핵심적인 역할을 합니다. 이라는 태그를 사용해보았는데 태그의 type을 "button"으로 지정하면 버튼 모양이 됩니다.버튼에 글자를 넣고 싶으면 value 속성을 이용하면 됩니다.  태그에 onclick 이라는 속성을 썼는데 , 이 속성은 아주 특별한 속성입니다. HTML 설명서에는 "onclick 속성 값으로는 반드시 자바스크립트 코드가 와야합니다."라고 적혀 있습니다. 다음으로 "onclick 속성의 값은 웹 브라우저가 기억해 뒀다가, onclick 속성이 위치하고 있는 태그를 사용자가 클릭했을때 자바 스크립트 ..

기본적으로 자바스크립트는 HTML 위에서 동작하는 언어 입니다. 자바 스크립트 코드를 넣을 때는 우선 웹 브라우저에게 지금부터 HTML 에 자바스크립트 코드가 시작된다는 사실을 알려야 합니다. 그때 사용하는 태그가 라는 태그 입니다.  이처럼 태그안에 'hello world' 라고 쓰는 것 과 무슨 차이가 있는지 당연히 궁금하실 것입니다. 어떤부분에서 차이가 생기느냐면 HTML에서 '1+1'을 쓰면 영원히 '1+1'이 나옵니다. 하지만 자바 스크립트는 동적 언어 여서 계산기 처럼 동작 할 수 있습니다.자바스크립트는 숫자 1과 숫자 1을 더한 값을 2로 만든 다음에 이것을 출력하는 능력이 있습니다.하지만 HTML은 정적 언어라서 그렇게 할 수 없..

웹페이지는 한번 화면에 출력되면 자기 자신을 바꾸는 능력이 없습니다. 그것을 가능하게 해주는 것이 자바 스크립트 입니다. Elements 엘리먼트는 태그라는 뜻입니다.   이라는 태그를 이용하면 버튼을 만들 수 있습니다. 그런데 이 속성으로 'button'을 지정 해야합니다. 그다음 onclick이라는 속성의 값으로는 자바스크립트가 와야 합니다 . 그리고 onclick이라는 속성의 값으로 자바 스크립트 코드를 넣으면 사용자가 onclick의 속성이 위치하고 있는 버튼을 클릭했을때 자바스크립트 코드를 실행할 것입니다. 태그를 선택하는 코드는 document.querySelector('body') 입니다.  그 다음 이 태그에 style 속성값으로 배경색을 black으로 지정하고 싶으면 (..

HTML은 정적입니다. 한번 화면에 출력되면 언제나 그 모습 그대로입니다. 반대로 우리가 알고있는 데스크톱이나 모바일에서 사용되는 여러 프로그램, 예를 들면 게임 같은 경우 사용자의 조작에 반응해서 프로그램이 움직입니다. 사람들은 웹 페이지도 게임처럼 동적으로 사용자와 상호작용 할 수 있게 되기를 원했습니다. 그래서 태어난 기술이 자바 스크립트(JavaScript) 입니다. 이제 웹은 HTML을 이용해서 웹페이지를 우선 만든 후에 그렇게 만들어진 웹페이지를 자바 스크립트를 이용해 사용자와 상호작용 할 수 있게 기능을 추가함으로써 HTML의 정보와 자바 스크립트의 기능을 모두 갖춘 전무후무 하고 유일 무이 한 시스템으로 성장 했습니다. 예를 들어 여러분이 알고 있는 수많은 웹 사이트들이 프로그램처럼..

우리 프로젝트 파일에 SweetAlert 를 추가 해보았다.  우리가 추가해야 할 부분은 '로그인 성공/실패' , '회원가입 성공/실패' , '결제하기 성공/실패' , '아이디찾기 성공/실패' , '회원정보 변경 성공' 이렇게 5가지 이다.  처음엔 5가지로 나눠서 로그인 알림.jsp , 회원가입 알림.jsp , 결제하기 알림.jsp , 아이디찾기 알림.jsp, 회원정보변경 알림.jsp 개별로 만들어야 한다고 생각했다. 그러나 jsp 파일도 결국 서블릿 파일이기 때문에 많이 생기면 무거워 지기 때문에 (자원이 많이 든다, 메모리가 많이 든다.) 많이 만들지 않는 것이 좋다.  그래서 방법 !!모든 알림창은 틀이 비슷하기 때문에 jsp 페이지는 성공 실패로만 나눈다.  ..

JSON은 JavaScript Object Notation의 약자로,데이터를 쉽게 교환하고, 저장하기 위해 만들어진 데이터 교환 표준이다.JSON은 자바 스크립트 기반 표준이다. XML 의 대안으로서 등장한 JSON은 사람이 읽을 수 있는 텍스트를 기반으로 한 데이터 교환 표준이라는 점에서 XML과 차이가 있다. JSON은 텍스트 기반이기 때문에, 어떤 프로그래밍 언어에서도 JSON 데이터를 사용 가능하다. JSON 특징- 자바스크립트를 확장하여 제작.- 자바스크립트 객체 표기법을 따름.- 프로그래밍 언어와 운영체제에 독립적. (텍스트 기반이기 때문에)- 사람과 기계가 모두 읽을 수 있도록 고안됨.- 일반적으로 서버와 클라이언트 간 교류에서 사용됨. JSON VS ..

사용자에게 전달할 정보를 간단하게 알려주거나 , 디버깅 또는 로그를 확인 하거나 , 사용자에게 빠르게 입력을 받을때에도 유용하게 사용되는 alert () 함수는 자바스크립트에서 사용되는 함수로서 유용하게 이용된다.   요렇게 표현 할 수 있지만 우리는 사용자 UI 를 위해 SweetAlert 를 사용해 조금더 예쁘게 표현 해보자 ! https://sweetalert.js.org/guides/#getting-started  CDN 추가src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> alert 대신 s..

jQuery 에서 제공하는 ajax() 메서드와 JSON 데이터를 사용해볼 예정이다. 학생테이블을 만들어서 'tbody'에 내용을 삽입 할 예정 이다. ajax() 메서드는 현재 페이지에서 필요한 데이터를 바로 로드해서 작업가능한, "비동기 처리"를 지원하는 메서드 이다. 여기서 "비동기 처리 " 란 ? 먼저 실행된 작업이 끝날 때까지 기다리지 않고 다음 작업을 수행하는 방식. 즉, 한 번에 여러 작업을 처리한다. 비동기처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을때 서버가 언제 그 요청에대한 응답을 줄지 모르는데 마냥 기다릴순 없기 때문이다. jQuery 안에서 진행 되는 메서드 이므로 CDN 이 필요하다. 그리고 에이젝스 메서드는 몇가지 속성을 기본적으로 표현 하는데 이게 기본 이다. 1. ..