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

DOCTYPE html> 회원가입 $(function(){ $("[name=memberId]").blur(function(){ var idRegex= /^[a-z0-9]{5,20}$/; var inputId=$(this).val(); var isValid=idRegex.test(inputId); console.log(isValid); $(this).removeClass("success fail"); if(isValid){ $(this).addClass("success"); } else{ $(this).addClass("fail"); } }); $("[name=memberPw]").blur(function(){ var pwRegex=/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[..

DOCTYPE html> 자기소개서 $(function(){ $(".form-input").on("input",function(){ //var content=this.value;//js var content=$(this).val();//jquery // $(this).next().text(content.length); $(this).next(".form-input-length").text(content.length); if(content.length>1000){ // this.nextElementSibling.classList.add("red"); $(this).next(".form-input-length").addClass("red"); } else{ // this.nextElementSibling.c..

DOCTYPE html> input이벤트 $(function(){ //(주의) input이벤트는 약식 명령이 없다 $("[name=keyword]").on("input",function(){ //this == 입력이 발생한 입력창 //console.log(this.value);//JS // console.log($(this).val());//jQuery var content=$(this).val(); // document.querySelector(".text").textContent=content; $(".text").text(content); // document.querySelector(".html").innerHTML =content; $(".html").html(content); // $(".le..

DOCTYPE html> 사진 크기 조절 (jQuery) $(function(){ $(".btn").click(function(){ var size = $(this).data("size"); $(".control").val(size); $(".target").css("width", size+"px").css("height", size+"px"); }); $(".control").on("input", function(){ //var size = this.value; var size = $(this).val(); $(".target").css("width", size+"px").css("height", size+"px"); }); }); 작게 보통 크게

DOCTYPE html> 색상 변경 예제(jQuery) $(function(){ //$(".btn").on("click", function(){}); $(".btn").click(function(){ //var color = this.dataset.color;//JS var color = $(this).data("color");//jQuery $(".target").css("color", color); }); }); 색상 변경 예제(jQuery) 검정 빨강 파랑 노랑 초록 회색

DOCTYPE html> jQuery // window.addEventListener("load", function(){ // var h1 = document.querySelector("h1"); // h1.addEventListener("click", function(){ // this.style.color = "red"; // }); // document.querySelector("h1").addEventListener("click", function(){ // this.style.color = "red"; // }); // }); $(function(){//ready 이벤트(load + jQuery준비완료 시점) //jQuery는 무조건 무언가를 선택하면서 시작한다 //-> $(대상) + 제공되는 ..

DOCTYPE html> 기본 이벤트 제어 기본 이벤트 제어 구글로 이동 구글로 이동 구글로 이동

DOCTYPE html> 글자수 입력제한 window.addEventListener("load", function(){ var textareaList = document.querySelectorAll(".form-input"); for(var i=0; i 1000) { ..

DOCTYPE html> 전화기 화면 .p-10 { padding: 10px; } .target { display: flex; justify-content: end; align-items: end; padding: 10px; font-size: 24px; } window.addEventListener("load", function(){ var buttonList = document.querySelectorAll(".keypad"); for(var i=0; i < buttonList.length; i++) { buttonList[i].addEventListener("click", function(){ //this == 누른 버튼(주인공) var div = document.querySelector(".tar..

DOCTYPE html> 글자크기 조절 문제 window.addEventListener("load", function(){ var buttonList = document.querySelectorAll(".btn"); for(var i=0; i < buttonList.length; i++) { buttonList[i].addEventListener("click", function(){ //this == 클릭된 버튼(이벤트의 주인공) var div = document.querySelector(".target"); div.style.fontSize = this.dataset.fontsize +"px"; }); } }); 글자 크기 조절 문제 아주작게 작게 보통 조금크게 크게 스위스에서 오셔서 산새들이 속삭이는..