인천 일보 아카데미 35일차 -숙제- 계산기 / 학점 관리 프로그램
계산기 만들어보기 계산기 number1: number2: 계산결과: 학점관리 프로그램 만들기 JAVA 성적: html 성적: 학점:
guping.tistory.com
- 계산기 - 풀이
<body>
number1 : <input type="text" id="num1"><br>
number2 : <input type="text" id="num2"><br>
계산결과 : <input type="text" id="result"><br>
<button onclick="cal()">계산</button>
</body>
<script>
const cal = () => {
const num1 = document.getElementById("num1").value;
// input태그만 value를 사용 가능하다
const num2 = document.getElementById("num2");
num1에 document로 num1의 객체를 받아와도 상관없지만
.value를 많이 사용해야 한다면 객체의 value값으로 받아오는 방법도 있다
console.log(typeof num1);
console.log(typeof num2.value);
console.log(num1 + num2.value);
콘솔에 num1과 num2의 value의 타입을 찍어보면
둘다 string으로 나오기 때문에
num1 + num2.value 를찍게 되면 문자 사이의 +는 연결이기 때문에
연결되어 나오는 것을 확인 가능하다
const sum = parseInt(num1) + parseInt(num2.value);
// parseInt로 형변환
우리는 더하기 값을 구해야 하기 때문에 parseInt()로 형변환을 해야한다
나는 전날 Number()함수를 이용하여 형변환을 하였다
console.log(sum);
console에 sum을 찍어보면 형변환이 이루어져 더해진것을 확인 가능하다
const result = document.getElementById("result");
result.value = sum;
이제 result의 value에 sum을 넣어 출력한다
}
</script>
- 형변환에 사용한 Number()함수와 , pareInt()함수의 차이는?
- 학점계산기 - 풀이
<body>
JAVA 성적: <input type="text" id="java"><br>
html 성적: <input type="text" id="html"><br>
학점: <input type="text" id="grade"><br>
<h2 id="grade1"></h2>
<button onclick="grade()">학점계산</button>
</body>
<script>
const grade = () => {
const java = document.getElementById("java").value;
const html = document.getElementById("html").value;
위와 마찬가지로 우리는 value값을 주로 사용해야 하기 때문에
java와 html에 각 객체의 value를 받아왔습니다
const avg = ((parseInt(java)) + parseInt(html)) / 2;
각 조건에 맞게 학점을 출력해야하기 때문에
조건을 위한 avg(평균) 변수를 만들어 줍니다
당연히 평균이기 때문에 더하고 나누어 대입해줍니다
let grade = "";
출력문을 간추리기 위해 학점을 넣어줄
변수 grade를 만들었습니다
if (avg >= 90) {
grade = "A";
} else if (avg >= 80) {
grade = "B";
} else if (avg >= 70) {
grade = "C";
} else if (avg > 60) {
grade = "D";
} else {
grade = "F";
}
if문을 사용하여 조건에 맞는 학점이
변수 grade에 대입됩니다
const result = document.getElementById("grade");
학점만 출력도 같이 해야하기 때문에
학점만 출력하는 태그의 객체를 result에 담아줍니다
result.value = grade;
객체 result의 value에 학점을 담은 grade를 대입하여 출력해줍니다
document.getElementById("grade1").innerHTML = "당신의 학점은 " + grade + "입니다."
h2태그에 출력문을 넣어주기 위해 document객체의 메소드를 활용합니다
}
</script>
- 로그인 - id 길이(length) 체크
해당 결과를 띄워주는 기능을 만들어봅시다
*head부분에 style로 margin100 줌*
<body>
<div>
<h6>이메일</h6>
이메일 작성 공간을 알려주는 h6태그
<input type="text" class="form-control" onblur="email_check()"
id="member-email" name="memberEamil"><br>
input태그를 이용해 text바를 생성 onblur를 이용해 사용자가 text바를 탈출하면
email_check()함수를 호출합니다
<h6 id="email-result"></h6>
이메일 작성에 문제가 있다면 알려주는 h6태그
</div>
</body>
<script>
const email_check = () => {
const member_email = document.getElementById("member-email").value;
input태그의 text바에 입력받은 값의 길이를 알아야하기 때문에
input태그의 객체 value를 member_email에 받아줍니다
let member_result = document.getElementById("email-result");
input태그에서 입력받은 text의 길이에 따라 결과값을 출력해줄
h6태그의 객체를 member_result에 담아줍니다
member_result.style.color = "red";
대충 member_reuslt에 style 추가
if (member_email.length == 0) {
member_result.innerHTML = "필수입력입니다.";
} else if (member_email.length < 5 || member_email.length > 20) {
member_result.innerHTML = "5~20자자 이내로 입력해주세요."
} else if (member_email.length >= 5 && member_email.length <= 20) {
member_result.style.color = "green";
member_result.innerHTML = "좋아요."
}
이제 조건문으로 member_email.length를 통해 길이에 따른 값을
member_result.innerHTML에 담아 출력합니다
}
</script>
- bootstrap - 아이콘 추가하기
웹에 아이콘 스타일을 추가하기 위해서는 우선 bootstrap사이트에 들어가
상단에 있는 Icons 버튼을 클릭해줍니다
Icons 버튼을 누르면 넘어가지는 페이지에서 맨아래 Install 부분으로 넘어갑니다
여러가지 방법이 있지만 이번에는 CDN 방식으로 버튼에 스타일을 적용하겠습니다
붉은 박스로 표시한 부분을 복사해주세요
이후 버튼 스타일을 사용할 html파일의 head부분에 복붙해주세요
이후 마음에 드는 버튼을 bootstarp의 Icons 카테고리에서 찾아 사용해줍니다
body안에 아이콘을 사용하고싶은 공간을 찾아 복사한 부분을 복붙해주면 적용완료!
