자바스크립트 (2)

728x90

반복문 [for 문]

for(i=1; i<=5; i++){

document.write("<br>자동차=" + i);

}

i =1 부터 5와 같거나 작을 때까지 1씩 증가하며 출력한다.

5보다 크면 중지;

for(i=1; i<=100;i++){

sum+= i;

if((i%2==0)){

even+= i;}

}

1~100까지 짝수 합 구하기

for (i = 1; i <= 9; i++) {

str += "<br>5 * " + i + " = " + 5 * i;

}

1~9까지 5를 곱한 수 구하기

if- else 문

for (i = 1; i <= 100; i++) {

sum += i;

if ((i % 2 == 0)) {

even += i;

}else

odd += i;

}

짝수는 even으로 출력 홀수는 odd로 출력

while 문

while (k < 5){

k++;

console.log("출력 " + k);

}

k가 5보다 작을 동안 +1씩 하며 '출력+k '를 출력해라

메소드 와 객체의 차이

객체(Object) : 속성(attribute)과 메서드(함수=실행)를 가지고 있다.

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

상태,성질 실행, 행위, 처리

속성 : box.width= 300px;

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

개체 속성 값

개체 = tag는 무조건 개체

메서드 : box.innerHTML = "abc"

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

개체 메소드 값

innerHTML을 실행 시키라는 것 즉, 메서드

변수 선언 방법

var , ani :어떤 값이 넣을 수 있다.

let : 한 가지 데이터 타입만 넣을 수 있다.

const : 데이터 값을 변경 할 수 있다

var a=10;

a=20;

a="홍길동"

let b =10; (0)

b = "홍길동" (x) 기존에 숫자가 들어가 있는 상태에서 문자가 들어갔기에 error

const c=10;

c= 20; 상수 데이터 값을 변경했으니 error

관계 연산자

< > : 이상 미만

<=. >= : 이상 이하

산술 연산자

+ , - , * , / , %(나머지)

구구단 실행하기

html

<body>

<div>

몇 단 : <input type="text" value="확인" class="dan">

</div>

</body>

window.onload = function () {

let box, str="", i, sum = 0, even = 0;

var dan, ok;

//누적 연산은 무조건 초기화 해야함 (숫자=0 , 문자=" ")

box = document.querySelector(".box");

ok = document.getElementById("ok");

dan = document.querySelector(".dan");

ok.addEventListener("click", function () {

var su;

su = Number(dan.value);

for (i = 1; i < 10; i++) {

str += "<br>" + su + " * " + i + " = " + su * i

}

box.innerHTML = str;

})

함수 = 독립된 코드

ok.addEventListener("click", result);

ok.addEventListener("click", function(){});

1. click 시 result 를 찾아가라

2. click 시 function (함수)를 실행하라

let box, str = "", i, sum = 0, even = 0;

function result() {

box = document.querySelector(".box");

dan = document.querySelector(".dan");

var su;

su = Number(dan.value);

for (i = 1; i < 10; i++) {

str += "<br>" + su + " * " + i + " = " + su*i;

}

box.innerHTML = str;

}

window.onload = function () {

//누적 연산은 무조건 초기화 해야함 (숫자=0 , 문자=" ")

ok = document.getElementById("ok");

ok.addEventListener("click", result);

// ok.addEventListener("click", function(){});

}

1. box와 dan 클래스 지정하기

2. su 변수 선언 후 숫자형태로 바꿔주기

3. for 문을 통해 연산하기

4. innerHTML로 HTML 에 선언하기

5. ok 아이디 지정하기

6. ok를 통한 event 설정하기

7. 버튼 click 시 함수가 실행되게 result 로 연결하기

끝

배열

같은 타입의 데이터를 순서대로 기억하는 기억장소

//배열

imgs = document.querySelector(".imgs").getElementsByTagName("li");

for (i = 0; i < 4; i++) {

imgs[i].innerHTML = i;

}

img[i] < [] 안에 배열 표시

프로그램 작성 도와주는 프로그램 API

API의 형태에 따라 라이브러리, 프레임워크

프레임워크 : 형태에서 작업 (형태 변환 안됨)

라이브러리 : 명령어의 조합으로 새로운 프로그램을 작성(형태가 없다)

jQuery : 자바스크립트의 라이브러리

!!! 반드시 js스크립트보다 위에 있어야 함

jQuery

$(".nextB").on("click", function(){

if(count < 5)

count++;

$("disp").text( count + " / 5");

})

}

jQuery 선언할 때는 $ (달러)표시로 시작한다.

$(".disp").text( count + " / 5");

$("#pic").attr("src", "img/img"+ count + ".jpg");

1. 글씨 바꾸기

2. 그림 바꾸기

$(".nextB").on("click", function(){

if(count < 5)

count++;

$(".disp").text( count + " / 5");

$("#pic").attr("src", "img/img"+ count + ".jpg");

})

$(".prevB").on("click",function(){

if(count>0)

count--;

$(".disp").text( count + " / 5");

$("#pic").attr("src", " img/img" + count + ".jpg");

})

.text 글씨

.attr 그림

const data=["팥빙수","바닐라","아이스커피","네가지 그림","주스"]

const data를 이용하여 데이터를 저장

--------

값을 변경할 수 없다

$(".nextB").on("click", function () {

if (count < 5)

count++;

$(".disp").text(count + " / 5");

$("#pic").attr("src", "img/img" + count + ".jpg");

$("#text1").text("상품 : " + data[count - 1]);

$("#text2").text("가격 : " + data1[count - 1]);

$("#text3").text("영양 : " + data2[count - 1]);

})

$(".prevB").on("click", function () {

if (count > 1)

count--;

$(".disp").text(count + " / 5");

$("#pic").attr("src", " img/img" + count + ".jpg");

$("#text1").text("상품 : " + data[count - 1]);

$("#text2").text("가격 : " + data1[count - 1]);

$("#text3").text("영양 : " + data2[count - 1]);

})

선언 후

$("#text1").text("상품 : " + data[count - 1]);

$ 와 data [ count -1 ] 을 이용해 선언해준다

why? count -1?
컴퓨터는 0부터 시작함으로 count -1 을 해준다

HTML

<!DOCTYPE html>

<head>

<title>자바스크립트</title>

</head>

<body>

<!--

<br>

-->

</ul>

</ul>

</div>

</div>

더 이상 없어요

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

CSS

* {

margin: 0; padding: 0;

box-sizing: border-box;

list-style: none;

}

.title {

width: 80%; height: 100px;

background: #f2f2f2;

text-align: center; line-height: 100px;

font-size: 3rem;

margin: 0 auto;

}

#result {

width: 200px; height: 50px;

text-align: center; line-height: 50px;

border: 1px solid black;

}

.menu {

width: 80%; height: 50px;

margin: 0 auto;

display: flex;

}

.menu li {

flex: 1; cursor: pointer;

text-align: center; line-height: 50px;

}

.wrap {

width: 1500px;

margin-left: 10%; margin-top: 50px;

border: 1px solid black;

display: flex

}

.wrap> div {

border: 1px solid red;

}

.big {

width: 400px; height: 500px;

}

.textBox {

width: 1100px;

padding: 50px;

}

.textBox> p {

width: 700px;

border-bottom: 1px dashed #ccc;

line-height: 50px;

}

.big img { width: 100%; height: 100%; }

.big .btn {

width: 100%;

display: flex;

justify-content: space-around;

}

.big .btn li {

width: 100px; height: 30px;

background: #f2f2f2;

text-align: center;

line-height: 30px;

cursor: pointer;

}

.big .btn .disp {

font-size: 2rem;

}

.back {

position: fixed; top: 0; left: 0;

width: 100%; height: 100%;

background: #46444473;

display: none;

}

.back .popup {

position: absolute; top: 50%; left: 50%;

transform: translate(-5%, -50%);

width: 400px; height: 300px;

border: 1px solid black;

border-radius: 20px;

background: black; color: white;

font-size: 2rem; line-height: 200px;

text-align: center;

}

.back .popup p {

width: 100px; height: 50px;

background: white;

border-radius: 10px; color: black;

line-height: 50px;

margin: -20px auto;

}

.imgs {

width: 80%; height: 250px;

border: 0px solid black;

margin: 100px auto;

display: flex;

justify-content: space-between;

}

.imgs li {

width: 14%; height: 100%;

border: 0px solid black;

cursor: pointer;

}

.imgs li div {

height: 200px;

border: 0px solid red;

}

.imgs li p {

height: 50px; line-height: 50px;

border: 0px solid blue;

}

let count = 1;

const data = ["딸기주스", "바닐라", "아이스커피", "네 가지 그림", "주스"]

const data1 = ["6000원", "5000원", "4000원", "3000원", "2000원"]

const data2 = ["600kal", "510kal", "500kal", "1500kal", "700kal"]

window.onload = function () {

let k=0;

while (k < 5){

k++;

console.log("출력 " + k);

}

// console.log(data[0]);

$(".nextB").on("click", function () {

if (count < 5)

count++;

$(".disp").text(count + " / 5");

$("#pic").attr("src", "img/img" + count + ".jpg");

$("#text1").text("상품 : " + data[count - 1]);

$("#text2").text("가격 : " + data1[count - 1]);

$("#text3").text("영양 : " + data2[count - 1]);

})

$(".prevB").on("click", function () {

if (count > 1)

count--;

$(".disp").text(count + " / 5");

$("#pic").attr("src", " img/img" + count + ".jpg");

$("#text1").text("상품 : " + data[count - 1]);

$("#text2").text("가격 : " + data1[count - 1]);

$("#text3").text("영양 : " + data2[count - 1]);

})

}

728x90

'중앙정보처리학원 > FRONTEND' 카테고리의 다른 글

자바스크립트 (3) (0)	2023.09.26
프론트앤드 마지막 TEST (0)	2023.09.26
자바스크립트 (1) (0)	2023.09.22
HTML5 & CSS (4) (0)	2023.09.21
HTML5&CSS (3) (0)	2023.09.20

hotchi

자바스크립트 (2)

반복문 [for 문]

if- else 문

while 문

메소드 와 객체의 차이

변수 선언 방법

관계 연산자

산술 연산자

구구단 실행하기

배열

jQuery

'중앙정보처리학원 > FRONTEND' 카테고리의 다른 글

티스토리툴바

자바스크립트 (2)

반복문 [for 문]

if- else 문

while 문

메소드 와 객체의 차이

변수 선언 방법

관계 연산자

산술 연산자

구구단 실행하기

배열

jQuery

'중앙정보처리학원 > FRONTEND' 카테고리의 다른 글

관련글

티스토리툴바