코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table.bound{
        border-collapse: collapse;
        border:1px solid yellowgreen;
        height:340px;
        width: 260px;
    }
    td.bound {
        border:1px solid blue;
    }
    #selMenu,#selOrder,#selSales {
        width: 240px;
    }
</style>
<body>
    <table>
        <tr>
            <td valign=top>
                <table class='bound'>
                    <caption>메뉴목록</caption>
                    <tr>
                        <td colspan=2>
                            <select id=selMenu size=13"></select>
                        </td>
                    </tr>
                    <tr>
                        <td>메뉴명</td>
                        <td><input type="text" id=menuname readonly></td>
                    </tr>
                    <tr>
                        <td>수량</td>
                        <td><input type="number" id=count min=1></td>
                    </tr>
                    <tr>
                        <td>금액</td>
                        <td><input type="number" id=price readonly></td>
                    </tr>
                    <tr>
                        <td><button id=btnReset>비우기</button></td>
                        <td align="right"><button id=btnAdd>메뉴추가</button></td>
                    </tr>
                </table>
            </td>
            <td valign=top>
                <table class='bound'>
                    <caption>주문목록</caption>
                    <tr>
                        <td colspan="2">
                            <select id=selOrder size=13></select>
                        </td>
                    </tr>
                    <tr>
                        <td>총액</td>
                        <td><input type="number" id=total></td>
                    </tr>
                    <tr>
                        <td>모바일</td>
                        <td><input type=phone id=mobile size=13></td>
                    </tr>
                    <tr>
                        <td colspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                        <td><button id=btnCancel>주문취소</button></td>
                        <td align="right"><button id=btnDone>주문완료</button></td>
                    </tr>
                </table>
            </td>
            <td valign=top>
                <table class='bound'>
                    <caption>판매내역</caption>
                    <tr>
                        <td>
                            <select id=selSales size=17></select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
<script src='https://code.jquery.com/jquery-3.5.0.js'></script>
<script>
    //메뉴 최소 10개
let arMenu=[{name:'아메리카노 ',price:2000,won:' 원'},
            {name:'카페모카 ',price:2800,won:' 원'},
            {name:'라떼 ',price:2500,won:' 원'},
            {name:'에스프레소 ',price:2000,won:' 원'},
            {name:'딸기요거트스무디 ',price:3500,won:' 원'},
            {name:'쿠키프라페 ',price:3800,won:' 원'},
            {name:'딸기쿠키프라페 ',price:4000,won:' 원'},
            {name:'딸기바나나주스 ',price:3400,won:' 원'},
            {name:'얼그레이티 ',price:3000,won:' 원'},
            {name:'녹차 ',price:3300,won:' 원'}
            ];
let toMenu=[];
let total=0;
$(document)
.ready(function(){
    $.each(arMenu,function(ndx,obj){
        strMenu=`<option value="${obj['name']}">${obj['name']}${obj['price']}${obj['won']}</option>`;
        $('#selMenu').append(strMenu);
    });
})
.on('click','#selMenu',function(){
     Nm_Pr=$('#selMenu option:selected').text();
     ar=Nm_Pr.split(' ');
     console.log(ar);
    $('#menuname').val(ar[0]);
    $('#price').val(ar[1]);
    $('#count').val(1)
})
.on('change','#count',function(){
    C=0;
    Nm_Pr=$('#selMenu option:selected').text();
     ar=Nm_Pr.split(' ');
     parseInt(ar[1]);
    $('#price').val(ar[1]*$('#count').val());
})
.on('click','#btnReset',function(){
    $('#menuname,#count,#price').val('');
})
.on('click','#btnAdd',function(){
    total=0;
    M=$('#menuname').val();
    C=$('#count').val();
    P=$('#price').val();
    P=parseInt(P);
    toMenu.push(P)
    strOrder='<option>'+M+'  '+' x'+C+'  '+P+'</option>';
    $('#selOrder').append(strOrder)
    
    for(i=0;i<toMenu.length;i++){
        total+=toMenu[i];
    }
    $('#total').val(total);
})
.on('click','#btnCancel',function(){
    $('#selOrder').text('');
    toMenu=[];
    $('#total').val('');
})
.on('click','#btnDone',function(){
    Phone=$('#mobile').val();
    money=$('#total').val();
    strDone='<option>'+'번호 : '+Phone+'  총액 : '+money+'원'+'</option>';
    $('#selSales').append(strDone)
    $('#selOrder').text('');
    total=0;
    toMenu=[];
    $('#total,#mobile').val('');
})

</script>
</html>

'국비지원학원 > Javascript' 카테고리의 다른 글

11.16정리  (0) 2021.11.16
11.15정리 (jquery 기초)  (0) 2021.11.16
11.12 정리  (0) 2021.11.16
11.11 정리  (0) 2021.11.12
11.10정리(setInterval, newDate()함수)  (0) 2021.11.10

jquery 사용법

 

<script src='https://code.jquery.com/jquery-3.5.0.js'></script>로 jquery를 자바스크립트에 불러와야 사용가능!

 

//실행문(실행코드)<in
document.getElementById('id').value=str; == $('#id').(str);
str=Document.getElementById('id').value; == str=$('#id').val();

//이벤트 핸들러(Event Handler)
document.getElementById('id').addEventListener('event',function(){
});
document.getElementById('id').addEventListener('event',funcname);

$(document).on('event','#id',function(){});
$(document).on('event','#id',funcname);


//jquery Envet핸들러 종류 및 사용
$(document)
.on('click','#id1',function(){})
.on('blur','#id2',function(){})
.on('focus','#id3',function(){})
.on('mouseout','#id4',function(){})

//jquery는 하나의 document에 여러가지 id의 이벤트 지정가능

//radio, checkbox
//<input type=radio name=rname, <input type=checkbox name=cname
$('input:radio[name=rname]').each(function(){
    if($(this).prop('checked')==true){...}//여기에있는 radio버튼이 true면 아래있는조건 실행
   
});
$('input:checkbox[name=cname]').each(function(){
    if($(this).prop('checked')==true){...}//check박스가 선택되어 있다면 실행
});
each()는 반복문과 같은데 안에있는 str을 반복적으로 실행한다

//select
<option value='xxx'>yyy</option>

value :str=$('#id').val(); //<value값을 가져올땐input tag와 같음
text  :str=$('#id option:selected').text(); //option중에 선택된것의 text값을 가져옴
       str=$('#id option:checked').text();
 
 

(this)

불러온곳에있는 값 또는 이름 등을 사용하는 함수

 

값을 읽어오기

$('input:radio[name=rname]').each(function(){

if($(this).prop('checked')){

gender_str=$(this).val();

return false;

}

});

 

str=$(this).prop('checked'); //str== true or false 둘중하나뿐
//prop()내부에 값이 하나뿐이면 값을 return하는 역할
//prop()내부에 값이 두개라면 값을 세팅한다.

str=$('#id').prop('checked',true); // become checked
str=$('#id').prop('checked',false); // unchecked
 
jquery background color변경명령어
$('#id').css('background-color','color');

로 변경할 수 있다.

 

let n;
let flag;
let arRect; //전역변수로 선언을 해준뒤

$(document)
.ready(function(){ //ready()안에서 변수 값을 선언해준다!
    n=0;
    flag=true;
    arRect=['dvFirst','dvSecond','dvThird'];
})

 

'국비지원학원 > Javascript' 카테고리의 다른 글

자바스크립트를 사용한 카페관리 프로그램  (0) 2021.11.19
11.15정리 (jquery 기초)  (0) 2021.11.16
11.12 정리  (0) 2021.11.16
11.11 정리  (0) 2021.11.12
11.10정리(setInterval, newDate()함수)  (0) 2021.11.10

addEnvetListener = .on
getElementById = #
.value = .val()
$ = jquery호출
getElemnetByName = 'input[name=Name]'


<option value='Hi'>Hello</option>


console.log($('#selRegion').val()) << value값 호출 //Hi 호출
console.log($('#selRegion selected').text <<고른것의 text값 호출 // Hello 호출

'tag명 : tpye명 [name=name명]'
(input:checkbox[name=interest]').each(functuin(){
consol.log(this.id);
}
});

 

 

$(document)
.on('click','#btnShow',function(){
    str=$('#txtName').val(); //str = document.getElementById('txtName').value;
    $('#txtName1').val(str); //document.getElementById('txtName').value = str
    //$('#txtName').val() = str; 이거 절대아님

});

 

'국비지원학원 > Javascript' 카테고리의 다른 글

자바스크립트를 사용한 카페관리 프로그램  (0) 2021.11.19
11.16정리  (0) 2021.11.16
11.12 정리  (0) 2021.11.16
11.11 정리  (0) 2021.11.12
11.10정리(setInterval, newDate()함수)  (0) 2021.11.10

객체(object) - 데이터타입 (자바스크립트)

                  key-value couple

 

nem=10;

str="Hello";

ar = [12,1,4,7];

let obj = {
		name:'SDH',
        mobile:'123123123',
        age:26,
        city:'Cheonan'
        };
let obj2 = {
        name:'Jonadan',
        gender:'male',
        age:24
    };

let ar = [obj,obj2]; //배열에 넣기가능

let x = ar[0]['age']; //x = 26
let y = ar[1]['gender']; //y = male



ex)
let x = obj['name']; // x='SDH'
let y = obj['mobile']; // y='123123123'
obj['age'] = 26;
obj['car']='AVANTE' //<<이와같이 위에 없는 값을넣으면 위에있는 obj에 car:'AVANTE'가 추가됨
obj['city']=null // 내용이 지워짐

o1={Korean:96,
	Math:98,
    English:94,
    Chmistry:92}

javascript framework : "object-based"

 

예제

    let ar=['name ','age ','city ','birthday '];
    let person={};
    for(i=0;i<ar.length;i++){
        person[ar[i]]=prompt(ar[i]+'을 입력하시오');
    }
    for(i=0;i<ar.length;i++){
        document.write(ar[i]+'['+person[ar[i]]+']<br>');
    }
    document.write('프로그램종료');

ar[] : 객체명

person : 빈 object

for문 첫번째 : person 이라는 object에 ar배열에있는 객체명을 넣고 prompt로 객체값을 받아와서 넣어준다

for문 두번째 : person 안에있는 값 출력

'국비지원학원 > Javascript' 카테고리의 다른 글

11.16정리  (0) 2021.11.16
11.15정리 (jquery 기초)  (0) 2021.11.16
11.11 정리  (0) 2021.11.12
11.10정리(setInterval, newDate()함수)  (0) 2021.11.10
숫자를 받고 그숫자에 해당하는 구구단을 출력하기  (0) 2021.11.08

문자열 관련 내장함수(Built-in String Functions)
-문자열을 배열 취급한다.
-공백도 문자취급한다. 

(1)문자열변수.substring() == 문자열의 일부를 추출 ==.substr()

let str='Hello World';
let x=str.substring(6,5); //substr(시작문자 인덱스,길이) 

console.log(x); //World가 나온다

let y=str.substring(5); //5번째 인덱스부터 끝까지
console.log(y); //World

let z=str.substring(0,5);
console.log(z);  //Hello  처음부터 5번째인덱스까지

(2)문자열 변수.length

let n=str.length;
console.log(n); //11

(3)문자열 변수.replace() //replace A with B -- A를 B로 대체한다

문자열변수.replaceAll() //value값 안에있는 모든 A를 B로 대체한다.

let str1=str.replace("Hello","Dream"); // 'Dream World'

(4) toUpperCase(), toLowerCase() //대소문자 변환
console.log(str.toUpperCase()); //'HELLO WORLD'
console.log(str.toLowerCase()); //'hello world"

(5) indexOf() //문자의 위치인덱스값을 찾는다.

let n=str.indexOf('W');
console.log(n); //6

let i=str.indexOf('ll');
console.log(i); //2 == 문자가시작하는 첫번째 인덱스값이 나온다!

(6) charAt() //인덱스로 문자를 찾는다

let sch = str.charAt(6);
console.log(sch); //'W'

(7) 문자열변수.split(); //찢다.

let ar=str.split(); // 결과는 항상 배열로 나온다.

ar['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd']

str='12,7,45,92,88,100,24';
let ar=str.split(',');
console.log(ar); //['12','7','45','92','88','100','24']

(8)str.lastIndexOf() 뒤에서부터 ()안에있는 내용까지의 인덱스 숫자

'국비지원학원 > Javascript' 카테고리의 다른 글

11.16정리  (0) 2021.11.16
11.15정리 (jquery 기초)  (0) 2021.11.16
11.12 정리  (0) 2021.11.16
11.10정리(setInterval, newDate()함수)  (0) 2021.11.10
숫자를 받고 그숫자에 해당하는 구구단을 출력하기  (0) 2021.11.08 
<body>
    <label id=lblNow style="background-color: whitesmoke;color: blueviolet;"></label>
</body>
<script>
    setInterval(doWrite,500); //0.5초주기로 doWrite함수 반복 하지만 라벨이기 때문에 무한히 보여짐

    let week = ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
                 'Thursday', 'Friday', 'Saturday'];
    let month = ['January', 'Feburary', 'March', 'April', 'May', 'June', 'July', 'August', 
                'September', 'October', 'November', 'December'];
    function doWrite(){
        let today=new Date();
        let monmon=(today.getMonth()+1);
        let monthLabel=month[monmon];
        let dayday=today.getDay();
        let todayLabel=week[dayday];
        str=today.getFullYear()+'-'+monmon+'-'+today.getDate();
        str+=' '+today.getHours()+':'+today.getMinutes()+':'+today.getSeconds();
        document.getElementById('lblNow').innerHTML=str+','+monthLabel+','+todayLabel;
        }

week와 month배열은 html에서 요일을 가져오는 함수를 사용하면 숫자로 나오기 때문에 배열을 사용하여 요일을 가져와주는 방법을 사용하였다.

 

new Date()함수에는

1000분의 1초 단위의 숫자가 들어온다.1000분의 1초단위의 숫자가 들어오는 것을 getMonth(), getDate()등과 같은

함수를 사용하여 내부에서 계산후 숫자가 나오는 것이다.

 

 

날짜계산

    today=new Date();//1000분의 1초 단위의 숫자가 들어옴
    //1000분의 1초단위의 숫자가 들어오는 것을 getMonth, getDate같은 
    //함수를 사용하여 내부에서 계산후 숫자가 나오는 것
    yesterday=new Date(1996,4,21);
    gap=(today-yesterday)/1000/60/60/24;

내가 태어난 날부터 몇일이 지났는지 구하는 식이다.

 

1000분의 1초 단위로 숫자가 들어오기 때문에

1000을 나눠주고

분단위인 60(초)

시간단위인 60(분)

일단위 24(시간)

를 나눠주어야 일수가 나오게 된다 여기서

월단위인 30(일)을 추가로 나눠주면

몇개월인지 나오게 된다.

년단위인 12(개월)을 추가로나눠주면 몇살인지 정확하게 나오게 된다.

 

Tip*

today=new Date(1996,4,21,10,30,0)

와같이 한번에 넣어주는 방법이 있지만 가독성이 떨어지게된다 그래서

today=new Date();
today.setYear(1996);
today.setMonth(4);
today.setDate(21);
today.setHours(10);
today.setMinutes(30);
today.setSeconds(0);

위와같은 기본적인 함수안에 들어있는 함수를

내장함수(Built-in function)라고 한다.

하지만 우리가 선언하고 계산식을 다 직접 만들어서 사용하는 함수를

사용자 정의 함수(User-defined Function)라고 한다 

위와같이 코드를 작성한다면 가독성이 좋아지게 코드작성을 할 수 있다.

 

과제

 

setInterval()을 사용하여 div box 3개에 빨간배경이 번갈아가며 반복되는 코드를 완성하라

<body>
    <div id=dvFirst></div><br>
    <div id=dvSecond></div><br>
    <div id=dvThird></div>
</body>
<script>
let n=0;
    document.getElementById('dvFirst').addEventListener('click',function(){
        setInterval(ColorRotation,1000)});
    
    function ColorRotation(){
        if(n%3==0){
            document.getElementById('dvFirst').style.backgroundColor='red';
            document.getElementById('dvThird').style.backgroundColor='white';
        }
        else if(n%3==1){
            document.getElementById('dvFirst').style.backgroundColor='white';
            document.getElementById('dvSecond').style.backgroundColor='red';
        }
        else if(n%3==2){
            document.getElementById('dvSecond').style.backgroundColor='white';
            document.getElementById('dvThird').style.backgroundColor='red';         
        }
        n++;
    }
</script>

위와같이 코드를 작성하였는데

body에는 div box를 3개 만들어주고

스크립트에서 

첫번째 div box를 클릭시 반복이 시작되게 하였고

 

전역변수로 n을 설정한 뒤 

박스가 3개이므로 주기가 한번 돌았을 때 n에 1을 더해주었고

n을 3으로 나누었을때 나머지를 조건으로 조건문을 돌리는 방법으로 하였다.

tag자체의 속성은 변수로 저장가능하지만 그외의 것은 저장이 불가능하다

예시로

위 과제에서 사용했던

document.getElementById('dvFirst').style.backgroundColor='red';

이코드를

let first=document.getElementById('dvFirst');

first.style.backgroundColor='red';

위코드와 같이 태그를 변수로 선언해줘서 줄여서 사용하는 것은 가능하지만

 

let first=document.getElementById('dvFirst').style.backgroundColor='red';

처럼 한번에 넣으려고 하는것은 불가능하다.

값

 

null - 비어있는

undefined - 정의되지 않은

NaN - 숫자가 아니다(Not a Number)

ex)

let n='Hello World';

if(isNaN(n)) // isNot a Number("Hello World") == True(참) << 숫자가 아니어서 참

 

n=10;

if(isNaN(n)) // isNot a Number(10) == false (거짓) <<숫자가 맞아서 거짓

 

Infinity - 무한대

 

pasreInt() 문자열을 정수로

ex)

x=parseInt('3.14'); // 3 <<정수부분만 출력

 

parseFloat() 문자열을 실수로

 

x=parseFloat('3.14'); // 3.14 <<소수점 아래부분도 모두 출력

------------------------------------------------------------------------

수학 관련된 함수를 사용하기 위해서는 Math를 불러와햐한다.

 

Math.pow(); // N제곱

ex)

n=Math.pow(2,3); //2^3=8

n=Math.pow(5,3); //5^3=125

------------------------------------------------------------------------

Math.sqrt(); //square root 제곱근구하는 함수

ex)

n=Math.sqrt(16); // 4

n=Math.sqrt(121); //11

------------------------------------------------------------------------

Math.abs(); // 절대값 

ex)

n=Math.abs(-15);// 15

------------------------------------------------------------------------

Math.ceil(); // 올림(값보다 큰 정수 중에서 최소수)

ex)

n=Math.ceil(3.95); //4

------------------------------------------------------------------------

Math.floor(); // 내림(값보다 작은 정수중에서 최대수

ex)

n=Math.floor(3.95); //3

------------------------------------------------------------------------

Math.round(); //반올림

ex)

n=Math.round(3.14); //3

n=Math.round(3.54); //4

------------------------------------------------------------------------

Math.random(); //  0~1사이의 랜덤한 숫자값

 

0~100사이의 랜덤한 숫자값구하는 방법

Math.floor(Math.random()*100) //기본 random함수가 0~1사이기 때문에 100을 곱해준 뒤

floor로 내림 해주면 랜덤한 숫자가 나온다

1~100사이의 랜덤한 숫자 구하는 방법

Math.floor(Math.random()*100)+1

위에서는 0~100이었지만 여기선 1부터 시작해야 하기 때문에 +1로 1부터 시작해줄 수 있다.

'국비지원학원 > Javascript' 카테고리의 다른 글

11.16정리  (0) 2021.11.16
11.15정리 (jquery 기초)  (0) 2021.11.16
11.12 정리  (0) 2021.11.16
11.11 정리  (0) 2021.11.12
숫자를 받고 그숫자에 해당하는 구구단을 출력하기  (0) 2021.11.08

위와같은 이미지에 FIRST에 숫자를 받으면 RESULT에 값을 출력하는 문제를 풀어보았다.

<body>
    FIRST&nbsp;<input type="text" id='first' name=first><br>
    RESULT&nbsp;<textarea cols=40 rows=20 id=result name=result onfocus="gugudan()"></textarea><br>

</body>
<script>
function gugudan(){
        x=document.getElementById('first').value;
        y=0;
        let a='';
        for(i=1;i<10;i++){
            y=x*i;
            a+=(x+'x'+i+'='+y+'\n');
            
        }
        document.getElementById('result').value=a;

    }

</script>

코드는 다음과같다

 

function부분만 설명하면

x에 first의 value값(숫자)를 가져와서 x에 저장한다.

그리고 곱셈의 정답을저장할 y를선언하고 전체 과정을 저장할 a를 선언한다.

 

for문의 조건은 기본적인 구구단의 조건인데 1단부터 9단까지 반복하는 반복문이고

y에 first에서가져온 x값과 i값을 곱하여 저장한다.

그리고 그리고 변수a에 곱셈의 모든과정 보이는 부분까지 모두 저장한다.

 

그리고 반복문을 빠져나와서 result의 value값에 곱셈의 모든 과정을 저장하여 넣는다.

 

 

그렇게한다면 위 그림과 같이 숫자 2를 넣었을때 변수a에 저장된 모든 과정이 

result에 들어가서 출력되는 것을 확인할 수 있다.

'국비지원학원 > Javascript' 카테고리의 다른 글

11.16정리  (0) 2021.11.16
11.15정리 (jquery 기초)  (0) 2021.11.16
11.12 정리  (0) 2021.11.16
11.11 정리  (0) 2021.11.12
11.10정리(setInterval, newDate()함수)  (0) 2021.11.10

+ Recent posts

티스토리툴바