신입개발자를 희망하는 오시리엔

DOCTYPE html> 색상변경 예제 1-1 window.addEventListener("load", function(){ //검정버튼 var btnBlack = document.querySelector(".btn-black"); btnBlack.addEventListener("click", function(){ var h1 = document.querySelector(".target"); h1.style.color = "black"; }); //빨강버튼 var btnRed = document.querySelector(".btn-red"); btnRed.addEventListener("click", function(){ var h1 = document.querySelector(".target"); h1..

DOCTYPE html> window 1-1 //목표 : //버튼을 누르면 안녕!이라는 alert이 뜨게 해보자! //단, onclick 안쓰고... //1. 버튼을 선택한다 //2. 버튼에 클릭 이벤트를 설정한다 //3. 클릭 이벤트에서 함수를 실행한다 function welcome() { alert("Hello!"); } function init() { var btn = document.querySelector(".btn"); //console.log(btn); //.btn 을 클릭하면 welcome 함수를 실행하도록 예약할게요 btn.onclick = welcome; } //모든화면이 준비되면 init 함수를 실행하도록 예약할게요(콜백,callback) window.onload = init; Cli..

DOCTYPE html> 예상 결제 금액 계산 function refreshCheckbox(tag) { // //1. 체크된 체크박스를 확인 //2-1. 전체가 체크된 경우 개별항목을 모두 체크 //2-2. 개별항목이 체크된경우 전체 체크여부를 확인 //console.log(tag); //console.log(tag.classList); //console.log(tag.classList.contains("check-item")); if(tag.classList.contains("check-all")) {//2-1 var itemList = document.querySelectorAll(".check-item"); var allList = document.querySelectorAll(".check-all..

DOCTYPE html> 이용약관 function refreshCheckbox(tag) { // //1. 체크된 체크박스를 확인 //2-1. 전체가 체크된 경우 개별항목을 모두 체크 //2-2. 개별항목이 체크된경우 전체 체크여부를 확인 //console.log(tag); //console.log(tag.classList); //console.log(tag.classList.contains("check-item")); if(tag.classList.contains("check-all")) {//2-1 var itemList = document.querySelectorAll(".check-item"); var allList = document.querySelectorAll(".check-all"); //t..

DOCTYPE html> 체크박스 제어 //속성명과 값이 같은 속성들은 자바스크립트에서 논리로 관리한다 //- (ex) checked, selected, required, disabled, readonly function testCheck() { var checkbox = document.querySelector("#test"); //var checkbox = document.getElementById("test"); //console.log(checkbox.checked); var button = document.querySelector("#button"); // if(checkbox.checked) {//체크가 되었다면 // button.disabled = false;//버튼의 비활성화를 해제 // ..

DOCTYPE html> 내장객체 연산방법 //다음 점수 데이터로 (1) 총점, (2) 평균, (3) 60점의 예상등수 구하여 출력 var scoreList = [70, 55, 90, 100, 82, 88]; var total = 0; for(var i=0; i < scoreList.length; i++) { total += scoreList[i]; } var average = total / scoreList.length; console.log("합계 = " + total); console.log("평균 = " + average); console.log("평균 = " + parseInt(average)); var rank = 1; for(var i=0; i < scoreList.length; i++) {..

DOCTYPE html> Javascript 객체 //자바스크립트 객체(Object) //- 기본적인 브라우저 통제를 위한 내장 객체 //- 내가 만들어 쓰는 사용자 객체 function window01() { //console.log(window); //window.alert("알림창 출력 완료"); //window 키워드는 생략 가능하다 alert("알림창 출력 완료"); } function window02() { var choice = window.confirm("정말 이동하시겠습니까?"); console.log(choice);//확인(true) / 취소(false) if(choice) { location.href = "https://www.google.com"; } } function window..

DOCTYPE html> 게시글 작성 게시글 작성 제목 제목은 필수이며 100자 이내로 작성하세요 내용 내용은 반드시 작성해야 합니다 0 / 1000 작성하기!

DOCTYPE html> 사용자 등록 function checkMemberId() { var input = document.querySelector("[name=memberId]"); var regex = /^[a-z0-9]{5,20}$/; input.classList.remove("success", "fail"); if(regex.test(input.value)) { input.classList.add("success"); return true; } else { input.classList.add("fail"); return false; } } function checkMemberPw() { var input = document.querySelector("[name=memberPw]"); var reg..

DOCTYPE html> 기본 이벤트 제어 //자바스크립트는 자료형 구분을 안하기 때문에 반환형이 필요없다 //return true;//허용 //return false;//차단 function checkMove() { //확인창 var choice = confirm("정말 이동할거에요?"); //console.log(choice); if(choice == false) { return false; } return true; } function checkForm() { var input = document.querySelector("[name=keyword]"); //if(input에 입력값이 없다면) { //if(input.value.length == 0) {//입력 글자수가 0이라면 //if(input...