봉보로봉봉

성적 처리 프로그램 수강생 국어 영어 수학 결과 취소 성적 결과표 수강생 이름을 넣어주세요. 합계 총점을 넣어주세요. 평균 평균을 넣어주세요. 판정 합격/불합격 *{box-sizing: border-box;} .grades{ margin:0 auto; width:100%; height:100vh; display:flex; justify-content: center;align-items: center; flex-direction: column; } .grades h1{} .grades table{width:400px; border-collapse: collapse;background:#f3f3f3;} .grades table th{padding:15px 0;border:1px solid #ddd;} .gr..

// data.json { "work":[ { "name":"프로젝트1", "date":"2021.06", "img":"./img/img-04.jpg", "detail":"프로젝트1(상세설명)" }, { "name":"프로젝트2", "date":"2021.07", "img":"./img/img-05.jpg", "detail":"프로젝트2(상세설명)" }, { "name":"프로젝트3", "date":"2021.08", "img":"./img/img-06.jpg", "detail":"프로젝트3(상세설명)" } ] } 객체는 키값이 필요, 바로 [배열]을 쓸 수는 없음 const value = { work:[ 100, 200, 300 ] }; console.log(value); console.log(valu..

페이지에 따라 메뉴 활성화 index page about page work page HOME ABOUT WORK ⓒ2021.Copyright $('header').load('inc.html header nav',menu); // header load $('footer').load('inc.html footer'); // footer load $('main').load('main.html h2'); // main load function menu(){ $('header a').on('click', function(e){ e.preventDefault(); // load되므로 a태그 속성 막기 let path = $(this).attr('href'); // a태그의 href속성을 가져다가 $('main')...

console.group(); // 콘솔에서 찍을 때 그룹 짓는 것, 그룹의 시작 console.groupEnd(); // 그룹의 끝 .parent(); // 부모태그를 알 수 있음 .parents(); // 부모태그들을 알 수 있음 버튼을 누르면 태그 삭제 순번 제목 날짜 내용 삽입 let data = [ {num:1, title:'공지사항입니다.',date:'2021-10-20'}, {num:2, title:'업데이트입니다.',date:'2021-10-21'}, {num:3, title:'공지사항입니다.',date:'2021-10-22'}, {num:4, title:'업데이트입니다.',date:'2021-10-23'}, {num:5, title:'점검시간안내입니다.',date:'2021-10-24'}..

옵션을 선택하면 이미지가 바뀌도록 하기 강아지 고양이 제이쿼리 $('select').on('change', function(){ let url = $(this).val(); $('div').html(``) $('div img').attr('src', `${url}`); }); 바닐라 const select = document.querySelector('select') select.onchange = function(){ let url = this.value; document.querySelector('div').innerHTML = ``; } DOM제어에 기본적인 바닐라 자바스크립트 코드 document.querySelector('div').classList.textContent = ''; documen..

폼으로 더하기 제이쿼리 $("[type='button']").on('click', function(){ let kor = Number($("input[name='kor']").val()); // input은 string으로 받아오기 때문에 추가 let eng = Number($("input[name='eng']").val()); $('.result input').val(kor + eng); }); 바닐라 const btn = document.querySelector("[type='button']"); const kor = document.querySelector("input[name='kor']"); const eng = document.querySelector("input[name='eng']"); c..

*스크롤 이벤트를 일으키는 같은 코드 제이쿼리 $(window).on('scroll', function(){ console.log( $(window).scrollTop() ); }) 바닐라 자바스크립트 window.onscroll = function(){ console.log( window.scrollY ); } window.addEventListener('scroll', function(){ console.log( window.scrollY ); }) 스크롤을 내렸는지 올렸는지 알아내기 let scrollPos = { y: 0, dy: 0, state: true } $(window).on('scroll', function(){ scrollPos.y = $(window).scrollTop() // {}안..

1 2 3 scroll 이벤트 $(window).on('scroll', function(){ // 마우스가 없는 디바이스를 위해서 scroll 이벤트 사용 console.log(0); // 한번 스크롤을 내리면 여러번의 이벤트가 발생 }); $('body').height(5000); $(window).on('scroll', function(){ clearTimeout(inter) inter = setTimeout(function(){ }, 50); // scroll 이벤트에 텀을 줘서 한번씩만 일어나게 하기 }); scroll의 위치 알아내기 $(window).on('scroll', function(){ clearTimeout(inter) inter = setTimeout(function(){ conso..