본문 바로가기

CLASS/HTLML,CSS,JS16

#10-2 / js중급 - 키보드 이벤트 핸들링 onkeypress키보드 입력시 기존에 있는 값을 가져오는 형태 onkeyup키보드 입력시 누르고 떼자마자 입력된 모든값을 가져오는 형태 onkeydown키보드 입력시 누르자마자 직전값을 모두 가져오는 형태오른쪽 숫자키,상단숫자키 keycode ascii번호가 다름 ( onkeypress는 동일 )특수키 keycode ascii번호도 인식 ( onkeypress는 불가 ) =>새로고침방지,스크린샷방지,id입력시 spacebar 사용금지 등..에 사용⚡ 키보드 이벤트 핸들링 2024. 6. 11.

#10-1 / js중급 - 자식노드핸들링,시간함수 ⚡ 자식 노드 핸들링var node = document.getElementById("box").childNodes;var rem = document.getElementById("box").children; childNodes태그가 공백없이 죽 나열되어있지 않은이상 빈 공백까지 text node로 인식=> ∴ text 등 쓸모없는 node까지 싹 찍혀서 핸들링하기 어렵다 children : 태그 기점으로 진짜 딱 자식 노드만 확인 ⚡ 시간함수 ⭐⭐ - 시간함수는 변수에 담아 사용 ! - setTimeout : 해당 시간이 지나고 한번만 호출하여 사용(실무에선 이걸 더 많이 사용) -setInterval : 해당시간에 맞춰서 지속적으로 호출※ 함수안에 사용시 반복이 중첩되어 시간함수가 늘어남 ?.. 2024. 6. 11.

#9 / html include (by php) * 실제 도메인이 작동되야만 먹힘 ( 로컬에서는 x ) 2024. 5. 30.

#8 / Js-Node,forEach ⚡ Node로 생성 Dom객체와 Node객체 차이 angular,react,vue 등에서 node가 쓰여서 node를 많이쓰는 추세!createElement : html태그를 생성하는 함수 - 반복문 - node로 생성 ⚡ Node 추가,삭제,중간삽입append, prepend, before, after, insertBefore, remove, removeChild 강감찬 이순신 ⚡ split을 이용하여 node로 상품 출력하기 모니터 --> ⚡ 응용문제 공지사항 게시물1 --> ⚡ forEach 2024. 5. 14.

#7-4 / ECMA Script(ES5, ES6) * ES7번~ 은 완전 새로운 형태임..⚡ ES에서 가장 큰 변화들*** querySelector : ES에서 querySelector 사용시 HTML보다 상단에 사용하면 오류 발생 2024. 4. 26.

#7-3 / HTML+CSS+JS 외부 로드 및 각종 핸들링 HTML head (favicon) .ico확장자는 옛날꺼ㅋ(젤 큰거로 하나만 써도 무관) =>반응형도 함께 작성 CSS css : @charset "utf-8";* @ : anotation(어노테이션) HTML+CSS+JS ⚡ HTML input 입력값은 "문자형"function calc(){ var no1 = document.getElementById("num1"); var no2 = document.getElementById("num2"); var pt = document.getElementById("result"); //html에서 입력되는 모든 value값은 "문자"(value = "" 라서) var sum = Number(no1.value)+Number(n.. 2024. 4. 26.

#7-2 / HTML 오브젝트에 데이터 출력 ⚡ HTML 오브젝트에 데이터 출력 2024. 4. 26.

#7-1 / checkbox,radio 핸들링 ⚡ 전체선택 (checkbox)- 전체선택 체크박스는 핸들링만을 위한 기능(편의) / 해당 체크박스 데이터는 보내진 않는다 전체선택 선택1 선택2 선택3 선택4 선택5 ⚡ agree ( radio )radio태그 특성 : name 기준 / id로 컨트롤시 어려움 발생함(radio는 id를 쓰지 않고 핸들링할수 있는 유일한 태그 )동일한 name일 경우 배열 형태의 기준으로 변경된다.(name이 동일하면 보이진 않지만 배열화가 된다.) 전체동의 동의함 동의안함 동의함 동의안함 동의함 동의안함 2024. 4. 26.

#6-2 / HTML + Javascript(video,input value(로그인)) ⚡Video tag ⚡ input + Javascirpt 활용 ⚡ 로그인 페이지 활성화- 유일하게 submit과 reset에 onclick 작성X => submit은 상위 form태그에 onSubmit="return 함수명()"에 작성- 작동 실패 조건에 return false; 해야 action이 작동하지 않는다 아이디 : 패스워드 : 상위 form태그에 onSubmit=""에 작성 return을 활용하여 method와 action을 컨트롤함 기본적으로 return; 또는 return true; form 이름을 활용한 submit() 사용시 데이터는 전송된다. --.. 2024. 4. 25.

#6-1 / 배열,랜덤함수 ✅ 배열배열 : array (1차원 , 2차원.. 다차원 배열)배열 번호는 0부터 시작데이터를 나열 시켜서 연속성있게 구성된 구조데이터베이스에 아주 중요하다배열 데이터는 삽입,삭제,수정이 가능하다(유동성)⚡ 1차원 배열var data = [10,5,16,22,8]; //배열 리스트 데이터(1차 배열)console.log(data[3]); //배열 출력 방식-배열 번호로 출력/*--------반복문을 이용한 배열 데이터 출력--------*/var ea = data.length; //배열 갯수 확인var f;for(f=0; f ⚡ 2차원 배열//2차배열의 기본 구조(복합, 문자 많이 사용)var data = [ //각 데이터 갯수가 동일해야함 ["홍길동","이순신","강감찬"], ["일반회원.. 2024. 4. 25.

#5-2 / Js(함수) Js 파일 연동 및 함수 활용 ⚡ js파일 로드 ⚡함수 -함수명은 동일한 이름 x-함수 - 일반함수 : 호출형태- 이벤트 핸들링 함수 : 이벤트를 발생 (ex- 로그인 버튼)- 이벤트 버블링 함수 : 하위 > 상위로 전달하는 형태 (인자값 전달)- 버블링 함수 : (ex- 전체선택 클릭시 하위 체크박스 모두선택)- 이벤트 캡쳐링 합수 : 상위 > 하위로 전달하는 형태 (ex- body태그에서 -> div태그로 출력)- 캡쳐링 함수 : ?- return 함수 : 부모 함수에서 자식 함수를 호출과 동시에 결과값을 return받는 형태function abc(){ // abc 함수를 설정 console.log('test1212121'); //출력값}abc(); //.. 2024. 4. 24.

#5-1 / Js(반복문,선택문) [반복문]for(반복문 중 제일 느림 - 10000번 부터 속도 차이가 발생)whiledo~while실무에선 배열 사용 많이함/배열은 foreach,forin 사용 (훨씬 빠름) ⚡ 반복문(while문)var a = 1; //초기값while(a = 15){ console.log(b); b--;}/* [응용문제2] while문을 이용하여 1부터 10까지의 모든 숫자를 합한 결과값을 출력하시오*/var d=1; //초기값var sum=0; //합계에 사용할 변수while(d ⚡ while + if /* while + if결합 : 1~10 까지 4,7,9 출력 연산기호 || : 여러개의 조건 중 한가지라도 맞을 경우 && : 여러개의 .. 2024. 4. 24.

#4 / Js.1 지금부터 진짜 프로그래밍 Js4.0 > Es5.0(EcmaScript),Es6.0 발전 (젤마니씀) > Ts(TypeScript)FrameScript(Vue,Angular,React) Js 기초 ⚡ 변수 : 지속적으로 변할 수 있는 수 ⚡ 상수 : 고정된 값 //a라는 창고에 10이라는 숫자를 넘겨 받겠다var a = 10; //숫자형 변수선언var b = "10"; //문자형 변수선언var c;//사칙연산(+,-,*,/) //: 단 +는 숫자와숫자,문자와문자,숫자와문자일때 결과가 다름 나머지세개는 계산은 해줌var z = "100"var k = "50"var p = z - k;console.log(p); // 50⚡ let,const는 ES5 변수 선언문(.. 2024. 4. 23.

#3 [ memo ] * 파일이 올바르게 다 연결된 경우 개발자도구의 Network -> status가 200뜸 * form 통신 * get통신 : url주소 맨 끝에 ?로 시작하여 파라미터가 생성된다. 보안이 필요 없는경우 http://mekeyace.dothome.co.kr/test15.php?text=12121211 파라미터 값으로 전달되기때문 text 는 textarea의 name값 (name값은 백엔드 개발자와 약속된 값) ?text=212121121&point=3점 2개전달( &기준 ) * post 통신 (name값은 백엔드 개발자와 약속된 값) ==> get,post 통신 radio,checkbox는 value 속성이 없을 경우 기본은 on,off로 데이터가 표시된다. ex) 댓글입력 별점 5점 .. 2024. 4. 22.

#2 form 태그 form 태그 : 데이터를 전송하기 위한 태그 -method 속성 : 데이터 전송 방식 -action 속성 : 데이터를 보내는 url을 말함 0 100 50 input submit,reset은 form태그 안에 들어있어야지만 작동함 input button은 javascript를 꼭 작성해야함 form에는 전송방식이 2가지가 발생함 1. post 전송방식 : data를 암호화하여 데이터를 숨겨서 전송 2. get 전송방식 : url에 파라미터를 이용하여 전송 *주의) form으로 데이터 전송시 무조건 name값을 설정하여 전송합니다. ex) 네이버 검색기능 네이버 검색 : 2024. 4. 21.

#1 [ 내가 알아야할것 ] 1. HTML,HTML5 차이 / HTML5 왜쓰는가? 2. TCP란 무엇인가 3. EMCA..? ES..? [ MEMO ] * 마크업 : 열고 닫는 것 * : 특수 기호 none break space * 모바일은 a target="_blank" 를 써야 트래픽 발생이 많아져 검색사이트에 노출될 가능성이 높아진다. * 개발자도구 세션 스토리지 : 아이디/비밀번호 자동저장 ->스토리지 관리는 개발자가 2024. 4. 21.

이전 1 다음

티스토리툴바