728x90 반응형 JS6 jQuery 선택자 //태그 선택자 // jQuery 선택자는 css선택자와 같다!$("h5").css("color", "red");$("p").css("color", "blue");// 자바스크립트로 했을 때 //document.getElementsByTagName("p").style.color = "green";// -> 배열에 스타일을 적용할 수 없다!const arr = document.getElementsByTagName("p");for(let item of arr){ item.style.color = "green";}//h5, p 두 태그 동시에 배경색을 yellow으로 지정하기$("h5,p").css("backgroundColor", "yellow");// 클래스 선택자// 클래스 item인 요소의 글자색.. 2024. 6. 22. 요소 추가 제거 //추가 버튼이 클릭 되었을 때document.getElementById("add").addEventListener("click",function(){ //div 요소 생성 const div = document.createElement("div"); //div에 row 클래스 추가 div.classList.add("row"); //------------------------------ //input 요소 생성 const input = document.createElement("input"); //input in 클래스 추가 input.classList.add("in"); //input에 "type" 속성, "number" 속성 값 추가(type.. 2024. 6. 20. 배열 document.getElementById("btn1").addEventListener("click",function(){ //배열 선언 방법 const arr1 = new Array(3);//3칸짜리 배열 생성 const arr2 = new Array(); //0칸짜리 배열 생성 // console.log(arr1); // console.log(arr2); // 다른 자료형 대입 arr1[0]= "크로칸슈"; arr1[1]= 4500; arr1[2] = true; console.log(arr1); //0칸 배열에 대입 -> 자동으로 길이 증가 arr2[0] = "피자"; arr2[1] = 7800; arr2[2] = false;.. 2024. 6. 18. 문자열 숫자형 변환 document.getElementById("btn1").addEventListener("click",function(){ // 문자열.indexof(""); //문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환 //없으면 -1 반환 const str1 = "Hellow word"; console.log(str1.indexOf("e")); //1 console.log(str1.indexOf("1")); //2 가장 먼저 검색된 인덱스 반환 console.log(str1.indexOf("A")); //-1 //문자열.substring(시작인덱스, 종료인덱스) : 문자열 일부 잘라내기 // -시작 이상 종료 미만 const str2="abcd.. 2024. 6. 18. 자바스크립트 js 이벤트 //인라인 이벤트 모델 확인하기function test1(button){ // console.log(button) button.style.backgroundColor="red"; button.style.color= "white";}//고전 이벤트 모델 확인하기console.log(document.getElementById("test2-1"));document.getElementById("test2-1").onclick = function(){ //익명 함수(이벤트 핸들러에 많이 사용함) alert("고전 이벤트 모델 확인");}//이벤트 제거document.getElementById("test2-2").onclick = function(){ //test2-1 이벤트 제거 .. 2024. 6. 14. javascript 개요 js.// 한줄 주석/* 범위주석 *///js 파일은 태그 내부라고 생각function btnClick2(){ window.alert("external 알림창 추력 버튼!");}function changeColor1(){ document.getElementById("box").style.backgroundColor = "red";}function changeColor2(){ document.getElementById("box").style.backgroundColor ="yellow";} html.DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-wid.. 2024. 6. 12. 이전 1 다음 728x90 반응형