pre-training JavaScript (9)

📚 국비 9 일차

---

📌 JavaScript → 스크립트 언어 : 별도의 컴파일 과정없이 소스코드를 그대로 실행한다 ( 소스코드를 바로 실행 )
      Ex. ) JavaScript , python , swift

• 동적 데이터 타입을 지원한다 → 저장되는 데이터에 따라 변수의 타입이 달라진다.

// JavaScript는 동적 데이터 타입을 지원한다.
// 변수에 저장되는 데이터에 따라 변수의 타입이 달라진다.

let a;
console.log("a의 데이터의 타입 :",typeof(a));

a = false ;
console.log("a의 데이터의 타입 :",typeof(a));

a = 100;
console.log("a 데이터의 타입 :",typeof(a));

a = 3.14;
console.log("a 데이터의 타입 :",typeof(a));

a = "안녕하세요";
console.log("a 데이터의 타입 :",typeof(a));

a = {name : "기선" , kor : 100 , eng : 100 , math :100};
console.log("a의 데이터 타입 : ",typeof(a));

a = function(){
    console.log("함수 입니다.");
}
console.log("a의 데이터 타입 : ",typeof(a));



// undefined -> boolean -> number -> String -> object -> function

 

📌 Java → 컴파일언어 : 소스코드를 실행파일로 변환하는 컴파일 과정이 필요하다 ( 소스코드 → 실행파일 )
      Ex. ) Java , c , c++ 

• 데이터 타입이 엄격한 프로그래밍 언어
• Java는 값 , 배열 , 객체를 변수에 저장할수 있다.
• 매개변수의 인자로 전달할수 있다 , 함수의 반환값으로 사용할수 있다
• Java는 실행이 설치된 어느 플랫폼 ( 컴퓨터 ) 에서나 실행된다
• backend 애플리케이션 개발에 주로 사용된다

boolean a = true;
int b = 100;
long c = 1000000000;
double d = 3.14;
char c = 'A';
String f = "ABCDEFG";
int[] g = {10 , 20 , 30 };
String [] h = {"김시민","곽재우","김유신"};
Score i = new Score("김시민" , 100 , 29);

 

📚 var 와 let

구분	var	let
호이스팅	호이스팅 된다	호이스팅 되지 않는다
범위	변수의 범위가 함수다	변수의 범위가 블럭이다
중복정의	가능하다	불가능하다

 

• let 은 변수가 호이스팅 되지 않는다
• let은 변수의 scope가 블럭이다
• let은 동일한 이름의 변수를 중복 정의 할수 없다.

 

📌 호이스팅 Hoisting

JavaScript에서 변수 선언 , 함수 선언정보를 메모리에 올리는 동작이라고 한다.
변수나 함수를 선언하기 전에 참조하거나 호출할수 없다는 의미이다.

console.log(foo); // undefined
var foo = "hello";
console.log(foo); // hello

• 첫번째 변수 foo가 아직 정의되지 않아 undefined를 출력한다

 

📌 범위 Scope

var로 선언된 변수는 그 변수가 선언된 함수 내에서만 유효하다
만약 함수 외부에서 var로 변수를 선언하면 그 변수는 '전역변수'가 된다

function exF() {
    if (true) {
        var functionScope = 'I am function-scoped';
    }
    console.log(functionScope);  // 출력: I am function-scoped
}

exF();

console.log(functionScope);  // ReferenceError: functionScoped is not defined

 

let 으로 선언된 변수는 가장 가까운 둘러사는 블럭 내에서만 유효하다

if (true) {
    let blockScope = 'I am block-scoped';
    console.log(blockScope);  // 출력: I am block-scoped
}

console.log(blockScope);  // ReferenceError: blockScope is not defined

✔ var로 선언된 변수는 함수 내에서 접근이 가능하나, let으로 선언된 변수는 해당 블록 내에서만 접근 가능하다.

let을 사용하면 코드의 동작이 더 명확하게 표현될 수 있으며, 실수로 인한 버그 발생 가능성도 줄어든다.

---

// JavaScript는 동적 데이터 타입을 지원한다.
// 변수에 저장되는 데이터에 따라 변수의 타입이 달라진다.

let a;
console.log("a의 데이터의 타입 :",typeof(a));

a = false ;
console.log("a의 데이터의 타입 :",typeof(a));

a = 100;
console.log("a 데이터의 타입 :",typeof(a));

a = 3.14;
console.log("a 데이터의 타입 :",typeof(a));

a = "안녕하세요";
console.log("a 데이터의 타입 :",typeof(a));

a = {name : "기선" , kor : 100 , eng : 100 , math :100};
console.log("a의 데이터 타입 : ",typeof(a));

a = function(){
    console.log("함수 입니다.");
}
console.log("a의 데이터 타입 : ",typeof(a));

 

---

// 로또 번호 출력하기

/*
Math.random()  = 0 보다 크거나 같고 1보다 작은 임의의 실수를 반환한다.
Math.trunc(실수) = 실수의 소수점 부분을 버려 정수로 반환한다

let value = Math.trunc(Math.random() * N + 1);
value의 값은 1  ~ N 범위의 정수값이다

*/

// 1 ~ 45 범위의 임의의정수 6개를 저장할 배열객체다.


function generateLotto(){
    
    let lotto = [];

    while(true){

        // 임의의 정수갑 ㅅ얻기
        let number = Math.trunc(Math.random() * 45 + 1);
        
        // 존재여부를 체크해서 존재하지 않으면 배열에 추가한다.
        let result = exists(lotto,number);
        
        if(result == false){
        // 배열에 값 추가하기
            lotto.push(number);
        }

        if(lotto.length == 6){
            break;
        }
    }
    
    lotto.sort(function(num1,num2){
        return num1 - num2
    });
    console.log("로또번호 : ", lotto);
}

function exists(arr,number){
    // 존재 여부를 저장할 변수 정의
    let isExists = false;
    // 배열의 길이만큼 반복작업을 수행
    for(let index = 0; index < arr.length; index++){
        // 인덱스번째 배열값과 전달받은 숫자를 비교
        // 값이 일치하면 존재여부를 true로 설정 , 반복문을 탈출
            if(arr[index] == number){
                isExists = true;
                break;
            }
        }
        // 존재여부를 반환한다.
        return isExists; 
    }


for(let i = 1; i<=5; i++){
   generateLotto();
}
// generateLotto();

 

---

GUI ( Graphics User Interface )  그래픽화 되어있는 부분을 사용자가 클릭 혹은 입력시 작용하는 화면을 제공

Component ( 완제품이 아닌 반제품 ) 창 , 버튼 , 체크박스 , 콤보박스 , 입력필드 , 메뉴

Event Driven Development 이벤트 주도개발

• 이벤트 : 컴포넌트와 상호작용으로 발생하는 것 Ex. 웹에서 버튼 클릭시 button 태그 이벤트 발생 
• 이벤트 소스 : 이벤트가 발생한 컴포넌트  Ex. 버튼클릭시 button 태그가 이벤트 소스
• 이벤트 핸들러 :  이벤트 소스에서 지정한 이벤트가 발생했을 때 실행할 함수

 

1. 컴포넌트를 선정 → 버튼
2. 이벤트의 종류를 선정 → onclick
3. 이벤트를 작성한다 →  함수구현 
4. 이벤트 핸들러와 이벤트를 연결

<button onclick = "fn()1"> Btn </button>

 

 

<!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>
    
    <h1>샘플 테스트 페이지</h1>

    <!-- button 태그 클릭시 fn1()함수 사용 -->
    <button onclick="fn1()">버튼1</button>
    <br><br>
    <button onmouseenter="fn1()">버튼2</button>

    <br><br><br>
    
        ID  : <input type="text"><br><br>
        PW  : <input type="password" maxlength="30"><br>


<script>

    function fn1(){
        console.log("버튼이 클릭 되었습니다.")
    }   

</script>
</body>
</html>