▪︎ 이클립스에서 JavaScript 연결
• templates폴더
• webapp/WEB-INF/view : 동적 자료들의 루트 경로 → JSP 파일
• webapp/WEB-INF/view/static : 정적 자료들의 루트 경로
webapp/WEB-INF/view/static/js
webapp/WEB-INF/view/static/css
webapp/WEB-INF/view/static/images
▪︎ 이클립스의 경우, 전체적인 url주소가 아닌 경우 Ctrl 지원 안됨 → 수동으로 폴더 및 파일 생성해야 함
- static에 js폴더 생성 - new - javascript 파일 생성
▪︎ Javascript 작업의 경우, VSC에서 해당 폴더 열어서 작업하기
VSC의 경우, JSTL 및 EL 구문 인식하지 못함 → JSP 작업은 이클립스에서 진행
※ 일관성있게 HTML 태그 속성에서는 큰따옴표 / 자바스크립트 문자열에서는 작은따옴표 사용 권장
▪︎ index.jsp에 CSS 및 JavaScript 연결
<title> 태그 아래에 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/ch03.01.css" rel="stylesheet" >
<script src='js/ch03.01.js'></script>
</head>
<body>
<h1>안녕하세요</h1>
<div id="divImg1">
<img src= "images/tulip.jpg" />
</div>
<div id="divImg2">
<img src= "images/icecream.jpg" />
</div>
</body>
</html>
▪︎ 이클립스에서 HelloController 생성
package org.choongang.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
// view template : 서버 쪽에서 HTML 화면 코드를 만드는 것
// view template(view page) 생성 시, 사용하는 서버 쪽 라우터 매핑 어노테이션
@Controller
public class HelloController {
// 매핑 메서드
// → 요청방식 + 요청주소 uri
@GetMapping("/")
public String home() {
// 브라우저에서 '/' uri로 요청 시, 'index.jsp' 파일이 실행된 결과가 응답됨
return "index";
}
}
▪︎ ch03.01.css 생성
div{
text-align: center;
border: 1px solid #ccc;
}
▪︎ 브라우저에서 'localhost' 호출 시
작업 화면만 보이도록 설정 - 2가지 방식
• 설정 방식
❶ function ch0301(){ }
❷ let ch0301 = function(){ } : 익명함수를 로컬변수의 값으로 저장
• 호출 방식
❶ 정식 함수일 경우 : 함수명(인수, ... )
❷ 로컬 변수에 대입한 경우 : 로컬변수명(인수, ...)
자바스크립트의 에러 확인
• 브라우저의 개발자도구에서 확인 가능 ( console 탭에서 확인 가능 )
조건문
▪︎ ch0301()
function ch0301(){
// * ch03.01 *
// 사용자에게 점수를 입력받아 80점 이상인 경우 "합격"이라는 경고창 띄어주세요.
// 1) 사용자에게 점수를 입력받는다 => prompt()로 구현
// 2) 입력받은 점수를 score 변수에 저장 => const score = prompt('점수를 입력하세요', '정수로 입력')
// 3) 조건문 이용 => if (score >= 80){ alert('합격입니다!') }
const score1 = prompt('점수를 입력하세요', '정수로 입력')
// 점수 판정
if (score1 >= 80) {
alert('합격입니다!')
}
}
▪︎ ch0302()
function ch0302(){
// * ch03.02 *
// 사용자에게 점수를 입력받아 80점 이상인 경우 "합격", 이하면 "다음 기회에" 라는 경고창 띄어주세요.
// 1) 사용자에게 점수를 입력받는다 => prompt()로 구현
// 2) 입력받은 점수를 score 변수에 저장 => const score = prompt('점수를 입력하세요', '정수로 입력')
// 3) 조건문 이용 => 80점 이상인 경우, if (score >= 80){ alert('합격입니다!') }
// 4) 80점 이하인 경우, else { alert('다음 기회에') }
// 주의 ) 로컬 변수의 경우, 같은 페이지에 동일한 이름으로 선언 불가능
const score2 = prompt('점수를 입력하세요', '정수로 입력')
// 점수 판정
if( score2 >= 80 ){
alert('합격입니다!')
} else {
alert('다음 기회에')
}
}
▪︎ ch0303()
function ch0303(){
// * ch03.03 *
// 신입사원의 입사점수가 90점 이상이면 기획팀, 80점 이상이면 총무팀, 나머지는 영업팀을 경고창으로 출력
// 1) 인사담당자가 입사점수를 입력받는다 => prompt()로 구현
// 2) 입사점수별 조건문 이용
// 주의 ) prompt() 메서드 : 입력한 문자열을 리턴해줌 즉, 실제로 숫자를 입력해도 문자열로 인식됨
// 반드시 Number(파라미터) 메서드 : 입력된 파라미터를 가능한 숫자로 변환
// Number('100') => 숫자 100를 리턴
const score3 = Number(prompt('입사 점수를 입력하세요', '정수로 입력'))
// 점수 판정
if ( score3 >= 90 ) {
alert('기획팀입니다')
} else if ( score3 >= 80 ) {
alert('총무팀입니다')
} else {
alert('영업팀입니다')
}
}
▪︎ ch0304()
function ch0304(){
// * ch03.04 *
// 엑셀 점수가 70점 이상, 액세스 점수가 80점 이상일 경우 합격, 그렇지 않을 경우 불합격 처리
// 주의 ) 조건은 반드시 괄호 안에 입력
// const excelScore = Number(prompt('엑셀 점수 입력하세요', '0 ~ 100 사이 정수로 입력'))
// const accessScore = Number(prompt('액세스 점수 입력하세요', '0 ~ 100 사이 정수로 입력'))
// 합격 판정
if (( excelScore >= 70 ) && ( accessScore >= 80 )) {
alert('합격입니다.')
} else {
alert('불합격입니다.')
}
}
▪︎ ch0305()
let ch0305 = function(){
// * ch03.05 *
// 주민등록번호 뒷번호 7자리 중에 첫번째 번호를 입력받아 성별 판정
// 판정기준 : 1 또는 3인 경우, 남성
// 2 또는 4인 경우, 여자
const firstNumber = prompt('주민등록번호의 뒷자리 중 첫 숫자를 입력하세요', '1자리만 입력')
if ( (firstNumber == 1) || (firstNumber == 3) ){
alert('남성입니다.')
} else if ( (firstNumber == 2) || (firstNumber == 4) ){
alert('여성입니다.')
} else {
alert('다시 입력해주세요')
}
}
▪︎ ch0306()
let ch0306 = function(){
// * ch03.06 *
// confirm 함수를 사용한 실행여부 선택 기능
// confirm( 'prompt 설명글' ) : 확인 버튼 클릭 시, true 리턴 / 취소 버튼 클릭 시, false 리턴
// → 반환값이 boolean 타입이므로, 조건문의 조건식에 바로 사용 가능
// '결제하시겠습니까?'라는 확인창이 뜰 때,
// 확인 버튼을 누르면 명령이 없고(아직 개발중인 상태),
// 취소버튼을 누르면 '취소되었습니다'라는 메시지 출력
let choice = confirm('결제를 하시겠습니까?')
if( choice ) { // 확인 버튼을 누른 경우
// 결제 진행 코드를 만드는 중
} else {
alert('결제가 취소되었습니다.')
}
}
▪︎ ch030601()
let ch030601 = function(){
// * ch03.06.01 *
// confirm 함수 대신 논리 부정(!) 연산자를 사용한 선택 기능 만들기
// → 목적 : 부정내용일 때만 if문에서 처리 / 긍정내용일 경우에는 if문 밖 아래에서 처리 (가독성 및 코드의 질 향상)
// choice의 반환값이 true일 경우, !choice = !true = false
// 변수가 오른쪽에 있는 경우, 무조건 변수의 값으로 해석
// → choice만 쓰면 변수 안의 값으로 해석
// '결제하시겠습니까?'라는 확인창이 뜰 때,
// 확인 버튼을 누르면 명령이 없고(아직 개발중인 상태),
// 취소버튼을 누르면 '취소되었습니다'라는 메시지 출력
let choice = confirm('결제를 하시겠습니까?')
// 부정 내용만 if문에서 처리
if( !choice ) {
// 취소 버튼 클릭 시, false 리턴
// 논리부정 연산자로 인해 if문의 조건식을 true로 만들어 if문에서 취소 처리를 진행
// 확인 버튼 클릭 시, 논리부정 연산자로 인해 false가 리턴되어 if문 빠져나옴
}
// 긍정일 경우, 항상 밑에서 처리
}
▪︎ ch0307()
let ch0307 = function(){
// * ch03.07 *
// * 중첩 if문 사용
// 사용자에게 점수를 입력받아 80점 이상일 경우 '합격', 아닌 경우 '불합격'이라는 알림창을 출력
// 단, 점수는 정수로 입력
// 잘못 입력 시, '0 ~ 100 사이의 정수로 입력해주세요.'라는 알림창 출력
/*
Number(파라미터) : 숫자로 변환해줌
isNaN( value ) : 매개변수가 숫자인지 검사하는 함수 ( NaN : Not A Number )
value : 검사할 값을 입력
매개변수가 숫자가 아니면 true, 숫자이면 falus 반환
예) isNaN('123') : false 반환 ( ∵ 작은따옴표로 감쌌지만, 숫자로 취급 )
isNaN( .1 ) : false 반환 ( 0이 빠진 소수 )
isNaN( 'AbC' ) : true ( ∵ 문자열 )
isNaN( '123 * 10' ) : true ( ∵ 숫자 표현식이나 전체식을 문자열로 취급 )
isNaN( '' ) : false ( ∵ 문자열의 0에 해당하는 값''은 0으로 생각 )
* 모든 기본 자료형의 0에 해당하는 값은 0으로 생각
'', null, false(컴퓨터 내부에서 0), [] 비어있는 배열
* 날짜 형식은 숫자로 취급 : false
단, 날짜형식의 문자열형( new Date().toString() : 문자열 ) : true
* 참조자료형( 객체, undefined ) : false
*/
// * psedo-code : 의사코드
// 1) 사용자에게 입력창을 띄어 점수를 입력받아 변수 score4에 저장
// 2) 저장한 score4의 값이 정수인지 확인
// 3) 입력된 정수가 0에서 100 사이의 범위에 해당되는지 검사
// 4) 맞다면, 점수 판정 → 합격 및 불합격 판정
// 아니라면, '0 ~ 100 사이의 정수로 입력해주세요.' 라는 알림창 출력
const score4 = prompt('점수를 입력하세요', '0~100 사이 정수로 입력')
// score4가 숫자인지 체크
if (isNaN( score4 )){
alert('0 ~ 100 사이의 정수를 입력하세요.')
} else {
// 숫자인 경우,
// 입력한 값이 정상적인 숫자 표현식이 아닐 수도 있으므로
// Number() 메서드로 숫자로 변환
intScore = Number( score4 )
if ( (intScore >=0) && (intScore <= 100) ){
if( intScore >= 80 ){
alert('합격입니다.')
} else {
alert('불합격입니다.')
}
} else {
alert('0 ~ 100 사이의 정수를 입력하세요.')
}
}
}
• 의사 코드 ( Pseudo-code )
- 프로그래밍 언어를 코드로 작성하기 전에, 무엇을 어떻게 동작하도록 작성할 지에 대하여 사람이 이해할 수 있는 언어로 작성하는 것
- 의사 코드를 작성하기 전에 문제를 이해하고 논리적으로 해석할 줄 알아야 함
'프론트엔드 > Javascript' 카테고리의 다른 글
| JS - 객체 / 표준 내장 객체 (0) | 2023.08.16 |
|---|---|
| JS - 함수 정의 / 매개변수와 인수 / return문 / 스코프 (0) | 2023.08.14 |
| JS - 조건문 / 반복문 / 인위적으로 반복문 종료시키는 방법 (0) | 2023.08.13 |
| JS - HTML 파일과 자바스크립트 연결 / 자료형 / 연산자 (0) | 2023.08.10 |
| JS - 기본 용어 / 변수 / 연산자 (0) | 2023.07.24 |