Visual Studiocode로 javascipt로 나머지를 구하는 프로그램 만들기 기초 1

안녕하세요 오늘부터 javascript 기초에 대해 최대한 자세하고 쉽게 설명해보도록 하겠습니다.

javascript를 공부하기 전에 제가 작성해드린 html 과정을 먼저 수강하시고 듣는 것을 추천드립니다:)

1. script 태그 활용

2.document.write 삽입

3. 변수 선언방법- let활용

4.getElementById 사용하기

1. sciript

실무에서 보통 body 안에 기본 script코드를 넣고 시작한다고 하니 body 안에 항상 <script> 태그를 넣고 시작하시는 것을 추천드립니다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</script>

</body>

</html>

2.document.write 삽입

화면에 출력하세요~

3. 변수 선언방법

let활용

보통 var보다 let을 활용을 많이 합니다. var은 에러날 가능성이 높다고 해요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name = prompt("이름을 입력하세요")
        // 오른쪽에 있는 것을 왼쪽에 집어 넣어라!
        document.write(name);
        // name을 출력해줘!
    </script>
</body>
</html>

4.console.log 활용

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

</style>

</head>

<body>

let num1 = prompt("1숫자를 입력하세요")

// 오른쪽에 있는 것을 왼쪽에 집어 넣어라!

let num2 = prompt("2숫자를 입력하세요")

let sum = Number(num1) * Number(num2);

console.log(sum);

document.write("1숫자는"+num1+"2숫자는"+num2+"<br>");

document.write("합계는:"+sum);

// document.write는 실무에서는 잘 안씀

</script>

</body>

</html>

기초실습문제 1

2개의 수를 입력받아 두수의 곱을 알림창으로 나타내는 프로그램을 구현하시오.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

let num1 = prompt("숫자 1을 입력하시오");

let num2 = prompt("숫자 2를 입력하시오");

let num3 = prompt("숫자 3를 입력하시오");

let num4 = prompt("숫자 4를 입력하시오");

let mul = Number(num1) * Number(num2);

let sum = Number(num3) + Number(num4);

console.log(mul);

console.log(sum);

document.write("곱셈 결과는:"+mul+"<br>");

document.write("숫자 3과 4의 합은"+sum+"<br>");

</script>

</body>

</html>

4.getElementById 사용하기

getElementById 함수를 불러와서 btn이라는 변수를 불러와달라는 명령 부여하기

<출력 예시>

보시는 화면과 같이 결과가 합계는 3이 나오는 것을 확인하실 수 있습니다.

<!DOCTYPE html>

<head>

<title>script1</title>

</head>

<body>

<div>

<label for="int1">첫번째 숫자를 입력하세요</label>

</div>

<div>

<label for="in2">두번째 숫자를 입력하세요</label>

</div>

<button id="btn">확인하세요</button>

let btn = document.getElementById("btn");

// getElementById 함수를 활용해서 btn을 불러오고 그걸 btn에 넣어줘

btn.onclick = function() {

let in1 = document.getElementById("in1").value;

let in2 = document.getElementById("in2").value;

let sum = Number(in1) + Number(in2);

let result = document.getElementById("result");

result.innerHTML = "합계는"+sum;

}

</script>

</body>

</html>

나머지를 구하는 프로그램

5.addEventListener 사용법

addEventListener()는 document의 특정요소(Id,class,tag 등등..)

event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다.

html 코드

<!DOCTYPE html>

<head>

<title>caculator1</title>

<style>

.outBox {

width: 100vw;

height: 70vh;

display: flex;

justify-content: center;

align-items: center;

background-color: aqua;

}

.addBox {

width: 40%;

height: 80%;

background-color: pink;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.box1 {

display: flex;

justify-content: center;

}

.result{

width:80%;

height: 80%;

border-radius: 20px;

border: 2px solid black;

font-size: 30px;

text-align: center;

line-height: 300px;

}

.mulBox {

width: 40%;

height: 80%;

background-color: gold;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.result2{

width:80%;

height: 80%;

border-radius: 20px;

border: 2px solid black;

font-size: 30px;

text-align: center;

line-height: 300px;

}

</style>

</head>

<body>

<div>

</div>

<button id="btn1">더하기결과</button>

</div>

<button id="btn2">곱하기결과</button>

</div>

let btn1 = document.getElementById("btn1");

btn1.onclick = function() {

let num1 = document.getElementById("num1").value;

let num2 = document.getElementById("num2").value;

// num1 과 num2를 데려오겠다

let sum = Number(num1)+Number(num2);

let result = document.getElementById("result");

// result 태그를 사용하도록 선언

result.innerHTML = sum;

// result 태그 안에 sum을 찍겠다

}

let btn2 = document.getElementById("btn2");

btn2.onclick = function() {

let num3 = document.getElementById("num3").value;

let num4 = document.getElementById("num4").value;

let mul = Number(num3) * Number(num4);

let result2 = document.getElementById("result2");

result2.innerHTML = mul;

// result 태그 안에 sum을 찍겠다

}

</script>

</body>

</html>

저작자표시

'Javascript' 카테고리의 다른 글

javascript if 및 for문 활용방법 (0)	2023.06.14
DOM 개념 간단 정리 / 짝수 판별 / 점수 분류 / 계절 판별 / 로그인 판독 문제 (0)	2023.06.13
Vscode로 알림장 초대장 만드는법 (0)	2023.06.01
[javascript] 키워드 정리 Property 프로퍼티 속성의 개념 (0)	2022.05.08
자바스크립트 기초 (0)	2022.05.08

열정을 담아

Visual Studiocode로 javascipt로 나머지를 구하는 프로그램 만들기 기초 1

'Javascript' 카테고리의 다른 글

티스토리툴바

Visual Studiocode로 javascipt로 나머지를 구하는 프로그램 만들기 기초 1

'Javascript' 카테고리의 다른 글

관련글

티스토리툴바