HTML로 계산기를 만드는 방법

작가: John Stephens
창조 날짜: 21 1 월 2021
업데이트 날짜: 14 할 수있다 2024
Anonim
[HTML+CSS+JS] 계산기(calculator) 만들기(with grid) / 웹 코딩 / HTML 코딩
동영상: [HTML+CSS+JS] 계산기(calculator) 만들기(with grid) / 웹 코딩 / HTML 코딩

콘텐츠

이 기사에서 : 코드 이해 계산기의 기본 코드 작성 계산기 만들기 계산기 사용 11 참조

내장 계산기를 사용하여 컴퓨터에서 계산을 수행하는 방법은 여러 가지가 있지만 HTML 코드 만 사용하여 직접 계산할 수도 있습니다. 이렇게하려면 필요한 코드를 extension.html로 저장 한 e 파일에 복사하기 전에 HTML의 기본 사항을 배워야합니다. 그런 다음 즐겨 사용하는 브라우저에서 파일을 열어 계산기에 액세스하십시오. 이 기술을 사용하면 컴퓨터 프로그래밍 기술의 기본 사항을 배우면서 브라우저에서 직접 계산을 수행 할 수 있습니다.


단계

1 부 코드 이해



  1. 코드 작동 방식을 이해하십시오. 계산기를 만드는 데 사용할 코드는 문서의 다른 요소를 정의하기 위해 서로 작동하는 작은 코드를 기반으로합니다. 이 링크를 클릭하여 HTML에 대해 자세히 알아 보거나 계산기에 사용할 코드에서 각 줄의 기능을 읽을 수 있습니다.
    • HTML:이 코드는 문서의 나머지 부분에 사용 된 언어를 나타냅니다. 많은 다른 프로그래밍 언어가 사용되며 태그는 이번에는 사용중인 HTML임을 문서의 나머지 부분에 나타냅니다.
    • 머리 : 문서에 다음 정보가 "메타 데이터"라고도합니다. 태그는 일반적으로 제목, 머리글 등과 같은 문서의 스타일 요소를 정의하는 데 사용됩니다. 나머지 코드가 정의되는 우산과 같습니다.
    • 이름 : 문서에 부여 할 제목입니다. 이 태그는 브라우저에서 문서를 열면 문서 제목을 표시하는 데 사용됩니다.
    • body bgcolor = "#" : 문서의 배경색을 설정합니다. 샤프 이후에 나타나는 숫자는 미리 정해진 색상에 해당합니다.
    • = '' : 인용 부호로 표시된 단어는 문서에서 e의 색상을 나타냅니다.
    • 양식 이름 = "" :이 속성은 JavaScript가 어떤 양식을 말하고 있는지 알 수 있도록 다음에 오는 구조에 사용될 양식의 이름을 나타냅니다. 예를 들어, 사용할 양식 이름은 "calculator"이며 문서의 특정 구조를 만듭니다.
    • 입력 유형 = "" :이 작업이 수행되는 곳입니다. "입력 유형"속성은 문서에 나머지 괄호 안에있는 e의 값 유형을 알려줍니다. 예를 들어, e, 비밀번호, 버튼 (계산기의 경우처럼) 등이 될 수 있습니다.
    • 값 = "" :이 속성은 문서에 "입력 유형"속성에 포함될 내용을 알려줍니다. 계산기의 경우 1에서 9까지의 숫자와 산술 부호 (+,-, *, /, =)가 표시됩니다.
    • onclick을 = "" :이 코드는 버튼이 활성화 될 때 발생해야하는 것을 문서에 알려주는 이벤트를 설명합니다. 계산기의 경우 사용자가 누른 버튼에 해당하는 숫자를 표시하려고합니다. 예를 들어, 버튼 6이 활성화 된 경우 따옴표 사이에 document.calculator.in.value + = 6을 넣으려고합니다.
    • BR : 줄 바꿈을 나타내는 태그이며 다음에 나오는 나머지 모든 코드는 아래 줄에 나타납니다.
    • / 형식, / 본문 및 / html 이 닫는 태그는 브라우저에서 이전에 연 태그가 완료되었다고 알려줍니다.

Part 2 계산기의 기본 코드 작성

아래 코드를 복사하십시오. 상자의 왼쪽 상단에서 커서를 누른 상태에서 오른쪽 하단으로 끌어서 전체 e가 파란색으로 표시되도록 e를 선택합니다. 그런 다음 Mac에서 "Command + C"또는 PC에서 "Ctrl + C"를 눌러 e를 복사합니다.


HTML 계산기

결과는

3 부 계산기 만들기




  1. 컴퓨터에서 e 파일을 엽니 다. 사용할 수있는 많은 프로그램이 있지만 품질을 위해 편집 또는 메모장을 사용하는 것이 좋습니다.
    • Mac에서는 화면 오른쪽 상단에있는 돋보기를 클릭하여 Spotlight를 엽니 다. 열면 입력 편집 파란색으로 선택해야하는 프로그램을 클릭하십시오.
    • PC에서 버튼을 클릭하십시오 출발 왼쪽 아래. 검색 창에 메모장 결과에 표시 될 애플리케이션을 클릭하십시오.


  2. HTML 코드를 문서에 붙여 넣습니다.
    • Mac에서는 문서 본문을 클릭하고 "명령 + V". 그런 다음 클릭해야합니다 체재 화면 상단에 간단한 e로보기 코드를 붙여 넣은 후
    • PC에서 문서 본문을 클릭하고을 눌러 코드를 붙여 넣습니다. "Ctrl + V".


  3. 파일을 저장하십시오. 버튼을 클릭하십시오 파일 창의 왼쪽 상단에 다른 이름으로 저장 ... PC에서 또는 저장 ... 표시되는 드롭 다운 메뉴의 Mac에서


  4. HTML 확장을 추가하십시오. 메뉴에서 파일 이름을 입력 한 다음 ".html"을 클릭 한 후 기록. 예를 들어이 파일을 "my first calculator"라고 부르려면 "MyPremierCalculette.html"이라는 이름을 지정할 수 있습니다.

파트 4 계산기 사용



  1. HTML 파일을 찾으십시오. Mac의 Spotlight 또는 Windows 시작 메뉴 검색 막대에 파일 이름을 입력하기 만하면됩니다. 파일 확장자를 입력 할 필요는 없습니다.


  2. 그것을 클릭하여 엽니 다. 기본 브라우저는 계산기를 새 탭에서 열어야합니다.


  3. 버튼을 클릭하여 사용하십시오. 이 결과를 위해 제공된 막대에 계산 결과가 나타납니다.

기타 섹션 Maie Block은 Lii Harrion이 쓴 책 시리즈 The Clique의 주인공입니다. 그녀는 인기, 외모 및 돈이 있습니다. The Clique를 한 번 이상 읽은 사람들은 아마 "와우! Maie가 너무 화려 해요. 나도 그녀처럼 될 수 있으면 좋겠어요."라고 생각했을 것입니다. 그러나 실제로 Maie는 자존감이 낮고 ...

기타 섹션 남성과 여성 모두 유전학, 노화 및 열악한 모발 관리 관행으로 인해 헤어 라인을 따라 탈모를 경험합니다. 많은 경우 두피와 모발을 더 잘 치료하기 시작하면 얇아지는 헤어 라인이 다시 자랄 수 있습니다. 모발 성장을 촉진하는 샴푸 및 시판 제품을 사용하여 이미 발생한 손상을 되돌립니다. 두피를 더 잘 관리하고 가늘어지는 헤어 라인이 더 이상 손상되...

매혹적인 것