7일 자바스크립트-1 아식스-기본 문법-input 값 가져오기

[박진영]

아식스.zip

326.48KB

function = 함수 : 실행문(코드)

자바스크립트 : (웹에서 직접)이벤트 제어 프로그램
1. 데이터 관리 
데이터 종류
 -원시 데이터 : Number, String, Boolean, Undefined, Null
 -오브젝트 데이터 : Array, Object, Class, Interface

변수 : 데이터를 기억하는 임시 기억장소( price=10; )
변수 선언 방법
1. var : any타입 (어떤 값이든 저장)
var a=10; 
a=20;
a="홍길동";
2. let : 같은 타입의 데이터만 입력 가능
let a;
a=20;
a=20+30;
a="홍길동";   // Error
3. const : 값을 고정(상수값)
const a;
a=10;
a=20; // Error ;
변수 만드는 방법
1. 영문자로 시작 ( _(언더바), $로 시작해도 된다.)
2. 변수 사이에 공백 사용 불가 ( let   ab c=10 ; )
3. 특수문자, 예약어(명령어) 사용 불가  ( for=10; )

자바스크립트 기본 문법
1. 한 문장이 끝나면 ;(세미콜론)을 붙인다.
2. 대.소문자 구분 (소문자 기본)
3. 주석(설명문) 
// : 한 주석처리
/*와 */ 여러 줄 주석

Console : 개발자를 위한  화면
alert : 데이터, 메시지를 알림 창


window.xxxxonload=function() {
/*
    // document.write("자동차-1");
    document.write("<br>자동차-2");
    document.write("<br>자동차-3");
    document.write("<br>자동차-4");
    document.write("<br>자동차-5");
    price = 10;
    document.write("<br>자동차 가격 : " + (price+5) );
*/
/*  권장하지 않음(변수 선언이 없으므로 에러를 유발)
    btn.xxxxonclick=function() {
        console.log("안녕하세요");
        btn_ans.innerHTML = "안녕하세요";
    }
*/
/*
    let btn, btn_ans;   // 변수 선언
    btn=document.getElementById("btn");
    btn_ans=document.getElementById("btn_ans");

    // btn.xxxxonclick=function() {
    //     btn_ans.innerHTML = "안녕하세요";
    // }
    btn.addEventListener("click", function() {
        btn_ans.innerHTML = "안녕하세요";
    })
*/
/*
    let btn, btn_ans;   // 변수 선언
    btn=document.querySelector("#btn");
    btn_ans=document.querySelector("#btn_ans");
    btn.addEventListener("click", function() {
        btn_ans.innerHTML = "안녕하세요";
    })
*/
    var coff1, coff2, coff3;
    coff1=document.querySelector(".coff1");
    coff2=document.querySelector(".coff2");
    coff3=document.querySelector(".coff3");

    coff1.xxxxonclick=function() {
        alert(‎"가격은 100원 입니다.\n두 잔이면 : " + 200);
    }
    coff2.addEventListener("click", function() {
        alert(‎"가격은 200원 입니다.");
    })

    var co1, co1_btn, su;

    co1=document.querySelector(".co1");
    co1_btn=document.querySelector(".co1_btn");

    // su=parseInt(co1.value);  프로그램 실행시 값이 없다.
    

    co1_btn.addEventListener("click", function() {
        // su=Number(co1.value); 값이 입력된 후 클릭
        su=parseInt(co1.value);
        alert(‎ su + "잔 값은 " + su*100);
    })
}

축약형
count=count + 1;
count+=1;

abc=abc*20;
abc*=20;

abc=abc+bbc;
abc+=bbc;

증가연산자
count++; 

감소연산자
count--;