- eventlistener - 사용해보기
eventlistener는 특정 DOM객체에 이벤트를 추가하고 함수를 호출하는 기능이라고
생각하면 편할듯합니다
사용 문법
DOM객체.addEventListener(이벤트명 , 실행할 함수명 or 익명함수와 실행문)
샘플 코드
사용법은 2가지가 있고 익명함수를 사용할때에는 addEvnetListener ( )안에
함수 실행문까지 다 넣어줘야합니다
- EventListener - 응용 사용
이메일입력 input
정규식 : 소문자 , 숫자 필수 8~16자 이내로
blur 이벤트를 이벤트 리스너로 적용 email_check함수 호출
<body>
이메일입력: <input type="text" id="id1"><br>
<sub id="id2"></sub>
</body>
<script>
const email_check = () => {
const blur2 = document.getElementById("id1").value;
const email_result = document.getElementById("id2");
const exp = /^(?=.*[a-z])(?=.*\d)[a-z\d]{8,16}$/;
if (blur2.length == 0) {
email_result.style.color = "red";
email_result.innerHTML = "필수 입력";
} else if (blur2.match(exp)) {
email_result.style.color = "green";
email_result.innerHTML = "좋아요";
} else {
email_result.style.color = "red";
email_result.innerHTML = "양식에 맞지 않음";
}
}
// const blur1 = document.getElementById("id1");
// blur1.addEventListener("blur", email_check);
document.getElementById("id1").addEventListener("blur", email_check)
// 중간 과정을 생략하고 한줄로 사용가능하다
body의 input 에는 event가 없지만
addEventListener을 사용하여 event blur를 넣고
익명 함수를 사용하는게 아니기 때문에 호출할 함수도 작성한 모습입니다
</script>
- jquery - 맛보기 (CDN 가져오기)
오늘은 맛보기이기 때문에 CDN을 사용합니다
구글에 jQuery를 검색하고 CDN을 눌러줍니다
버전이 많이 있지만 맛보기이기 때문에 가장 최신 버전을 사용하겠습니다
오늘은 맛보기이기 때문에 minified 를 클릭해줍니다
minified를 클릭하면 창이하나 나오는데요
옆에 복사 버튼을 눌러 복사해줍니다
이제 사용할 HTML 파일의 head 부분에 복사 붙여넣기 !
간단하게 사용법은 알아봤으니 간단한 노드 몇가지 알아보고 넘어가겠습니다
- jQuery - 맛만보기 (간단한 노드 사용)
제이쿼리는 javascript의 버전이 낮아 사용 편의성이 많이 떨어지던 시절에
좀 더 편한 사용을 도와주었던 라이브러리 입니다
요즘은 javascript의 버전 업데이트가 많이 이루어졌기 때문에 큰 필요성을 느끼지는 못하지만
노드를 사용하면 코드를 정말 간략하게 만들 수 있다는 장점이 있습니다
전 시간에 사용했던 내용들을 jQuery의 노드로 수정 해보았습니다
<body>
<h2 id="id1">html</h2>
<h2 id="id2">javascript</h2>
<div id="div1">
<h2 id="id3">css</h2>
</div>
<h2 class="class1">spring</h2>
<h2 class="class2">springboot</h2>
</body>
<script>
//모든 h2 요소 가져오기
// const h2All1 = document.getElementsByTagName("h2");
// jq
const h2All1 = $("h2");
console.log(h2All1);
// const h2All2 = document.querySelectorAll("h2");
// jq
const h2All2 = $("h2");
console.log(h2All2);
// id1이 적용된 요소 가져오기
const ele1 = document.getElementById("id1");
const ele1jq = $("#id");
console.log($("id1").text()); //innerText
console.log($("#id1").html()); // innerHTML
// class1이 적용된 모든 요소 가져오기
const ele3 = document.getElementsByClassName("class1");
const ele4 = document.querySelectorAll('.class2');
console.log($(".class1").html());
console.log($(".class1").text());
//h2태그중에서 class1이 적용된 모든 요소 가져오기
console.log($("h2.class1"));
console.log(document.querySelectorAll("h2.class1"));
//id2 요소의 text값을 jquery로 변경하기
$("#id2").text("jquery");
// id3 요소의 text 값을 변수로 가져오기
// jq
// const id3Text = $("#id3").text();
const id3Text = document.getElementById("id3").innerText;
console.log(id3Text);
//id1 요소의 display 속성을 none으로 변경
document.getElementById("id1").style.display = "none";
// id1 요소의 display 속성을 다시 보여주기
document.getElementById("id1").style.display = "block";
// jq
$("#id1").hide();
$("#id1").show();
// id3 요소의 글자크기를 조절
document.getElementById("id3").style.fontSize = "100px";
// jq
$("#id2").css("font-size", "200px");
// 부모 요소 확인하기
// id3의 부모
console.log(document.getElementById("id3").parentNode);
// jq
console.log($("#id3").parent());
</script>
코드를 살펴보면 어떤게 jQuery를 사용한 문법인지 바로 알 수 있습니다
jQuery에서 $는 jQuery에 접근할 수 있는 식별자를 의미합니다
그렇기 때문에 다음에 모르는 코드를 봤는데 달러기호($)가 있다면
jQuery를 사용했다고 생각하면 됩니다
- alerts - 좀 더 알아보기
<body>
<button onclick="fun1()">alert</button>
<button onclick="fun2()">confirm</button>
<button onclick="fun3()">prompt</button>
<button onclick="fun4()">뒤로</button>
<button onclick="fun5()">현재페이지 높이 확인</button>
<h2 id=id1></h2>
</body>
<script>
const fun1 = () => {
alert("alert입니다");
가장 기본적인 alert입니다
모르면 공부 다시합시다
}
const fun2 = () => {
const result = confirm("선택해주세요");
confirm - 선택지에 따라 true false를 줍니다
선택지가 확인이면 true
선택지가 취소라면 flase
if (result) {
alert("확인을 클릭했네요");
} else {
alert("취소를 클릭했네요");
}
조건식으로 출력문을 alert속성으로 출력했습니다
}
const fun3 = () => {
const result1 = document.getElementById("id1");
result1.innerHTML = prompt("입력해보세요.");
text바를 alert속성으로 출력하고 입력받아 받은 값을
body에 있는 h2태그에 넣어 출력합니다
}
const fun4 = () => {
history.back();
이건 그냥 말그대로 뒤로가기입니다
아직 안됌
}
const fun5 = () => {
const height = document.documentElement.scrollHeight;
console.log(height);
//BOM(Browser Object Model)
window.scrollTo(0, 2000);
0 = 가로
2000 = 세로입니다
웹의 세로의 2000px을 스크롤바를 누르고 내려서 보여줍니다
}
</script>
- bootstrap - Examples ?
부트스트랩에서 사용자를 위해 무료로 재공하는 예제 입니다
생각보다 이쁜 요소들도 많이 있기 때문에 html을 배워가는 입장에서
개꿀입니다
구글에 bootstrap을 검색하고 홈페이지 상단의 Examples를 클릭해주세요
파일을 다운로드받고 압축을 풀어주세요
이게 다 bootstrap에서 무료로 재공하는 예제입니다
이제 마음에 드는 요소를 찾아 입맛에 맞게 수정해서 사용하면 됩니다
! 주의사항 !
간혹 css가 필요한 요소들도 있기 때문에 잘 살펴보고 꼭 css도 옮겨 사용해줍시다
'나의 수업일지' 카테고리의 다른 글
- eventlistener - 사용해보기
eventlistener는 특정 DOM객체에 이벤트를 추가하고 함수를 호출하는 기능이라고
생각하면 편할듯합니다
사용 문법
DOM객체.addEventListener(이벤트명 , 실행할 함수명 or 익명함수와 실행문)
샘플 코드
사용법은 2가지가 있고 익명함수를 사용할때에는 addEvnetListener ( )안에
함수 실행문까지 다 넣어줘야합니다
- EventListener - 응용 사용
이메일입력 input
정규식 : 소문자 , 숫자 필수 8~16자 이내로
blur 이벤트를 이벤트 리스너로 적용 email_check함수 호출
<body>
이메일입력: <input type="text" id="id1"><br>
<sub id="id2"></sub>
</body>
<script>
const email_check = () => {
const blur2 = document.getElementById("id1").value;
const email_result = document.getElementById("id2");
const exp = /^(?=.*[a-z])(?=.*\d)[a-z\d]{8,16}$/;
if (blur2.length == 0) {
email_result.style.color = "red";
email_result.innerHTML = "필수 입력";
} else if (blur2.match(exp)) {
email_result.style.color = "green";
email_result.innerHTML = "좋아요";
} else {
email_result.style.color = "red";
email_result.innerHTML = "양식에 맞지 않음";
}
}
// const blur1 = document.getElementById("id1");
// blur1.addEventListener("blur", email_check);
document.getElementById("id1").addEventListener("blur", email_check)
// 중간 과정을 생략하고 한줄로 사용가능하다
body의 input 에는 event가 없지만
addEventListener을 사용하여 event blur를 넣고
익명 함수를 사용하는게 아니기 때문에 호출할 함수도 작성한 모습입니다
</script>
- jquery - 맛보기 (CDN 가져오기)
오늘은 맛보기이기 때문에 CDN을 사용합니다
구글에 jQuery를 검색하고 CDN을 눌러줍니다
버전이 많이 있지만 맛보기이기 때문에 가장 최신 버전을 사용하겠습니다
오늘은 맛보기이기 때문에 minified 를 클릭해줍니다
minified를 클릭하면 창이하나 나오는데요
옆에 복사 버튼을 눌러 복사해줍니다
이제 사용할 HTML 파일의 head 부분에 복사 붙여넣기 !
간단하게 사용법은 알아봤으니 간단한 노드 몇가지 알아보고 넘어가겠습니다
- jQuery - 맛만보기 (간단한 노드 사용)
제이쿼리는 javascript의 버전이 낮아 사용 편의성이 많이 떨어지던 시절에
좀 더 편한 사용을 도와주었던 라이브러리 입니다
요즘은 javascript의 버전 업데이트가 많이 이루어졌기 때문에 큰 필요성을 느끼지는 못하지만
노드를 사용하면 코드를 정말 간략하게 만들 수 있다는 장점이 있습니다
전 시간에 사용했던 내용들을 jQuery의 노드로 수정 해보았습니다
<body>
<h2 id="id1">html</h2>
<h2 id="id2">javascript</h2>
<div id="div1">
<h2 id="id3">css</h2>
</div>
<h2 class="class1">spring</h2>
<h2 class="class2">springboot</h2>
</body>
<script>
//모든 h2 요소 가져오기
// const h2All1 = document.getElementsByTagName("h2");
// jq
const h2All1 = $("h2");
console.log(h2All1);
// const h2All2 = document.querySelectorAll("h2");
// jq
const h2All2 = $("h2");
console.log(h2All2);
// id1이 적용된 요소 가져오기
const ele1 = document.getElementById("id1");
const ele1jq = $("#id");
console.log($("id1").text()); //innerText
console.log($("#id1").html()); // innerHTML
// class1이 적용된 모든 요소 가져오기
const ele3 = document.getElementsByClassName("class1");
const ele4 = document.querySelectorAll('.class2');
console.log($(".class1").html());
console.log($(".class1").text());
//h2태그중에서 class1이 적용된 모든 요소 가져오기
console.log($("h2.class1"));
console.log(document.querySelectorAll("h2.class1"));
//id2 요소의 text값을 jquery로 변경하기
$("#id2").text("jquery");
// id3 요소의 text 값을 변수로 가져오기
// jq
// const id3Text = $("#id3").text();
const id3Text = document.getElementById("id3").innerText;
console.log(id3Text);
//id1 요소의 display 속성을 none으로 변경
document.getElementById("id1").style.display = "none";
// id1 요소의 display 속성을 다시 보여주기
document.getElementById("id1").style.display = "block";
// jq
$("#id1").hide();
$("#id1").show();
// id3 요소의 글자크기를 조절
document.getElementById("id3").style.fontSize = "100px";
// jq
$("#id2").css("font-size", "200px");
// 부모 요소 확인하기
// id3의 부모
console.log(document.getElementById("id3").parentNode);
// jq
console.log($("#id3").parent());
</script>
코드를 살펴보면 어떤게 jQuery를 사용한 문법인지 바로 알 수 있습니다
jQuery에서 $는 jQuery에 접근할 수 있는 식별자를 의미합니다
그렇기 때문에 다음에 모르는 코드를 봤는데 달러기호($)가 있다면
jQuery를 사용했다고 생각하면 됩니다
- alerts - 좀 더 알아보기
<body>
<button onclick="fun1()">alert</button>
<button onclick="fun2()">confirm</button>
<button onclick="fun3()">prompt</button>
<button onclick="fun4()">뒤로</button>
<button onclick="fun5()">현재페이지 높이 확인</button>
<h2 id=id1></h2>
</body>
<script>
const fun1 = () => {
alert("alert입니다");
가장 기본적인 alert입니다
모르면 공부 다시합시다
}
const fun2 = () => {
const result = confirm("선택해주세요");
confirm - 선택지에 따라 true false를 줍니다
선택지가 확인이면 true
선택지가 취소라면 flase
if (result) {
alert("확인을 클릭했네요");
} else {
alert("취소를 클릭했네요");
}
조건식으로 출력문을 alert속성으로 출력했습니다
}
const fun3 = () => {
const result1 = document.getElementById("id1");
result1.innerHTML = prompt("입력해보세요.");
text바를 alert속성으로 출력하고 입력받아 받은 값을
body에 있는 h2태그에 넣어 출력합니다
}
const fun4 = () => {
history.back();
이건 그냥 말그대로 뒤로가기입니다
아직 안됌
}
const fun5 = () => {
const height = document.documentElement.scrollHeight;
console.log(height);
//BOM(Browser Object Model)
window.scrollTo(0, 2000);
0 = 가로
2000 = 세로입니다
웹의 세로의 2000px을 스크롤바를 누르고 내려서 보여줍니다
}
</script>
- bootstrap - Examples ?
부트스트랩에서 사용자를 위해 무료로 재공하는 예제 입니다
생각보다 이쁜 요소들도 많이 있기 때문에 html을 배워가는 입장에서
개꿀입니다
구글에 bootstrap을 검색하고 홈페이지 상단의 Examples를 클릭해주세요
파일을 다운로드받고 압축을 풀어주세요
이게 다 bootstrap에서 무료로 재공하는 예제입니다
이제 마음에 드는 요소를 찾아 입맛에 맞게 수정해서 사용하면 됩니다
! 주의사항 !
간혹 css가 필요한 요소들도 있기 때문에 잘 살펴보고 꼭 css도 옮겨 사용해줍시다
