<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const score = Number(prompt('grade : ', 'grade'))
// if (score === 4.5) {
// alert('god')
// } else if (4.2 <= score && score < 4.5) {
// alert('love of professional')
// } else if (3.5 <= score && score < 4.2) {
// alert ('guard of now')
// } else if (2.8 <= score && score < 3.5) {
// alert ('normal')
// } else if (2.3 <= score && score < 2.8) {
// alert('burn out of civil')
// } else if (1.75 <= score && score < 2.3){
// alert('playing adventure')
// } else if (1.0 <= score && score <= 1.75){
// alert('underground')
// } else if (0.5 <= score && score < 1.0){
// alert('ruler bug')
// } else {
// alert('revolution of current')
// }
//same
if (score === 4.5) {
alert('god')
} else if (4.2 <= score) {
alert('love of professional')
} else if (3.5 <= score) {
alert ('guard of now')
} else if (2.8 <= score) {
alert ('normal')
} else if (2.3 <= score) {
alert('burn out of civil')
} else if (1.75 <= score){
alert('playing adventure')
} else if (1.0 <= score){
alert('underground')
} else if (0.5 <= score){
alert('ruler bug')
} else {
alert('revolution of current')
}
</script>
</head>
<body>
</body>
</html>
### Script Explanation
Upon entering a grade, the script assigns it to the `score` variable after converting the input to a number. The grade is then evaluated through a series of conditional statements to categorize it. These categories range from "god" for a perfect score to various playful categories for lower scores, down to "revolution of current" for scores not fitting any other category.
### First Approach (Commented Out)
- The first approach uses `else if` conditions extensively, with each condition explicitly checking a range (e.g., `4.2 <= score && score < 4.5`). This method ensures each score falls within a specific range before assigning a category.
### Second Approach (Used)
- The second approach simplifies the conditional checks by leveraging the fact that once a condition is met in an `if`/`else if` chain, none of the subsequent conditions are evaluated. This means you don't need to specify the upper bound of each range after the first match because it's implied that the score didn't meet the criteria of any preceding condition.
- This approach starts with the highest specific value (`score === 4.5`) and proceeds through decreasing threshold values without specifying the upper limit for subsequent conditions.
### Key Observations
- Both approaches are functionally equivalent. The second approach benefits from being more succinct and easier to read, as it eliminates redundant checks (the upper limit of each range) found in the first approach.
- The script assumes the input will be convertible to a number. If a non-numeric value is entered, the conversion will result in `NaN`, which will fall into the last `else` category ("revolution of current").
- Using `alert` for output is effective for simple scripts like this but could be intrusive in a user interface. For a more user-friendly approach, especially in more complex applications, consider displaying the results within the HTML document itself.
### Conclusion
This document effectively demonstrates how to use conditional logic in JavaScript to categorize and provide feedback based on numerical input. It showcases two different ways to structure `if`/`else if` chains for range checking, with a focus on making the code as efficient and readable as possible.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 4) continue (0) | 2024.11.30 |
|---|---|
| chapter 4) break (0) | 2024.11.29 |
| chapter 3) Using conditional operators (0) | 2024.11.27 |
| chapter 3) Using switch conditional statements (0) | 2024.11.26 |
| chapter 3) Using if conditional statements (0) | 2024.11.25 |