728x90
자바스크립트 : 웹브라우저의 이벤트를 제어한다. 이벤트 제어 프로그램 HTML과 함께 사용한다.
HTML : 데이터 표시
CSS : 데이터를 디자인
자바스크립트 : 이벤트 제어
태그 = element 요소 =노드
console(콘솔) = 결과 내용을 개발자에게 보여주는 화면
함수 = function : 실행 명령어들을 모아 놓은 단위
(괄호)를 갖고 있다.
alert("연결") // 알림창
alert("연결"); 알림창(데이터를 표시해 주는 함수이다.
<script src="js/index.js">
console.log("콘솔로 출력")
</script>
html에 js 연결 ▲
window.onload=function() { // 윈도우가 실행 되자마자 (onload) 함수를 실행 시켜라
}
onload 실행함수
DATA 종류 (Type) / 정보
1. 원시 데이터 : 더 이상 분해 할 수 없는 데이터
Number: 숫자
String : 문자
Boolean : 명제(논리 참 일때 true , 거짓일 때 false )
Undefine : 값이 지정되지 않은 상태
Null : 값을 모르는 상태
2. 오브젝트(Object) 데이터 type : 원시 데이터의 모임
Array(배열)
Object (개체)
Class(클래스)
변수 : 데이터 값을 기억하는 임시 기억장소
abc =10;
kbs= 200;
변수 만드는 방법
1. 영어로 시작 ($, _(언더바)로 시작 가능)
ab=10; $ab=10; _ab=10;
2. 변수에 공백, 특수문자 사용 불가능
a-b 10; a b =30; x
3. 예약어(명령어) 사용 불가
if=20; for= 30;
4. 변수 이름 만들기 : 의미있는 단어를 사용해야 함
price= 5000; point = 100;
카멜 표기법 : 두개의 단어로 이루어진 변수는 두번째 단어 맨 앞 첫 글자를 대문자로 지정함 (단어의 구분을 위해)
carPoint = 10;
파스칼 표기법 : 각 단어 첫 글자를 대문자로 사용
CarPoint = 10;
언더바 표기법 : 단어 사이에 언더바를 사용
car_point = 10;
기본 문법
1. 한 문장이 끝나면 ;(세미콜론)을 붙여야 한다
2. 대소문자를 구분 (소문자가 기본)
3.주석 (설명문)
한줄 주석 : //
여러 줄 주석 : /* 와 */ 사이에 있는 명령어들은 모두 설명문(주석)
자바스크립트 실행 > HTML 실행 > CSS 순으로 실행
변수 선언문
var : 임시(any 타입)
let : 같은 타입의 데이터만 저장
window.onload=function() { // 윈도우가 실행 되자마자 (onload) 함수를 실행 시켜라
var kor, eng, mat, sum, avg;
kor= 50;
eng = 60;
mat= 70;
sum = kor+ eng + mat;
avg = sum/3;
document.write("국어 : " + kor );
document.write("<br>영어 : " + eng );
document.write("<br>수학 : " + mat );
}
class : .(점)표시, 중복 가능
id : #(샵) 표시, 중복 불가능 (자바스크립트에서 사용 가능)
자바스크립트 기능 (역할)
1. 계산
2. 제어
JS
window.onload=function(
처음 기본으로 들어가야하는 함수▲
avg = a.value;
js 입력된 값을 저장 ▲
s.innerHTML = sum;
계산된 sum 값을 s 에 넣어라▲
mat = Number( m.value);
input 형식의 문자 > 숫자로 형변환▲
display: none;
jumun.onclick=function() {
ok2.style.display="block";
}
css 에서 display: none 설정 후 ▲▲
js에서 클릭시 팝업되게 설정 ▲
closeBtn.onclick=function() {
ok2.style.display="none"
}
display ="none"을 함으로서 닫기를 누르면 창이 없어짐▲
var price, ea;
ea = Number(su.value)
price= ea * 500;
con.innerHTML = "주문 수량 :" + ea + "이고<br>"
+ "총 가격은 " + price + "만원 입니다. "
price ,ea에 값을 설정하고 창에 띄우기▲
증가 감소 연산자
count = count +1 //누적연산 : (가장 왼쪽 변수)가 오른쪽에 똑같은 변수가 대입된다.
count+=1; //축약식 위에 것을 함축해놓은 것
count++; //증가연산자
count--; //감연산자
<div class="big" id="big">
<img src="img/cat.jpeg" alt="" id="pic">
</div>
HTML▲
addBtn.onclick=function(){
count++;
no.innerHTML = count;
pic.src="img/cat" + count + ".jpeg"
}
subBtn.onclick=function(){
count--;
no.innerHTML = count;
}
Js▲
add_Btn=document.getElementById("add_btn");
읽어오게하기 (Js)▲
sub_btn=document.getElementById("sub_btn");
// no=document.getElementById("no");
no=document.querySelector("#no");
querySelector > class, id 둘다 가능 ▲
getElementByid > id를 불러오는 전용 명령어 ( #을 사용할 시, error 발생)▲
비교문
if(count < 7){
count++;
pic.src = "img/cat" + count + ".jpeg";
no.innerHTML = count + " / 7";
}
if 문 ▲
if(){} :만약 () 가 만족한다면 {} 을 실행한다
calc.addEventListener("click", function() })
버튼을 "click" 했을 때이벤트를 등록하고 함수를 실행한다 (onclick 이랑 동일)
if - else 문
if(price >=10000){
mile= document.getElementById("mile");
m= price / 10;
mile.innerHTML= m +"원"
}else {
mile.innerHTML= 0+ "원"
}
10000원이상 일 때 가격의 10%만큼 계산하여 노출한다
10000이 되지 않을때는 0원으로 출력한다
실습 자료
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event로 아이디 읽기</title>
<link rel="stylesheet" href="css/event_Byid.css">
<script src="js/event_Byid.js"></script>
</head>
<body>
<div class="big">
<img src="img/cat.jpeg" alt="" id="pic">
</div>
<ul class="btn">
<li id="sub_btn">◀</li>
<li id="add_btn">▶</li>
</ul>
<p id="no">
1 / 7
</p>
<ul class="shop">
<li>
<div>수량</div>
<div>
<input type="text" class="su">
</div>
</li>
<li>
<div>가격 : </div>
<div>5,000원</div>
</li>
<li>
<div>금액</div>
<div id="kum">0원</div>
</li>
<li> ※계산 금액이 10,000 이상이면 총금액의 10%가 적립됩니다.※</li>
<li>
<div>마일리지</div>
<div class="mile">0</div>
</li>
<li>
<div><button class="calc">계산하기</button></div>
<div><button class="canc">취소하기</button></div>
</li>
</ul>
</body>
</html>
CSS
*{
margin: 0; padding: 0;
list-style: none;
font-family: "y";
text-decoration: none;
}
@font-face{
font-family: "y";
src: url(../fonts/BMYEONSUNG_ttf.ttf);
}
.big {
width: 80%; height: 500px;
border: 1px solid black;
margin: 20px auto;
}
.big img {
width: 100%; height: 100%;
}
.btn {
position: absolute;
top: 250px; left: 5%;
width: 90%; height: 50px;
border: 0px solid black;
display: flex;
justify-content: space-between;
}
.btn li {
width: 50px; height: 100%;
text-align: center;
line-height: 50px;
font-size: 2rem;
}
#no {
width: 100px; height: 50px;
margin: 0 auto;
border: 0px solid rebeccapurple;
text-align: center;
line-height: 50px;
font-size: 2rem;
}
.shop {
width: 80%;
margin: 30px auto;
border: 1px solid black;
}
.shop li {
width: 100%;
display: flex;
justify-content: left;
}
.shop li div {
height: 50px;
text-align: center; line-height: 50px;
border: 0px solid black;
}
.shop li div:nth-child(1) {
width: 20%;
}
.shop li div:nth-child(2) {
width: 50%;
text-align: left;
}
JS
window.onload = function () {
var count, sub_btn, add_Btn, no, count = 1, pic
sub_btn = document.getElementById("sub_btn");
add_Btn = document.getElementById("add_btn");
pic = document.querySelector("#pic");
// pic=document.getElementById("pic");
// no=document.getElementById("no");
no = document.querySelector("#no");
add_Btn.onclick = function () {
if(count < 7){
count++;
pic.src = "img/cat" + count + ".jpeg";
no.innerHTML = count + " / 7";
}
}
sub_btn.onclick = function () {
if(count>1){
count--;
pic.src = "img/cat" + count + ".jpeg";
no.innerHTML = count + " / 7";
}
}
var calc, su, price, kum, mile, m; //객체를 선언
calc=document.querySelector(".calc"); //class,id를 선언
su=document.querySelector(".su");
kum=document.getElementById("kum");
canc=document.querySelector(".canc");
calc.addEventListener("click", function(){
price = Number(su.value) * 5000;
kum.innerHTML=price + "원";
if(price >=10000){
mile= document.querySelector(".mile");
m= price / 10;
mile.innerHTML= m +"Point";
}else {
mile.innerHTML= 0+ "Point";
}
})
canc.addEventListener("click", function(){ //초기화 작업
su.value= " ";
price=0;
m=0;
kum.innerHTML= 0+ "원";
mile.innerHTML= 0+ "Point";
})
}
결과
728x90
'중앙정보처리학원 > FRONTEND' 카테고리의 다른 글
| 프론트앤드 마지막 TEST (0) | 2023.09.26 |
|---|---|
| 자바스크립트 (2) (0) | 2023.09.25 |
| HTML5 & CSS (4) (0) | 2023.09.21 |
| HTML5&CSS (3) (0) | 2023.09.20 |
| HTML5&CSS (2) (0) | 2023.09.19 |
