웹 프로그래밍 -함수, 구구단 출력하기

웹 프로그래밍 -함수, 구구단 출력하기

 

웹 프로그래밍은 프로그래밍을 처음 접하는 사람들에게 가장 추천받게 되는 언어이다.

그만큼 다른 언어 (C언어, JAVA)보다 훨씬 쉽고 적은 노력으로 성과를 볼 수 있기 때문이다.

 

웹 프로그래밍을 하는데 쓰는 언어는 HTML, CSS, JavaScript가 있는데, 이 세개를 필자가 바라보았을 때 느낌은 이렇다.

 

HTML : <>태그를 이용해서 프로그램을 만들고 큰틀을 잡기에 적합.

CSS : 디테일을 담당 (색깔, 크기, 효과)

JavaScript : 조건이나 반복적인 부분을 처리할 때 사용, 입출력할 때 사용

 

이 세개를 혼합적으로 사용할 때 우리가 만들고자 하는 웹 페이지를 만들 수가 있다.

위 3개의 언어는 모든사람이 충분히 할 수 있다고 필자는 생각한다.

 

그래도 감이 안올 수도 있다. 아래의 사진을 보자.

 

기본적인 틀은 이렇다.

head섹션과 body섹션이 나눠지고 head에는 함수가, body에는 글과 여러요소들, 그리고 함수를 호출하는 부분이 존재한다.

 

함수

function add (a, b) {

var sum;         // 합을 담기위한 변수

sum = a + b;     // 입력받은 a,b를 sum에 더해서 저장

return sum;      // sum을 반환

}

 

위 코드는 함수의 기본적인 구조이다.

함수는 위에 설명한 3가지 언어 중 JavaScript부분에서 사용한다. 연산을 처리하는 부분이기 때문이다.

 

function를 맨 앞에 쓰고, 함수이름을 그다음에 (매개변수1,매개변수2) {

변수들

return 변수

}

이러한 형식을 가진다.

 

위에서 head섹션과 body섹션 둘로 나눠져 head섹션에는 함수정의를 body섹션은 함수 호출을 한다고 말했다.

script를 두번 쓰는 것이다. 그럼 이번엔 호출하는 부분을 살펴보자.

var n = add(10, 20);

 

return값을 n이 받게 된다. 정말 간단하다.

 

자바스크립트에서 제공하는 전역 함수

 

자바스크립트 자체에서 제공하는 함수가 상당히 많다. 그중에서 많이 쓰이는 함수 3개를 알아보자.

 

1)eval()함수

-var res =eval("1*2+3");

--> eval함수는 숫자문자열의 값을 정수로 만들어 계산한다. 원래 문자열끼리는 계산이 되지않지만 위의

res값은 계산이 되어서 5가 된다.  (문자열이란? " "<--안에 들어간 숫자나 문자)

 

2)parseInt()함수

-모든걸 정수로 바꾼다.

- var a  = parseInt("30") // 정수 30리턴

- var b = parseInt("0x32") // 16진수 3과 2를 정수로 바꿔서 정수 50을 리턴한다. 16진수를 잘 모르겠다면 한번 구글에 검색해보길 바란다.

 

3)isNaN()함수

-숫자가 아니면 True 숫자면 False를 호출하는 함수이다.

-ex) isNaN(32) --> False

      isNaN("32") -->True // 여기서 32는 문자열 32기 때문에 숫자가 아니다. 고로 True

 

구구단 출력 함수를 만들어보자.

 

 

먼저 제목과 바로 밑에 가로줄은 html를 이용하고 그 밑에 연산은 javascript를 이용해야겠다는 생각을 하고 만들면 된다.

 

 

 

 

prompt는 입력을 받는 함수이다. 입력받는 문자열이 a에 저장되고 그걸 int형으로 바꾼다.

그 후 그 변수를 gugudan함수에 넣으면 차례대로 구구단이 출력된다.