이번 강좌는 사용자 정의함수를 이용하여 만든 구구단 예제를 한줄 한줄 찢어보는 시간입니다. 사용자 정의함수에 대한 설명은 여기([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창은 대부분 사용자에게 특정 알림을 주기 위해 사용한다. 게시글을 등록한 후에 "등록되었습니다. " 처럼 일정 프로세스가 끝남이나 "오류가 발생하였습니다." 처럼 사용자에게 특정 메시지를 전달할 때 많이 사용한다. 각 메시지창의 사용방법과 특징은 다음과 같다. -..

기본적으로 javascript 를 선언해서 사용하는 방법 이외에 외부에 선언된 javascript 파일을 읽어 현재 문서에 적용(사용)하는 것도 가능합니다. 외부에 선언된 javascript 파일은 .js 확장자가 붙습니다. 먼저 외부 javascript 파일은 먼저 test.js 라는 파일을 하나 만들고 내용을 위 그림과 같이 작성합니다. 그리고 실행시킬 두번째스크립트.html 파일을 만들고 그림과 같이 작성합니다. 위에서 중요한 것은 이 부분 입니다. 이 부분이 외부의 javascript 파일을 연결하는 부분인데 src 속성을 이용하여 경로명을 지정해 줍니다. 파일의 경로를 지정하는 방법은 경로명 표시 방법을 참고합니다. html 파일의 빨간 화살표와 실행결과의 빨간 화살표를 주의하면서 실행결과를 살..

모든 강좌는 실무 기준으로 작성되며 이론 및 내부 구조 등이 궁금하신 분들은 직접 검색하시고 공부하시기 바랍니다. javascript 를 사용할 수 있도록 필요한 최소한을 설명합니다. javascript (자바스트립트)는 미국 선마이크로시스템스와 넷스케이프 커뮤니케이션스가 개발한 웹 브라우저에서 동작하는 스크립트 언어입니다. 클라이언트 기반의 객체지향 언어이고 가볍고 빠른 장점이 있습니다. 별도의 컴파일도 필요 없으며 변수들의 타입선언도 필요 없어 쉽게 배울 수 있습니다. 웹 문서를 동적으로 처리하며 이벤트( 키보드, 마우스, 클릭, 등 )를 사용하여 클라이언트의 처리 기능을 주로 담당합니다. 먼저 Html 강좌 http://cofs.tistory.com/120 를 모두 마스터 하고 오셔야 합니다. Ht..

1. CSS 스타일시트 css란 Cascalding Style Sheets 의 약자로 웹문서의 스타일을 지정해 놓은 파일입니다. 다시말해 웹사이트를 꾸미는 style의 정의를 모아 둔 파일이라 생각하면 됩니다. 예를 들면 이 웹사이트는 글꼴을 굴림체를 사용하고 글자크기는 10px이며 색은 파란색이고 등등... 이런 정보들을 새로운 페이지를 만들때마다 설정하려면 그만큼 귀찮고 손도 많이가는데 이를 한곳에 모아 두고 가져다가 쓰는 파일입니다. css를 설정하는 방법은 크게 3가지가 있습니다. 첫번째는 위에서 설명했듯이 css 파일에 정의해 놓고 파일을 불러와서 사용하는 방법이 있습니다. 두번째는 Html 문서에 style 태그 사이에 정의하고 사용할 수 있습니다. 세번째는 각 태그의 style 속성에 정의할..