24일차 2024 - 3 - 29 :: Attitude of learning

24일차 2024 - 3 - 29

2024. 3. 29. 17:48

복습.

com.mycompany.htmlcssjs.controller

→ com.그룹아이디.아티팩트아이디.controller

@RequestMapping
http://localhost:8080/htmlcssjs/ --> 아티팩트까지 생략되어 있는 것

앞에는 /WEB-INF/views/ 생략 뒤에는 .jsp가 생략

JavaScript

자바스크립트는 가장 유명한 프로그래밍 언어.

웹의 프로그래밍 언어이며 배우는데 쉬운 편..?

● 왜 자바스크립트를 공부해야하는가?

→ 웹 개발자는 반드시 세 개의 언어(HTML, CSS, JavaScript)를 공부해야 한다.

→ 프론트 엔드를 하지 않아도 The Original JavaScript ES1 ES2 ES3 (1997-1999) 까지는 알자..!

The Second Revision ES6 (2015) 이후
앵귤러 js
리액트 js
뷰 js
FrontEnd의 출현

자바스크립트는 HTML 콘텐츠를 변화시킬 수 있다.
선택자를 이용하여 바꿀 요소를 찾는다.

예시)

<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

<p id="demo" >JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

■ script의 위치는?

head 태그 사이에 들어가도 되고, body태그 사이에 위치해도 된다.

<h2>JavaScript in Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

자바는 function(함수)이 없고 메소드가 있다.

자바스크립트는 function(함수)과 메소드가 있다!

자바스크립트의 function(함수) : 객체가 없이 정의된 실행 블록

☞ script의 위치에 따라 순서대로 실행된다.

★ 이벤트를 처리하는 것을 함수가 담당한다! (이벤트 핸들러 = 함수)

헤드에는 주로 선언문으로 사용한다. (함수 선언 등)
바디에는 주로 실행문으로 사용한다. (실행문 -> 변수에 값을 대입 등)

● 외부 자바스크립트의 확장명은?

---.js

<script src="---.js"></script> → 외부 자바스크립트 파일 참조

■ 자바스크립트 내부에서 변수 선언

<script>
    // 변수를 선언하는 3가지 방법 
    var var1 = 1;		// 전역 변수
    let var2 = 1;		// 전역 변수
    const var3 = "abc";	// 전역 변수

    // 콘솔에 변수값 출력
    console.log("var1: ", var1);
    console.log("var2: ", var2);
    console.log("var3: ", var3);
    console.log("");

    // 수정 여부
    var1 = 2;		//(o)
    var2 = 3.5;		//(o)
    //var3 = "def"	//(x) const는 한번 값을 저장하면 바꿀 수 없다 (상수 개념)
</script>
		
		
		
<script>
// 전역 변수와 지역 변수 콘솔창에서 확인하기
    function fun1() {
        var var4 = 10;		// 지역 변수 (함수 레벨)
        let var5 = 10.0;	// 지역 변수 (블록 레벨)
        const var6 = "GHI";	// 지역 변수 (블록 레벨)

        if(true) {
            var var7 = 100;		// 지역 변수 (함수 레벨)
            let var8 = 100.0;	// 지역 변수 (블록 레벨)
            const var9 = "JHI";	// 지역 변수 (블록 레벨)
            // -----------------------
            // 이 자리에 사용할 수 있는 변수는 몇개일까요~?
            console.log("var1: ", var1);
            console.log("var2: ", var2);
            console.log("var3: ", var3);
            console.log("var4: ", var4);
            console.log("var5: ", var5);
            console.log("var6: ", var6);
            console.log("var7: ", var7);
            console.log("var8: ", var8);
            console.log("var9: ", var9);
            console.log("");
            // -----------------------
        }

        // -----------------------
        console.log("var1: ", var1);
        console.log("var2: ", var2);
        console.log("var3: ", var3);
        console.log("var4: ", var4);
        console.log("var5: ", var5);
        console.log("var6: ", var6);
        console.log("var7: ", var7);  // ** var와 let 변수의 차이!!!
        /* console.log("var8: ", var8);
        console.log("var9: ", var9); */ // if문의 지역 변수
        console.log("");
        // -----------------------
    }

    function fun2() {
        // -----------------------
        console.log("var1: ", var1); // 전역 변수
        console.log("var2: ", var2);
        console.log("var3: ", var3);
        /* console.log("var4: ", var4);
        console.log("var5: ", var5);
        console.log("var6: ", var6);
        console.log("var7: ", var7);
        console.log("var8: ", var8);
        console.log("var9: ", var9); */ //지역변수
        // -----------------------
    }

    fun1();
    fun2();
</script>

전역 변수, 지역 변수(함수 레벨, 블록 레벨)

→ 위 코드를 사용해보고 함수 레벨과 블록 레벨의 값의 사용 범위 이해하기 (var와 let의 차이점은?)

if문에서 var로 선언한 변수는 function 내에서 사용가능하고, let으로 선언한 변수는 if문 내에서만 사용이 가능하다.

cf) 자바는 무조건 블록 레벨이다.

■ 자바스크립트에서의 연산자

자바와 조금 다르다.. 코드로 이해하자.

<script>
	// 산술 연산자
	var var1 = 2 ** 3;	// 2의 3승. 즉, 8이다. 제곱의 기능이 가능하다.
	console.log("var1: ", var1);
	console.log("");
	
	// 비교 연산자
	console.log(3 == "3"); // true // 자바스크립트는 피연산자의 타입이 다르면 연산자의 타입을 같게 만든다.
	console.log(3 === "3");	// false // "==="은 타입을 검사하기 때문에 정수와 문자열까지 비교하기 때문이다.
	console.log(3 != "3"); // false
	console.log(3 !== "3"); // true
	console.log("");
	
	// 논리 연산자
	var var2 = true;
	var var3 = false;
	
	console.log(var2 && var3);	// false
	console.log(var2 && "홍길동");	// 문자열 "홍길동"이 나온다.
	// && 앞의 값이 false가 되면 false를 출력하고, 앞의 값이 true이면 뒤에 있는 값을 그대로 출력한다.
	console.log(var2 && 123);	// 정수 123을 출력
	console.log(var3 && "홍길동");
	console.log("");
	console.log(var2 || var3);	// true --> 앞의 값이 true면 무조건 true
	console.log(var2 || "홍길동");	// true
	console.log(var3 || var2);	// true // 앞의 값이 false라면 무조건 뒤의 값이 나온다.
	console.log(var3 || "홍길동");	// "홍길동"
	console.log("");
	console.log(!var3);
</script>

■ 자바스크립트에서의 함수 선언

<script>
	// -------------------------------------
	// 함수 선언
	function fun1(){
		console.log("fun1() 실행");
	}
	fun1();
	// -------------------------------------
	// 함수 선언
	var fun2 = function() {
		console.log("fun2() 실행");
	};	// 변수 선언문 (실행문)이기 때문에 세미클론(;)이 오는 것이 맞다.
	// 함수 호출
	fun2();
	//console.log(fun2);
	// -------------------------------------
	// 화살표 함수(arrow function) 선언
	var fun3 = () => console.log("fun3() 실행");
	var fun3_2 = () => {
		console.log("fun3_2() 실행 1");
		console.log("fun3_2() 실행 2");
	};
	fun3();
	fun3_2();
	// -------------------------------------
	// 함수 대입과 호출
	var fun4 = fun3;
	fun4();
	// -------------------------------------
	// 매개 변수가 있는 함수
	function fun5(arg1, arg2=0){	// 기본값도 설정 가능
		console.log("fun5() 실행");
		console.log("arg1: ", arg1);
		console.log("arg2: ", arg2);
	}
	fun5(10, "abc");	// 기본값 대신 "abc"가 대입된다.
	fun5(10);	// 매개변수를 하나만 넣어줬을 때 기본값이 출력된다.
	fun4(5210320156);	// 이런식으로 매개변수 선언을 안했어도 해당 함수는 호출이 된다. 대신 매개값을 전달하지 못한다.
	// -------------------------------------
	var var6 = (arg1, arg2) => {
		console.log("fun6() 실행");
		console.log("arg1: ", arg1);
		console.log("arg2: ", arg2);
	};
	var6('abc', "def");	// 자바스크립트는 작은 따옴표도 문자열, 큰 따옴표도 문자열이다
	
	var var7 = (arg1) => console.log("arg1: ", arg1); // 실행문이 하나일 때 중괄호 생략가능
	var var7_1 = (arg1, arg2) => console.log("arg1: ", arg1, "arg2: ", arg2);
	var var8 = arg1 => console.log("arg1: ", arg1);	// 매개변수가 하나일 때 소괄호도 생략가능
	var7('fun7() 실행');
	var7_1("fun7_1()실행 테스트", "잘 되나~");
	var8("fun8()실행")
	// -------------------------------------
	// 리턴값이 있는 함수
	function fun9(x, y) {
		let result = x + y;
		return result;
	}
	
	var result1 = fun9(10, 20);
	console.log("result1: ", result1);
	
	const fun10 = (x, y) => { return x + y; };	// const로 사용하면 일회용 함수가 된다.
	var result2 = fun10(10, 40);
	console.log("result2: ", result2);
	
	const fun11 = (x, y) => x + y;
	var result3 = fun11(10, 60);
	console.log("result3: ", result3);
</script>

주석을 해놓았지만, 반드시 다시 써보며 복습하자.

해당 브라우저에서 F12 → console창에서 확인

■ 자바스크립트에서의 객체

<script>
	// 객체 표기법 { }
	var var1 = 3;			// 정수
	let var2 = "abc";		// 문자열
	const var3 = () => {};	// 함수
	var var4 = {};			// 객체
	var var5 = [];			// 배열
	
    // 각 변수의 타입 확인해보기
	console.log("var1의 타입: ", typeof(var1));
	console.log("var2의 타입: ", typeof(var2));
	console.log("var3의 타입: ", typeof(var3));
	console.log("var4의 타입: ", typeof(var4));
	console.log("var5의 타입: ", typeof(var5));
	console.log("");
	
	// 객체 생성 및 속성 정의 ------------------------------
	var car = {
		// 필드(속성)
		company: "현대자동차",
		name: "그랜저",
		price: 50000000,
	};
	
	// 필드(속성)값 읽기
	console.log(car.company);
	console.log(car.name);
	console.log(car.price);
	console.log("");
	console.log(car["company"]);
	console.log(car["name"]);
	console.log(car["price"]);
	
	// 필드(속성)값 변경
	car.company = "포르쉐";
	car["name"] = "911";
	
	console.log(car.company);
	console.log(car["name"]);
	console.log("");
	
	// 객체의 메소드 정의 ------------------------------
	car = {
		// 필드(속성)
		company: "현대자동차",
		name: "그랜저",
		price: 50000000,
		speed: 0,
		
		// 메소드
		run: function() {	// 객체의 메소드를 정의할 때는 화살표 함수를 쓰지마라. this를 쓰지 못한다.
			this.setSpeed(60);
			console.log(this.company + "의" + 
					this.name + "가 " + 
					this.speed + "속도로 달립니다.");
		},
		
		setSpeed: function(speed) {
			this.speed = speed;
		},
		
		toString: function() {
			return this.company + "-" + this.name;
		},
		
	}
	
	// 메소드를 이렇게 작성해도 된다. 더 편한 방법으로 사용하자.
	car2 = {
        // 필드(속성)
        company: "현대자동차",
        name: "그랜저",
        price: 50000000,
        speed: 0,


        run() {		// 이렇게 작성해도 된다.
            this.setSpeed(60);
            console.log(this.company + "의" + 
                    this.name + "가 " + 
                    this.speed + "속도로 달립니다.");
        },


        setSpeed(speed) {
            this.speed = speed;
        },

        toString() {
            return this.company + "-" + this.name;
        },
        // 재정의가 가능한가?
        toString(arg) {
            return arg
        },

        sound: () => {
            console.log(this.name + "빵빵");
        },

        sound: () => {
            // 화살표 함수는 this가 객체 자신이 아니라, window 객체를 참조한다.
            // 그렇기 때문에 this를 사용하는 코드를 작성하면 안된다.
            console.log("빵빵");
        },
	}
	
	// 메소드 호출
	car2.run();
	var info = car2.toString();
	console.log("info: ", info);
	// 재정의 확인해보자
	var info2 = car2.toString("aaaaa");
	console.log("info2: ", info2);	// 재정의를 하게되면 그 위의 메소드가 재기능을 하지 못하게 된다.
	car2.sound();
</script>

◎ 공유기 설정하여 현재 나의 로컬 서버를 모바일로 보기.

교수님께서 공유기를 설정해주셨다.

각자의 컴퓨터에서 Window Defender 방화벽에서 인바운드 규칙 → "X"로 표기되어 있는 것들 삭제 → 새 규칙 생성 → 포트로 체크하고 특정 로컬 포트를 8080으로 주었다.

개인 휴대폰으로 http://(각 컴퓨터의 ip주소):8080/htmlcssjs 로 접속할 수 있다.

+ 추가로 각 jsp파일 내부 head에 <meta name="viewport" content="width=device-width, initial-scale=1.0">를 추가하여 모바일로 접속했을 때 축소되지 않게 해주었다.

※ 앞으로 자바스크립트 공부는 2일 정도 더 소요할 예정.

저작자표시 비영리 변경금지

'JAVA' 카테고리의 다른 글

26일차 2024 - 4 - 2 (0)	2024.04.02
25일차 2024 - 4 - 1 (0)	2024.04.01
23일차 2024 - 3 - 28 (0)	2024.03.28
22일차 2024 - 3 - 27 (0)	2024.03.27
21일차 2024 - 03 - 26 (0)	2024.03.26

Attitude of learning