HTML과 자바스크립트로 간단한 추가 프로그램 만들기

이 글에서 소개할 자바스크립트를 이용한 간단한 덧셈 프로그램은 계산기와 거의 같은 기능을 한다. 그러나 차이점은 이 프로그램이 이전 기사에서 제시한 계산기만큼 완전하지 않은 일부 산술 연산만 다룬다는 것입니다. HTML, CSS 및 JavaScript를 사용하여 간단한 계산기를 만드는 방법


다음은 디스플레이를 장식하기 위해 html 및 javascrpt(+ CSS)를 사용하여 추가하는 방법에 대한 자습서를 제공합니다. form과 onclick() 함수를 사용하여 덧셈, 뺄셈, 곱셈, 나눗셈의 산술 연산을 수행하면 모든 숫자를 재설정하는 기능을 하는 지우기 버튼이 추가됩니다.




이 프로그램에서 사용하는 parseInt()는 Input 태그의 String 값을 Integer로 변환하는 기능을 합니다. 자바스크립트에서 parseInt() 사용 이해


또한 alert()는 입력된 데이터/번호가 없을 때 이 프로그램에서 사용하는 대화 상자 메시지(팝업 상자)를 제공하는 데 작동하며 '빈 번호' 메시지가 나타납니다. 자바스크립트에서 팝업 상자 사용 이해하기


자, 여기 간단한 HTML, CSS 및 Javascript를 사용하여 추가하는 방법에 대한 자습서가 있습니다.


Javascript를 사용한 간단한 추가 프로그램

<머리>

<메타 문자 집합='UTF-8'>

Hardifal.com


<스타일>


형태{

배경:선형 그라디언트(회색,강철파란색);

색상: 흰색;

패딩: 15%;

여백:자동;

}


<본체>


1번



2번



결과





<입력 유형='버튼' onclick='탐바()' 값='+'>

<입력 유형='버튼' onclick='쿠랑()' 값='-'>

<입력 유형='버튼' onclick='칼리()' 값='X'>

<입력 유형='버튼' onclick='bagi()' 값='/'>


<스크립트>

함수 첵(){

if (form.angka1.value == '' || form.angka2.value == '') {

alert('빈 번호');

출구

}

}

함수 추가(){

확인하다();

a = parseInt(form.angka1.value);

b = parseInt(form.angka2.value);

form.hasil.value = a+b;

}

함수 쿠랑(){

확인하다();

a = parseInt(form.angka1.value);

b = parseInt(form.angka2.value);

form.hasil.value = a-b;

}

함수 칼리(){

확인하다();

a = parseInt(form.angka1.value);

b = parseInt(form.angka2.value);

form.hasil.value = a*b;

}

함수 나누기(){

확인하다();

a = parseInt(form.angka1.value);

b = parseInt(form.angka2.value);

form.hasil.value = a/b;

}


결과 :

 HTML과 자바스크립트로 간단한 추가 프로그램 만들기