01. JavaScript

🔶 JavaScript 기본

• 브라우저 내에서 실행되는 프로그램을 개발할 수 있는 프로그래밍언어
• Java와 문법적 유사한 점이 많아 쉽게 배울 수 있다
• 인터프리터 프로그래밍언어 ( ▶ 컴파일 과정없이 소스가 실행파일로 사용된다 )

1. 웹페이지의 내용을 정의하는 HTML
2. 웹 페이지의 레이아웃을 지정하는 CSS
3. 웹페이지의 동작을 프로그래밍하는 JavaScript

🔹 JS로 할 수 있는 일

• HTML 컨텐츠를 변경 할 수 있다.
  • 브라우저를 통해 현재 보는 웹 페이지를 변경 할 수 있다

• HTML 태그의 속성 을 변경
• HTML 컨텐츠의 스타일을 변경 ( CSS )
• 사용자 상호작용하는 프로그램을 작성 ( 이벤트 모델 )
• 브라우저의 도움 없이 서버와 데이터 통신 할 수있따 ( aJax)

🔹 객체지향 프로그래밍언어

+ 프로토 타입기반 객체지향 언어 : JS
+ 클래스 기반 객체지향 언어 : Java

• 동적 데이터 타입을 지원 한다
• 자바스크립트의 함수는 1급 시민 (FirstClasss) - 함수를 변수에 담아서 사용이 가능하다

🔹 프로그램 작성

• 스크립트 태그 내에서 작성

<script>
    console.log('hello JavaScript');
</script>

• 별도의 자바 스크립트 파일을 사용 ( 별도의 app.js 파일 작성)

console.log("안녕!");

• script 태그로 웹 문서에 포함시킨다

<script type="text/javascript" src="app.js"></script>

 

---

🔹 기본 문법

변수 생성과 초기화

📌 정수 타입은 number

📌 문자열 String " " , ' ' 둘다 사용 가능

📌 배열은 Object - 순서 있는 요소의 집합

📌 객체 { } - 순서 없는 key 와 value의 집합

// 변수 생성
let a;                    // 변수 a의 타입은 undefined
                          // 변수 a에 저장된 값은 undefined

// 변수 초기화
let a = 10;      // a 에 저장된 값은 10
typeof (a);       // 변수 a 의 타입은 number

a = "헌원";
typeof (a);      // String


a = true
typeof (a);  // boolean

a = []  // 배열 
typeof (a);  // Object

let x = {}  // 객체
let x = {    // Object
    name: "한",        // key:value
    kor: 80,
    eng: 90,
    math: 30,
    age: 30,
    getTotal: function () {
        return this.kor + this.eng + this.math;
    },
    getAverage: function () {
        return this.getTotal() / 3;
    }
};

⚙ 2차원 배열

let x = [
    ['년도', '매출액'],
    [2021, 1000000, 'red'],
    [2022, 1000000, 'blue'],
    [2023, 1000000, 'yellow']
];

🔧 백틱 ( ` )

let x;
x = `
      테스트 
      테스팅 
      Test
      Taste
      키보드 1번 왼쪽에 위치한 백틱 
      여러줄이 사용가능하다
      `

let firstName = "한"
let lastName = "기선"
let sumName = "안녕하세요 ? " + firstName + "" + lastName + "입니다";
console.log(sumName) //  안녕하세요 ? 한기선입니다

// 백틱 사용
let c = `안녕하세요 ? ${firstName}${lastName} 입니다`
console.log(c) //  안녕하세요 ? 반갑습니다 한기선 입니다

let salary = 2000000
let x = `급여는 ${salary} 이고 , 연봉은 ${salary * 12} 입니다`
// 급여는 2000000 이고 , 연봉은 24000000 입니다

🔨 함수

function fn(x, y) {
    수행문; // 모든 변수가 let 이기에 반환 타입이 없다 
    수행문;
}

let fn = function (x, y) {
    수행문;
    수행문;
}

let fn = (x, y) => {
    수행문;
    수행문;
}

 

❗ Java 와 JavaScript 의 객체 차이

• 클래스 내에 있다면 메서드 method , 그외는 함수 function
• JavaScript 는 객체의 value 에 함수 , 숫자형 , 문자열 저장이 가능하다

function sum() {
    return "Function Sum";
}

let x = {
    name: 10,
    ft: sum
};

 

 

Java와 JavaScript 사용목적

 

Java	JavaScript
클라이언트의 요청 처리	사용자와의  상호 작용
요청 파라미터 값 조회 및 객체에 담기	폼 입력값 유효성 체크
업무로직  실행	이벤트 처리
DB 엑세스 작업 실행	HTML 조작
응답 컨텐츠 제공	엘리먼트 선택 ,  컨텐츠/값 조회 , 컨텐츠/값 변경 , 스타일 변경

🔹 연산자

'10가나다' / 2
// 연산의 결과로 NaN 이 출력된다  Not a Number
// NaN은 숫자가 아니거나 숫자로 변환할 수 없는 값이 참여한 산술연산의 결과

 

📗 내장함수 Parse

• ParseInt
• ParseFloat

'20' - 2      // 18
'20' * '2'   // 40
'20' / 2       // 10
'20' % 2      // 


parseInt('1234')    //1234
parseInt('1234.23') //1234
parseFloat('1234.53') // 1234.111153

 

📕 산술 연산자 + - * / %

5 / 2  // => 2.5

'20' + 2  // =>'202'

 

📘 대입 연산자

+  +=  -+   *=  /=   %=

 

📙 증감연산자

++ , --

📒 비교 연산자

> >=  <= < == === != <>

=== : 타입이 같고 , 값도 같아야 true

== : 값이 일치하거나 , 반환된 값이 일치하면 true

!= : 값이 일치하지 않거나, 변환된 값이 일치하지 않으면 true

!== : 값이 일치하지 않거나, 타입이 다르면 true

 

📘 논리 연산자 && , || , !

• JavaScript가 false로 생각하는 값
  • !!0
  • !!'' 길이가 1인 문자열
  • !!undefined
  • !!NaN
  • !!null
  • false
• JavaScript가 true로 생각하는 값
  • 위의 값을 제회한 모든 값 , true

let id = '';

if (id) {   // if 문의 조건식 부분은 true / false
    // 폼입력 값 제출
} else {
    alert("아이디를 입력해주세요")
}

function annualSalary(salary, comm) {
    let total = salary * 12 + salary * comm * 12;
    return total;
}

annualSalary(2000000, 0.3)       // 31200000
annualSalary(2000000, null)      // 24000000
annualSalary(2000000)           // NaN

function annualSalary(salary, comm) {
    // comm -> undefinded 일시 default 값으로 0 을줌
    // 좌항의 값이 null 혹은 undefinded일시 우항의 값을 연산결과가 된다
    // comm 을 전달받지 못하거나 null 일  우항의 값인 0 을 사용한다
    comm = comm || 0;
    let total = salary * 12 + salary * comm * 12;
    return total;
}

annualSalary(2000000)           // 2000000

논리 연산자는 좌항의 값이 true로 판정되면 좌항의 값이 연산 최종결과가 된다

논리연산자는 좌항의 값이 false로 판정되면 우항의 값이 연산 최종결과가 된다

 

• && 연산자는 좌항이 false 로 판정되면 최종 결과 값은 좌항의 값

100 && 10  // -> 최종결과 값10 , 100은 false , 10이 true

• || 연산자는 좌항이 true로 판정되면 최종결과가 좌항의 값이다

100 || 10 // -> 최종결과 값 10 , 100이 true 10이 false

---

<div class="container">
    <div class="row">
        <div class="col-9">
            <form>
                <!--                체크박스의 상태가 변경될 때 마다   checkBoxClick()함수가 실행            -->
                <input type="checkbox" name="skill" value="java" onchange="checkBoxClick()">자바
                <input type="checkbox" name="skill" value="rust" onchange="checkBoxClick()">러스트
                <input type="checkbox" name="skill" value="python" onchange="checkBoxClick()">파이썬
                <!--                    저장버튼을 클릭할 때 마다 saveClick()함수 실행-->
                <button type="button" onclick="saveClick()">저장</button>
            </form>
        </div>
        <div class="col-3">
            html 태그
        </div>
    </div>
</div>
<script>
    // 웹 페이지가 로딩될 때 바로 실행할 작업
    수행문;
    수행문;
    수행문;

    // 사용자와 상호작용 하는 작업
    // 저장버튼 클릭시 실행할 작업이 구현된 함수
    function saveClick() {
        수행문;
        수행문;
    }

    // 체크박스 체크 ,해제시 실행할 작업이 구현된 함수
    function checkBoxClick() {
        수행문;
    }
</script>

🔹 JavaScript 함수

정의

function 함수명(매개변수, 매개변수) {
    수행문;
    수행문;
}

• function 키워드는 함수를 정의 할 때 사용하는 자바스크립트의 예약어
• 자바스크립트 함수는 반환 타입이 없다 (죄다 let 임)
• 자바스크립트 함수의 매개변수는 매개변수 타입이 없다
• 자바스크립트 함수는 return 문을 사용해 값을 반환할 수 있다
• 반환값은 "숫자, 문자열,boolean, 객체 , 배열 , 다른 함수" 가 가능하다
• return 문이 없는 함수는 항상 undefinded를 반환한다
  
  
  
• 이름 없는 익명함수를 정의하고 그 함수를 변수에 대임

let 변수명 = function (매개변수1, 매개변수2) {
    수행문;
    수행문;
    return 반환값;
}

• 변수에 대입된 함수 실행

변수명();