angsu

Accordion 1개만 열었다 닫았다 하는 Accordion 만드는 방법 HTML 삽입 미리보기할 수 없는 소스 동적인 데이터를 활용해서 Accordion 만드는 방법 HTML 삽입 미리보기할 수 없는 소스 if 활용해서 Accordion 만드는 방법 HTML 삽입 미리보기할 수 없는 소스 forEach 활용해서 Acoordion 만드는 방법 HTML 삽입 미리보기할 수 없는 소스

Tab CSS를 활용해서 Tab 만드는 방법 HTML 삽입 미리보기할 수 없는 소스 css를 활용해서 만들때 주의할 점! html 구조가 변하면 css를 수정해줘야 된다. 구조 변경이 자주 있을 경우, javascript를 활용해야된다. Java Script를 활용해서 Tab 만드는 방법 HTML 삽입 미리보기할 수 없는 소스 html 구조가 바뀌어도 동작에 무리가 없다 동적인 데이터를 활용해서 Tab 만드는 방법 HTML 삽입 미리보기할 수 없는 소스 클래스 별도 제어 방법 className() classList.add() : class 추가 classList.remove() : class 제거 classList.has() : class 유무를 boolean 값으로 봔환 classList.contain..

input type Java Script 제어 type=' text ' : input의 기본 type type=' password ' : 입력하면 ' * ' 로 출력됨 type=' number ' : 숫자입력만 가능, 모바일에서는 숫자 키패드 오픈 type=' date ' : 날짜 선택 type=' email ' : email 유호성 검사 javascript로 설정 해야됨 type=' file ' : 파일 전송 이름 비번 나이 생일 메일 파일 전송 input type 변경 방법 선택자, 속성 이름, 속성 변경, type 변경 type=' color ' : 색상 선택 가능, 선택한 값 출력 type=' search ' : 검색 기능 type=' url ' : 사이트 입력 기능 색상 선택 검색 검색 사이트 ..

문자열 다루기 문자열 길이를 확인하고 싶을 때 : .length 문자열 검색을 하고 싶을 때 : .indexOf() .includes() .startsWidth() .endsWith() 문자열을 추출 하고 싶을 때 : .charAt(index) index생략하면 0, .slice() .substring() .substr() 문자열을 변환 하고 싶을 때 : .replace() .replaceAll() .toLowerCase() .toUperCase() 문자열을 분할 하고 싶을 때 : .split() 문자열을 결합 하고 싶을 때 : +, ``, .join(), .concat() 소수점 자리수 지정하고 싶을 때 : .toFixed(), .toPrecision() 문자열 길이 맞출 때 : .padStart(),..

attribute() : 태그 안의 속성을 얻음 setAttribute() : 지정된 요소의 속성 값을 설정, 속성이 이미 있으면 값은 수정, 속성이 없다면 지정된 이름과 값으로 새 속성이 추가 getAttribute() : 인터페이스의 메소드는 요소의 지정된 속성 값을 반환 removeAttribute() : 메서드는 요소에서 주어진 이름의 특성을 제거

메뉴판 계산하기 /* 데이터 |상품명| 아메리카노 | 에스프레소| 카페라떼 | |------|-------------|---------------|----------| |번호 | CO001 | CO002 | CO003 | |가격 | 3000 | 5000 | 4500 | 주문번호상품명판매개수 1아메리카노4 2카페라떼1 3에스프레소3 4아메리카노5 5카페라떼5 6커피2 7카페라떼5 8아메리카노12 */ const menuTable = [ { id:1, coffee: "아메리카노", code:"CO001", price:3000 }, { id:2, coffee: "에스프레소", code:"CO002", price:5000 }, { id:3, coffee: "카페라떼", code:"CO003", price:450..

// 화살표 함수 // function 함수(){} : 객체, 생성자함수, 클래스 등등 // () => {} // 선언문 function 함수 (){ return 10; } function 함수 (a,b){ return a+b; } console.log(함수(10,30)); // 표현식 : 수식이 평가되어 값이 됨 // const 함수1 = function(){ // return 10; // } // // const 변수 // const 함수2 = () => { // return 10; // } // 수식처럼 표현이 되어서 가독성이 좋음 // const 함수3 = (a,b) => {return a+b;} // 함수3(10,30); const 함수3 = (a,b) => a+b; console.log(함수(..

let str = 'hello javascript'; // 배열처럼 동작한다. 배열과 똑같이 움직이지 않는다. = 유사배열 // { // 0:h, // 1:e // length: n // } console.log(str.length); // split 배열 const ary1 = str.split(' '); // 공백으로 분리하다 split : 분리하다 const ary2 = str.split('a'); // A으로 분리하다 split : 분리하다 const ary3 = str.split(''); // 각 글자마다 분리하다 split : 분리하다 console.log(ary1); console.log(ary2); console.log(ary3); // 문자열 const join = ary3.join();..