VisualStudioCode_Day

4.VisualStudioCode/2).VisualStudioCode_개념 및 실습

VisualStudioCode_Day_10

구이제이 2024. 3. 2. 11:45

-게시판-

크루드기능 crud(create read update delete

mvc

#Accordion 메뉴

#multiple : 다중으로 선택하게 합니다.

windows

-document : 문서

- h1,div,form,table 객체들

form : input, button

-location : 위치

-navigation :

-historty

-screen

◐exam1.html◐

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.multi{

width: 200px;

height: 200px;

font-size: 2rem;

text-align: center;

}

.selectClass{

width: 200px;

height: 50px;

line-height: 50px;

font-size: 2rem;

text-align: center;

}

.multiSect{

height: 200px;

}

</style>

//function(){} ---> () => {}

// window.onload = function(){}

// DOMContentLoaded : html문서를 브라우저가 다 읽고 나면, 이벤트

// 웹 브라우저가 문서 객체를 모두 읽고 나서 실행

document.addEventListener('DOMContentLoaded', function(){ //이벤트핸들러, 이벤트리스너, 콜백함수

const select = document.querySelector('select');

// let select = document.querySelector('select'); //태그, .클래스명, #id명, [속성=값]

// var select = document.querySelector('select');

const msgH1 = document.querySelector('.msg');

const multTextH1 = document.querySelector('.multText');

// select.style.width = '200px';

// select.style.height ='50px';

// select.style.lineHeight ='50px';

// ...

// setAttribute(속성, 값);

// 클래스 클래스명

select.setAttribute('class','selectClass');

// 이벤트 제거 : 문서 객체.removeEventListener(이벤트, 이벤트리스너);

// 이벤트 처리 : 문서 객체.addEventListener(이벤트, 이벤트 리스너);

select.addEventListener('change', function(event){

// event.currentTarget : 현재 작업 상태에 있는 요소(이벤트를 발생시킨 요소)

let opt= event.currentTarget.options; //내부의 옵션 태그 전체

let index = opt.selectedIndex; //옵션들 중에서 선택된 것의 인덱스

// index = event.currentTarget.options.selectedIndex;

//문서객체.textContent = 내용; 태그안에 내용을 쓰기

//문서객체.innerHTML = 내용; 태그안에 내용을 쓰기

//문서객체.textContent : 태그 안의 글자 읽어오기

//문서객체.innerHTML : 태그 안의 글자 읽어오기

//opt[index] : 인덱스에 해당하는 옵션 태그

msgH1.textContent = '선택한 과일 : ' + opt[index].textContent ;

// 백틱(`) `선택한 과일 : ${계산식 또는 변수..} `

//msgH1.textContent = `선택한 과일 : ${opt[index].textContent }`;

});

//===================================================

let selectMulti = document.querySelector('.multiSect');

let multiSelectH1 = document.querySelector('.multText');

// selectMulti.style.width='200px';

selectMulti.addEventListener('change', function(event){

let optMul = event.currentTarget.options;

let list = []; //배열, 선택한 과일 이름을 담을 배열

for(let element of optMul ){

if(element.selected){ // 선택된 요소가 있으면

// selected : 선택, 항목의 선택

list.push(element.textContent); //배열에 요소 넣기

}

} // 연결할 때 join 안쪽의 문자를 이용해 연결

multiSelectH1.textContent = '선택한 과일들 : ' + list.join(', ');

});

</script>

</head>

<body>

</select>

</select>

</body>

</html>

◐exam2.html◐

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.clickTest{

user-select:none; /* 마우스로 드래 안됨

글자를 여러번 클릭해도 선택이 안됨 */

}

</style>

document.addEventListener('DOMContentLoaded', function(){

let counter=0;

let isConnect = false;

const h1 = document.querySelector('.clickTest'); //클래스

const conBut = document.querySelector('#connect'); //아이디

const disConBut = document.querySelector('#disconnect'); //아이디

const p = document.querySelector('p'); //태그

const listner = function(event){ //익명적함수를 여러번 사용하고 싶어서 변수에 담았습니다.

h1.textContent = '클릭 횟수 : ' + (++counter);

}

//click 이벤트 발생

conBut.addEventListener('click',function(){

if(isConnect === false){ //isconnert false라면,

h1.addEventListener('click', listner); // 더해줘라

p.textContent = '이벤트 연결 상태 : 연결';

isConnect = true;

}

});

disConBut.addEventListener('click',function(){ //이벤트제거 버튼 눌려졌을때.

if(isConnect === true){ //isconnert 상태가 true라면.

h1.removeEventListener('click', listner); //제거해줘라 //제거할 때 이벤트 리스너는 설정할 때 사용한 이벤트

//리스너를 넣어 준다.

p.textContent = '이벤트 연결 상태 : 해제';

isConnect = false;

}

});

</script>

</head>

<body>

</body>

</html>

◐exam5.html◐

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

document.addEventListener('DOMContentLoaded', () => { // fuction() { 이거랑 () => { 이것은 결과가 같다. (화살표 함수)

const beforeInput = document.querySelector('#before')

const afterInput = document.querySelector('#after')

const select = document.querySelector('select')

//함수를 이용해서 공통 부분 추출

const handler = () => {

const currentValue = Number(beforeInput.value) //현재값

const transConst = select.options[select.options.selectedIndex] //선택된 단위

afterInput.value = (currentValue * Number(transConst.value)).toFixed(2) //.toFixed(2) : 소수점 둘쨰자리까지 반올림출력

}

beforeInput.addEventListener('keyup', handler) //keyup 발생했을때, handler처리해라

select.addEventListener('change', handler) //change 발생했을때, handler처리해라

});

</script>

<style>

input{

height: 20px;

width: 100px;

line-height: 20px;

text-align: center;

}

select{

height: 25px;

line-height: 25px;

text-align: center;

width: 100px;

}

span{

font-size: 13pt;

}

</style>

</head>

<body>

</select>

</body>

</html>

◐exam6.html◐ - textarea(메모장, 약관 만들때 사용) / 개념정리

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.inputText{ /*메모장, 약관 같은 거 만들때...*/

width: 300px;

height: 50px;

resize: vertical; /* none - 크기조절 불가, horizontal - 수평방향으로만 조절

vertical - 수직방향으로 크기조절, both -기본값, 양방향 크기 조절 가능*/

}

</style>

//window.onlad = function(){} 이전버전

document.addEventListener('DOMContentLoaded',function(){ //신버전

const h3 = document.querySelector('.outText');

const textarea = document.querySelector('.inputTest');

//방법1)

let listner = function(event){ // (event) => {

const textLength = event.currentTarget.value.length;

h3.textContent = '입력한 글자 수 : ' + textLength;

//백틱이용 `입력한 글자 수 : ${textLength}`

}

textarea.addEventListener('keyup', listner);

// //방법2)

// textarea.addEventListener('keyup', (event)=> {

// const textLength = event.currentTarget.value.length;

// h3.textContent = '입력한 글자 수 : ' + textLength;

// });

키보드로 부터 입력 받을 때 이벤트

keyup : 키보드에서 키가 떨어질 때 실행

keydown : 키가 눌릴 때 실행, 키보드를 꾹 누르고 있을 때도,

입력될 때도 실행, 아시아권의 문자를 제대로 처리하지 못함

keypress : 키가 입력되었을 때 실행, 아시아권의 문자를 제대로 처리하지 못함

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

checkbox, radio 버튼의 이벤트 : change

input, textarea 태그에 입력된 글자 수 : 문서객체.value.length

입력된 글자 : 문서객체.value

기본적으로 제공하는 이벤트 막기 : 문서객체.preventDefault();

요소(태그) 만들기 : 부모객체.createElement()

요소 추가 : 부모객체.appendchild(자식으로 추가할 요소);

appendChild()는 부모를 하나만 가질 수 있음

});

</script>

</head>

<body>

<!--

-->

</body>

</html>

◐exam7.html◐

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap, .timerCheck, .timerOutput{

margin: 0;

padding: 0

}

.wrap{

width: 200px;

height: 100px;

box-sizing: border-box;

border: 1px solid black;

position: relative;

}

.timerCheck{

position: absolute;

left: 20px;

top: 10px;

}

.timerOutput{

position: absolute;

left: 50px;

bottom: 10px;

}

</style>

document.addEventListener('DOMContentLoaded',function(){

let [timer, timerId]=[0,0]; // let timer=0, timerId=0;

let checkbox = document.querySelector('.checkbox');

let h2 = document.querySelector(".timerOutput");

//타이머

// setTimeout(처리할내용, 시간) : 시간이 되면 단 한번만 실행

// setInterval(처리할내용, 시간) : 시간이 되면 반복해서 실행

// 멈추기 위해서는 timerId 필요

// clearInterval(timerId) : 반복작업 멈춤

checkbox.addEventListener('change',function(event){

if(event.currentTarget.checked){ //체크 상태

timerId = setInterval(function(){

timer += 1

h2.textContent = timer + '초'; // `${timer}초`

}, 1000);

}else{ //체크가 해제된 상태이면 시간 이벤트 종료

clearInterval(timerId);

}

});

</script>

</head>

<body>

</div>

</div>

</body>

</html>

◐exam3.html◐ accordion

<!DOCTYPE html>

<html>

<head>

<style>

.accordion {

background-color: #eee;

color: #444;

cursor: pointer;

padding: 18px;

width: 100%;

border: none;

text-align: left;

outline: none;

font-size: 15px;

transition: 0.4s;

}

.active, .accordion:hover {

background-color: #ccc;

}

.accordion:after {

content: "\2630";

color: #777;

font-weight: bold;

float: right;

margin-left: 5px;

}

.active:after {

content: "\2715";

}

.panel {

padding: 0 18px;

background-color: white;

max-height: 0;

overflow: hidden;

transition: max-height 0.2s ease-out;

}

</style>

document.addEventListener('DOMContentLoaded', function(){

const acc = document.querySelectorAll(".accordion");

let i;

let panel = "";

for (i = 0; i < acc.length; i++) {

acc[i].addEventListener("click", function() {

this.classList.toggle("active");

panel = this.nextElementSibling;

if (panel.style.maxHeight) {

panel.style.maxHeight = null;

} else {

panel.style.maxHeight = panel.scrollHeight + "px";

}

});

}

});

</script>

</head>

<body>

<h2>Accordion with symbols</h2>

<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>

<button class="accordion">Section 1</button>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

<button class="accordion">Section 2</button>

</div>

<button class="accordion">Section 3</button>

</div>

</body>

</html>

◐jquery폴더생성

J쿼리(스크립트가 유행을 안타서, j쿼리 간략하게 갑니다.)

1. 다운받아서

2. 연결해서

0.w3school;

1.J쿼리 다운로드

CDN : 각각의 지역컴퓨터에 분산컴퓨터

가까운지역은 그 컴퓨터로 들어와라.(네트워크에서 가까운 쪽을 이용해서 훤활한

속도제공)

2번

#j쿼리 - 배우는 사이트

https://www.w3schools.com/js/default.asp

https://jquery.com/

https://jqueryui.com/

https://api.jquery.com/

https://www.tcpschool.com/jquery/

https://plugins.jquery.com/

◐jquery1.html◐ j쿼리 활용 예제

<!DOCTYPE html>

<head>

<title>Document</title>

<!-- <script src="../../js/tab.js"></script>

<style>

#test1{

padding: 5px;

text-align: center;

background-color: #7fb8e3;

border : 1px solid #000;

width : 200px;

height: 50px;

line-height: 50px;

}

#text{

padding: 50px;

display: none; /*완전히 숨김(자리까지 없앰)*/

height: 400px;

width: 110px;

text-align: center;

background-color: aquamarine;

border : 1px solid #000;

}

</style>

// window.onload = function(){ } -자바스크립트

// document.addEventListener('DOMContentLoaded', function(){ }); -자바스크립트

let h1 = document.querySelector('h1');

//JQuery

// window.jQuery = window.$ = jQuery

//jQuery 시작 : 문서 객체의 생성 완료 시점을 잡는 이벤트 연결

// $(선택자).메소드(매개변수,....)

$('h1').css('color', 'red');

$('#test').css('color', 'red');

$('h1.aa').css('color','red'); //$는 j쿼리

$('h1').css('background-color','cyan');

//document.querySelector('h1').style.backgroundColor = 'cyan'

$('h1').css('color', 'red');

$(document).ready(function(){

$('h1').css('background-color','cyan');

//document.querySelector('h1').style.backgroundColor = 'cyan'

$('h1').css('color', 'red');

//h1.addEventListener('click', function(){ });

$('#text1').click(function(){

$('#text').slideDown('slow'); //클릭할 때만

});

})

</script>

</head>

<body>

<h1 class="aa">header</h1>

<h1>header</h1>

</body>

</html>

◐jquery2.html◐

<!DOCTYPE html>

<head>

<title>Document</title>

<!-- <script src="../../js/tab.js"></script>

$(document).ready(function(){

$('.box').css({

float : 'left',

margin:10,

width : 100,

height : 100,

backgroundColor : 'orange'

});

//속성집어넣는 연습

// attr() : 문서 객체의 속성 조작

// $('img').attr('src')

$('img').attr('src','../../images/2.jpg');

//$(선택자:even) : 짝수

//$(선택자:odd) : 홀수

});

</script>

</head>

<body>

<img>

</body>

</html>

◐jquery3.html◐

<!DOCTYPE html>

<head>

<title>Document</title>

$(document).ready(function(){

//#1. 방법

// 문서 객체를 반복적으로 추출하고 조작

//each() : 선택한 문서 객체에 반복을 적용

// $('h1').each(function(index, item){ })

//h2태그를 모두 추출하고 반복적으로 돌려서 짝수만 색상을 넣기

$('h2').each(function(index, element){

if(index % 2 ==0){ //인덱스가 0부터라. 짝수홀수 구분잘하세요

$(this).css('color', 'pink');

}

})

//#2. 방법

$('h2:even').css('color', 'red'); //홀수

$('h2:odd').css('color', 'blue'); //짝수

//#3. 방법

//jQuery에서 변수를 선언 - 변수명 앞에 $를 붙여서 jQuery 변수라는 표시를 함

const $testH2 = $('h2');

for(let i=0; i<$testH2.length; i++){

if(i % 2 ==0){

const documentElement = $testH2.get(i); //i번째 요소를 추출해서 변수에 담기

$(documentElement).css('color', 'red');

}

});

</script>

</head>

<body>

<h2>hello jQuery1</h2>

<h2>hello jQuery2</h2>

<h2>hello jQuery3</h2>

<h2>hello jQuery4</h2>

<h2>hello jQuery5</h2>

<h2>hello jQuery6</h2>

</body>

</html>

◐jquery4.html◐

<!DOCTYPE html>

<head>

<title>Document</title>

//글자 조작

// text() : html 태그 내부의 문자를 조작

// html() : html 태그 내부의 문자를 조작, html 태그를 인식

// val() : 폼필드(양식 필드)의 값을 조작

$(document).ready(function(){

$('#but1').click(function(){

alert('text : ' + $('#but1').text()); //자바스크립트이 textContent와 비슷

$('#textBut').text('<h3>hello <br> jQuery</h3>')

});

$('#but2').click(function(){

alert('html : ' + $('#but2').html()); //자바스크립트이 innerHTML와 비슷

$('#htmlBut').text('<h3>hello <br> jQuery</h3>')

});

</script>

</head>

<body>

</body>

</html>

◐jquery5.html◐

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

width: 700px;

height: 300px;

box-sizing: border-box;

border: 10px solid black;

}

</style>

$(document).ready(function(){

// $(b).append(a) : a를 b뒤에 추가 ★★★

// $(b).prepend(a) : a를 b앞에 추가 ★★★

// $(a).appendTo(b) : a를 b안쪽들어가서 안쪽 뒤에 추가

// $(a).prependTo(b) : a를 b안쪽 앞에 추가, 해당 요소의 처음에 삽입

// $(a).insertBefore(b): a를 b앞에 추가,

// $(a).insertAfter(b): a를 b뒤에 추가

// $('#but1').click(function(){

// $('p').append('<h1>추가된 글자 </h1>'); //p 뒤에다가 <h1>추가된 글자 hello </h1> : 추가

// });

// $('#but1').click(function(){

// $('p').prepend('<h1>추가된 글자 hello </h1>'); //p앞에다가 <h1>추가된 글자 hello </h1> : 추가

// });

// $('#but2').click(function(){

// $('ol').append('<li><h1>hello jQuery, 추가된 item </h1></li>');

// });

// $('#but2').click(function(){

// $('ol').prepend('<li><h1>추가된 item, hello jQuery </h1></li>');

// });

$('<h3></h3>').text('hello jQuery').attr('data-test','test')

.css({

backgroundColor : 'red',

color : 'cyan',

height : 50,

textAlign : 'center'

}).prependTo('p');

//append로도 바꿔보고 해보세요

});

</script>

</head>

<body>

<ol>

</ol>

<button id="but2">li태그에 글자 추가(클릭)</button>

</body>

</html>

'4.VisualStudioCode > 2).VisualStudioCode_개념 및 실습' 카테고리의 다른 글

VisualStudioCode_Day_09 (0)	2024.03.02
VisualStudioCode_Day_08 (1)	2024.02.27
VisualStudioCode_Day_07 (2)	2024.02.26
VisualStudioCode_Day_06 (1)	2024.02.23
VisualStudioCode_Day_05 (0)	2024.02.23

현재글VisualStudioCode_Day_10

(참고)데이터베이스개론과 실습2판,

Today :
Yesterday :

92J