1. javascript

0304

자바스크립트

referenceError 예외처리
SyntaxError 구문오류

표현식-> 문장->프로그램

문자열도 배열임
“”.length
0 << 빈배열도 문자열임!

${표현식}을 넣으면 문자열안에서 계산됨.

1>
1==“1”
true

false로 나오고싶으면 ===쓰면됨.
===는 타입까지 확인함.

자료형이 달라도 변환하고 나면 값이 같아지므로 true임
2>
false==“0”
true

false가 0이므로 변환된뒤에 비교

3>
“”==[] 빈문자열은 false, 비어있는 배열도 false임
true

4>
>0==[]
true

*const 상수 : 변경안됨. 선언만하는것 불가능. 값을 꼭 지정해야함
*let 변수 : 변경가능

*증감연산자
변수++ : 기존의 변수값에 1을 더하기 (전위)
let number=10
alert(number++) : 출력값 10 (10출력하고 1더함)

++변수 : (후위)
변수—: (전위)
—변수 :(후위)

*undefined 자료형
상수와 변수로 선언하지 않은 식별자
값이 없는 변수

*prompt(메세지열, 기본입력 문자열) : 사용자로부터 글자를 입력받는 함수

*confirm(yes/no)

*숫자자료형으로 변환하기
number(“273”)
number 쓰지않고 “273” 쓰면 문자열임

숫자가 아닐때 NaN으로 출력함
숫자연산자를 사용하면 자료형 변함

*string (다른 자료형-> 문자로 변경)

*불 자료형으로 변환하기
- 값이 존재하면 대부분 true 임
예외) 0, NaN, ‘…’, “…”, null, undefined -> false로 변환됨

SECTION 3. 조건문

if(불 값이 나오는 표현식){참일때 실행}
if elseif else
else는 위가 다 아니면 실행이므로 조건문 필요없다

*switch 조건문

Switch(자료) {
case 조건 A:

Break

Case 조건 B:

Break : 여기까지만 실행하고 빠져나가세요

default: 위에있는 조건이 아닐때

*조건부 연산자

3항연산자

불표현식 ? 참일때 결과: 거짓일때 결과

ex>

number>= 0? ‘0이상의 숫자입니다.’ : ‘ 0보다 작은 숫자입니다’

이때 참인지 아닌지만 확인하므로 NaN 값을 넣어도 0보다 작은 숫자입니다. 라고 나옴!

오늘 코드수정사항

-입장시 이름입력하여 header에 반영

-주문가능여부확인, 단체주문가격확인 버튼 추가

추가로 수정해야할것

-체크박스

-slider

-전화번호 페이지

<!DOCTYPE html>

<head>

<title>Document</title>

<script

src="https://code.jquery.com/jquery-3.7.1.min.js"

integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="

crossorigin="anonymous"></script>

//첫번쨰 ready이벤트

$(document).ready(function(){

let width=$('[data-role="slider"]').attr('data-width');

let height=$('[data-role="slider"]').attr('data-height');

let count=$('[data-role="slider"] div.item').length;

$('[data-role="slider"]').css({

position: 'relative',

overflow:'hidden',

left: 200,

width:width,

height:height

}).find('.container').css({

position: 'absolute',

width:count*width,

overflow:'hidden'

}).find('.item').css({

width:width,

height:height,

float: 'left'

});

// 변수를 선언합니다.

let currentPage=0;

let changePage =function(){

$('[data-role="slider"]>.container').animate({

left:-currentPage*width},500); //500은 시간

};

//이벤트를 연결합니다.

$('#left-button').click(function(){

if(currentPage>0){

//왼쪽으로 이동 첫장일때는 눌러도 아무일도 일어나지않음. 한장이라도 넘긴 다음부터는 왼쪽으로 갈 수 있음

currentPage= currentPage-1;

changePage();

}

});

$('#right-button').click(function(){

if(currentPage<count-1){

// 오른쪽으로 이동

currentPage= currentPage+1;

changePage();

}

});

</script>

//환영메세지.

const username=prompt('이름을 입력해주세요', '이름') //prompt함수는 사용자로부터 내용을 입력받아서 사용

// 출력합니다

alert(username+'님 환영합니다!');

$(document).ready(function(){

$('#header').html('❤️ '+username+' 님의 도시락'+'❤️');

})

</script>

//전화번호 넘어가기 왜 안되는지 모르겠음. 차차수정

window.onload = function () {

// 문서 객체를 선택합니다. body에 input을 찾아서 배열만들어짐.

let input_1 = document.getElementsByClassName('phone')[0];

let input_2 = document.getElementsByClassName('phone')[1];

let input_3 = document.getElementsByClassName('phone')[2];

// input_1 onkey 키보드를 누르는 순간

input_1.onkeydown = function () {

if (3 <= input_1.value.length) {

input_2.focus();

}

};

// input_2

input_2.onkeydown = function (event) {

let evt = event || window.event;

// 사용자의 입력이 '백스페이스'이고 입력된 글자가 없을 때

if (evt.keyCode == 8 && input_2.value.length == 0) {

input_1.focus();

} else if (4 <= input_2.value.length) {

input_3.focus();

}

};

// input_3

input_3.onkeydown = function (event) {

// 이벤트 객체를 추출합니다.

let evt1 = event || window.event;

// 사용자의 입력이 '백스페이스'이고 입력된 글자가 없을 때

if (evt1.keyCode == 8 && input_3.value.length == 0) {

input_2.focus();

} else if (4 <= input_3.value.length) {

input_2.focus();

}

};

</script>

$(document).ready(function() {

$('#checkButton').on('click', function() {

checkOrder();

});

function checkOrder(){

const input=Number(prompt('주문량을 입력하세요(짝수로만 주문 가능).','주문량'))

alert(input)

switch(input%2){ //나머지 연산자를 사용하여 홀수와 짝수를 구분

case 0:

const inputConfirm=confirm('주문가능합니다. 주문하시겠습니까?')

if (inputConfirm) {alert('주문 확인되었습니다.')}

else{alert('주문이 취소되었습니다.')}

break

case 1:

alert('주문불가합니다.')

break

default: //위에있는 조건이 아닐때

alert('숫자가 아닙니다. 다시 입력해주세요')

break

}}

</script>

$(document).ready(function(){

$('#priceButton').on('click',function(){

checkPrice();

});

function checkPrice(){

const rawInput=prompt('단체주문할인! 2500원! 주문 수량을 입력해주세요')

const groupOrder= Number(rawInput)

const groupPrice= groupOrder*2500

//출력합니다.

alert(`단체도시락 ${groupOrder}개는 ${groupPrice}원 입니다.`) };

</script>

<style>

/* 슬라이더*/

div.item:nth-child(1){background-color: lightyellow;border-radius: 5px;}

div.item:nth-child(2){background-color: pink;border-radius: 5px;}

div.item:nth-child(3){background-color: lightskyblue;border-radius: 5px;}

/*전체가운데정렬*/

body {width: 960px;

margin: 10px auto}

/*각 id 배경설정*/

#ad {height: 500px; width:200px; background-color:#ff9999; border-radius: 10px; position:fixed; top:10px; right:10px; }

#header {height: 70px; background: lightpink; border-radius: 20px 20px; margin: 10px;padding:20px;font-size: 50px; font-weight: bold;}

#nav {height: 50px; width:360px;border-radius: 20px 20px;margin: 10px auto; padding:20px; overflow: hidden; position:relative;}

#article1 {width:300px; float:left; left: 140px; margin: 10px auto; padding:10px; background: lightseagreen; border-radius: 20px 20px; position:relative;}

#article2 {width:300px; float:right; right: 150px; margin: 10px auto; padding:10px; height:200px; background: lightyellow; border-radius: 20px 20px; position:relative;}

#article3 {width:300px; float:right; right: 140px;margin: 10px auto; padding:20px; height:210px; background: lightsalmon;border-radius: 20px 20px; position:relative;}

#article4 {clear: both; width:500px; left: 130px; margin: 10px auto; padding:20px; height:580px; background: lightcoral;border-radius: 20px 20px;}

#footer {background: lightgrey;border-radius: 20px 20px;margin:10px; padding:20px; }

/*각 id 정렬*/

* {text-align: center;}

/* nav */

div.item{display:flex; width: 50px; margin: 0 auto; padding: 10px; }

#menu1{left: 30px; top:10px; position:absolute; }

#menu2{left: 130px; top:10px; position:absolute;}

#menu3{left: 230px; top:10px; position:absolute;}

#menu4{left: 330px; top:10px; position:absolute;}

/* div에서도 자손 순서대로하면 색상 다르게 할 수 있을것같음 확인!! id가 다 다르게 설정되어있음 ! */

#nav {background-color: rgba(135, 206, 250,0.5)}

#nav:hover{background-color: rgb(135, 206, 250) ;}

div.clear{clear: both;}

.menu {width: 100px; height: 100px;

background-color: red;

margin: 10px; padding: 10px; float: right}

/*표 위치 고정용*/

#menuboard{position:absolute;left: 20px;}

#price{position:absolute; left: 80px;}

#select{position:absolute; left:750px;}

#address{position: absolute; left: 720px;}

</style>

//팝업

let start= new Date().getTime();

let count= 0;

while (start+100>new Date().getTime()){count++;}

if(count%2==0){

alert('@@@@@행문의 이벤트@@@@@'+ '\n'+ '\n'+ '\n'+ '축하합니다!'+'\n'+'\n'+'\n'+'\n'+count+'원 당첨');}

else{alert('@@@@@행문의 이벤트@@@@@'+ '\n'+'\n'+'\n'+'\n'+count+'번째 꽝');}

//현재시각 표시하기

window.onload=function(){let clock=document.getElementById('clock');setInterval(function(){let now=new Date();clock.innerHTML=now.toString();},1000);

// 제출버튼 만들기

let button=document.getElementById('send'); button.onclick=function(){alert('제출되었습니다.');};

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

<b>아침</b>: 빵

<br>

</div>

</div>

</div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<tr>

</tr>

<tr>

<th colspan="5"> 3500

</th>

</tr>

<tr>

<th rowspan="2"> 5000

</th>

</tr>

<tr>

</tr>

</table></div>

</div>

<div>

<br>

<br>

</p>

<tr>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</div>

<table>

<tr>

<td>

</optgroup>

</optgroup>

</select>

</td>

</select></td>

</select></td>

<td>

<form>

</form>

</td>

</tr>

</table>

<form>

<textarea>요청사항을 입력해주세요.</textarea>

</form>

<button id="checkButton">주문가능여부 확인</button>

</div>

<p><b> 오시는길</b><address>서울시 금천구 가산디지털1로 70</address></p>

</div>

</body>

</html>

'Javascript' 카테고리의 다른 글

6. javascript 6 (예외처리, Class) (0)	2024.03.11
5. javascript 5 (0)	2024.03.08
4. javascript4 (0)	2024.03.07
3. javascript3 (0)	2024.03.06
2. javascript2 (0)	2024.03.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

khjxit

1. javascript

'Javascript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

1. javascript

'Javascript' 카테고리의 다른 글

'Javascript' Related Articles

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역