이벤트에 대해서 알아보겠습니다. 이벤트(event)란 모든 행위(?)를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있습니다. 예를 들어 사용자가 마우스를 클릭합니다. 그러면 사용자가 클릭했다는 것을 알려줍니다. 클릭했을때 어떤 동작을 하기 위해서 click 이벤트가 준비되어 있습니다. 이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내고 그 다음 작업을 할 수 있을 것입니다. 이것이 일종의 이벤트입니다. 이벤트 핸들러란 이벤트와 우리가 준비한 프로그램을 연결해 주는 역할을 합니다. 우리가 해야할 일은 이벤트가 일어났을 때 수행할 작업을 준비하고 이벤트 핸들러에게 그 일을 하도록 연결해 주면 됩니다. 이벤트와 이벤트 핸들러를 연결하..

객체 관련 명령어에 대해서 알아봅니다. 객체 관련 명령어는 for ~ in 과 with 가 있습니다. for ~ in 문은 반복적으로 객체의 변수를 출력하는 명령어는입니다. with 문은 객체변수를 미리 정의하여 보다 간편하게 사용할 수 있게 만듭니다. 객체변수의 유효범위 체인을 변경하는데 사용됩니다. 먼저 for ~ in 문에 대해 설명합니다. 작성방법은 다음과 같습니다. for(변수 in 객체변수){ 처리할 내용들; ... } 예제 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 function Car(col, num){ this.color = col; this.number = num; } myCar = new Car("파랑","서울 35 다 8984"); document.write("m..

클래스에 대해서 배워봅시다. 먼저 클래스의 개념은 객체지향 언어를 공부하신 분이라면 쉽게 이해하실수 있습니다. 하지만 여기서는 처음 언어를 공부하신다고 생각하고 객체지향에 대해서 간단하게 설명하겠습니다. 영어로는 Object-oriented programming, 줄여서 OOP라 부릅니다. 변수나 함수 등을 작성하고 여러곳에서 가져다가 사용한다고 생각하시면 됩니다. 쉽게 말해서 십자 드라이버를 하나 만들어 놓으면 책상을 조립하거나 의자를 조립할때 또는 벽에 나사를 박때도 사용할 수 있습니다. 재사용이 가능하도록 하는 것을 말하며 이는 모듈화 라고도 합니다. 여기서는 이런게 객체지향이구나 하고 가볍게 이해하시고 넘어가셔도 무방합니다. 물론 java 나 다른 객체지향 언어를 공부할 때에는 무조건 필히 아주 ..

이번 강좌는 사용자 정의함수를 이용하여 만든 구구단 예제를 한줄 한줄 찢어보는 시간입니다. 사용자 정의함수에 대한 설명은 여기([javascript 기초 강좌] 8. 사용자 정의 함수)에서 확인하세요ㅎㅎ 자바스크립트로 만든 구구단 소스가 필요한 학생이 이글을 보고 있다면 그냥 소스만 긁어 가지 말고 구구단이 어떻게 출력되는지 꼭 배우고 갔으면 좋겠습니다. 아래 그림의 소스 라인별로 설명 시작합니다 !! 7번 라인을 보시면 사용자 정의함수를 정의했어요. 함수명을 gugudan, 그리고 파라미터 변수 dan 이 있네요. 8번 라인을 보시면 화면에 입력받는 dan 변수를 출력하는 소스네요. 구구단의 단 을 입력받은 것이 아닐까 하는 예상을 하면서 지나가봅니다. 10번 라인을 보시면 앞에서 배운 제어문 중 fo..

함수가 무엇인지 부터 알아보고 진행하겠습니다. 함수는 일련의 작업을 하나로 묶어놓은 것입니다. 예를 들어 매주 로또 추첨을 해야한다고 가정합니다. 제비뽑기종이를 자르고 번호를 쓰고 바구니 같은곳에 넣어서 사람이 직접 손으로 번호를 하나하나 뽑아야 하는 노가다 작업을 해야 합니다. 다음주에는 또다른 종이를 잘라 번호를 써야하고 그담음주도 그그다음주도 매주 이 작업을 하고 있으려니 정말 귀찮겠죠? 그래서 이 일련의 작업을 미리 기계에 정의합니다. 그럼 그 기계가 자동으로 종이를 잘라주고 번호를 써주고 바구니에 종이를 넣어서 저에게 줍니다. 공장의 한 시스템 같기도 한데 이 일련의 작업을 묶어 정의해 놓고 한번의 호출로 가능하게 해주는 것이 함수입니다. 1. 사용자 정의 함수 사용자가 직접 만들어서 사용합니다..

javascript 내장함수 내장함수는 javascript(자바스크립트)가 자체적으로 제공해주는 함수이다. 함수란 특정 기능을 수행하는 프로그램의 집합이다. 1. eval(수식문자열) '수식문자열'을 계산 가능한 식으로 변환하여 처리한 결과를 반환한다. 쉽게 말해서 문자열을 변수나 함수 등으로 변환하여 주는 함수이다. 예제를 보고 따라해 보면 무슨 말인지 이해하기 쉬울 것이다. 더 나아가서 문자열로 된 Json 데이터를 Json타입으로 변경하거나 함수를 사용가능하도록 변경하는 등 여러 방법으로 사용가능하다. 지금은 필요없으니까 이런 정도가 있구나 하고 알면 된다. 2. parseInt(문자열, 진수) / parseFloat(문자열) / Number(문자열) 위 함수들은 문자열을 숫자로 변환하는 함수들이다..

제어문이란 결과를 도출하기 위해 논리적 판단을 하는 역할을 합니다. 논리적 판단에는 조건을 비교하거나 일정 구간을 반복시켜야 합니다. 쉽게 말해서 어떤 일이 시작되면 상황에 맞게 일을 구분짓거나 반복시켜서 일에 대한 결과를 만들어내는 역할을 합니다. 1. if if라는 뜻 그대로 만약에 입니다. '만약 이것이 맞다면 실행하세요' 라고 생각하시면 됩니다. 그럼 if 문이 어떻게 생겼는지 봅시다. if (조건식){ 실행문... }else if(조건식){ 실행문... }else{ 실행문... } 이렇게 생겼는데 한줄한줄 분석해 봅시다. if(조건식) -> 만약 조건식이 참(true) 이면 {} 안에있는 실행문을 실행하세요 라고 해석할 수 있습니다. else if(조건식) -> 첫번째 if(조건식)이 거짓(fa..

1. 연산자 연산자라 함은 수학에서는 사칙연산을 예로 들 수 있겠습니다. 연산이란 어떤 계산을 하는 것인데 프로그램에서는 숫자 뿐만이 아닌 문자도 가능하며 일상생활에서 사용되지 않는 여러 연산자와 연산방법들이 존재합니다. javascript(자바스크립트)를 이용한 웹 개발에 필수적인 연산자들을 설명합니다. 다른 많은 연산자가 존재하지만 보통의 단순한 웹 개발에서의 사용빈도는 미비하다고 할 수 있습니다. 더 많은 연산자의 정보가 보고 싶다면 아래 사이트로 방문하세요. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators - 산술연산자 기본적인 산술 연산자는 수학의 사칙연산..

1. 변수 다른 언어를 경험해본 사람들은 변수가 무엇인지 쉽게 알것이다. 변수란 특정 데이터를 담는 가방이라고 생각하면 쉽다. 변수 명은 가방의 이름이라고 생각하자. 이름이라는 가방에 홍길동이라는 정보를 담는다. 그럼 이름이라는 가방을 들고다니다가 그 가방에 정보를 꺼내면 홍길동이라는 이름이 나온다. 사용방법은 다음과 같다. var 가방 = "홍길동"; var은 이것은 변수입니다. 라고 알려주는 것이고 홍길동 이라는 이름 양옆에 "(쌍따옴표)를 붙힌 것은 이것은 문자라는 것을 알려주기 위함이다. 당연히 명령이 끝난 마지막을 알리는 세미콜론(;)도 필요하다. 다시 정리하면 변수는 특정 값이 기억될 장소를 나타낸다. 홍길동이라는 이름은 가방이라는 변수에 기억되고 있다. 가방이라는 변수를 가지고 다니다가 사용..

1. 메시지창 메시지창의 종류는 prompt, confirm, alert 총 3가지가 있다. 보편적으로 prompt 창은 많이 사용하지는 않는다. 하지만 confirm창은 게시글을 삭제하거나 브라우저에서 사용자가 특정 버튼이나 입력을 할 때 "삭제하시겠습니까?" 혹은 "진행하시겠습니까?" 라는 문구와 함께 확인과 취소 버튼이 있는 창이 뜨는 것을 본 적이 있을 것이다. 사용자의 의사를 물어볼 때 흔히 confirm 창을 많이 사용한다. alert창은 대부분 사용자에게 특정 알림을 주기 위해 사용한다. 게시글을 등록한 후에 "등록되었습니다. " 처럼 일정 프로세스가 끝남이나 "오류가 발생하였습니다." 처럼 사용자에게 특정 메시지를 전달할 때 많이 사용한다. 각 메시지창의 사용방법과 특징은 다음과 같다. -..