본문 바로가기

HTML, CSS, JS13

2022-10-04 함수의 호이스팅, 표현식, DOM 호이스팅 : 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. - 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 - 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다. https://gmlwjd9405.github.io/2019/04/22/javascri.. 2022. 10. 5.
2022-09-30 이벤트 Window객체 이벤트 : 웹브라우저에 마우스나 키보드의 여러 움직임을 발생시키는 것, 사용자가 웹페이지에서 하는 모든 것 - 이벤트핸들러이용 ▶ on + 이벤트명 ex) onclick - 이벤트핸들러로 호출하는 경우 반드시 함수의 호출문 명시! onclick = "test()" .../> Window 객체 : 브라우저객체의 상위 객체 (1) 대화상자관련된 메소드 window객체명은 생략이 가능 - alert - confirm - prompt (2) popup - open() : 새 창을 실행 ▶ window.open(경로, 이름, 옵션) ---- ---- ---- | | |____________ 오픈될 창의 크기, 위치, 구성요소등 | |_팝업창의이름 left,top,width,height.... | 이름을 주면 항상.. 2022. 10. 4.
2022-09-29 Date객체, Array객체, String객체, BOM객체 javascript 내장객체 1. string객체 - 문자열 문자열을 조작하기 위해 필요한 메소드들을 제공 2. Math객체 - 수학, 삼각과 관련 기능을 제공하는 객체 3. Date객체 - 날짜와 시간에 대해 다룰 수 있도록 기능을 제공하는 객체 4. Arrays객체 - 배열을 관리하는 객체 배열 동일한 성격을 갖고 있는 동일한 타입의 데이터를 여러 개 다룰 때 적합한 구조 (1)배열의 생성 var 변수명 = new Arrays(요소의 갯수) (2)배열의 초기화 배열의 요소에 값을 저장 배열변수명[index] = 값 ------ ===> 배열의 요소 순서번호 : 0번부터 시작 - 배열의 속성 length 배열변수.length .... javascript Browser객체 (BOM - Browser Ob.. 2022. 9. 29.
2022-09-28 javascropt 함수, 객체 javascript 함수 : 자주 사용하는 명령문들을 하나의 기능으로 만들어 놓은 것 함수를 정의하고 피룡한 곳에서 불러서 사용할 수 있다. => 함수호출(call) - [함수의 기본 사용방법] - [함수 내부에서 변수 종류] - [함수의 호이스팅] - [함수의 표현식] - [클로저] 1. 함수의 사용 방법 (1) 함수의 정의 function 함수명 (매개변수명1, 매개변수명2...) (2) 함수의 호출 호출할 함수명(); 호출할 함수명(매개변수로 전달할 값1, 매개변수로 전달할 값2...) (3) 리턴값이 있는 함수의 호출 - 함수의 실행 결과로 값이 함수를 호출하는 곳으로 전달되므로 전달되는 값을 저장할 변수가 선언되어야 한다. 변수명 = 호출할 함수명() - 결과를 반환하기 때문에 또 다른 함수의 .. 2022. 9. 29.
2022-09-27 switch,다중if, for-if, 다중for [제어문] => 모든 제어구문은 중첩이 가능하다. 1. 조건제어문 조건에 따라 실행할 문장을 선택 1) if(조건) { } if-else if-if else-else 2) switch : 다중if문을 대신할 수 있는 명령문(단순한 값들을 비교하기 위해 많이 사용) switch(조건){ ----- ===> 비교하기위한 값이 저장된 변수명. 연산식, 결과가 리턴되는 함수의 호출문 case 값1: // 정확하게 일치하는 값을 비교, > >= 또는 console.iog(i) 코드 치고 페이지에서 f12 눌러서 확인하기 // 숫자 입력했을 때 짝수인지 홀수인지 알려주는 코드 // if-switch문 ===> 다시 해보기 2022. 9. 28.
2022-09-26 javascript 문법 javascript 문법 [ 코딩표준안 ] 1. 언어는 항상 코딩표준안이 존재함. 2. 들여쓰기(탭 -4칸) 3. 문장의 끝에 ;추가 4. 규칙에 맞는 식별자를 작성 - 식별자는 사용자가 정의하는 이름(변수명, 함수명, 상수명, 클래스명....), 영문자로 시작(_, $ 사용 가능하지만 지양), - 공백을 주지 않고 두 개 이상의 단어가 결합하는 경우 _으로 연결하거나 두 번째 단어의 첫 글자를 대문자로 변명하여 사용 - 예약어(키워드)는 식별자로 사용할 수 없다 (예약어 : 미리 등록된 단어) [주석문] : 실행되지 않는 문장 (코드에 대한 설명, 특이사항..) // /* */ [변수] : 변하는 값 프로그램을 실행할 때 발생하는 값을 임시로 저장할 수 있는 메모리상의 공간 변수명 = 값; (변수에 저.. 2022. 9. 26.
html,css_박스모델 실습과제 layout_main.html 리뷰 1. 문제점 - 로 제대로 구간 제대로 나누지 않음 - margin과 padding을 뒤늦게 이해함. 구분을 못했다......,,,,,,,,,,,,,,,,, - 하나씩 차근차근 하면 되는데 자꾸 이거했다 저거했다 혼잡함 => 하나씩 정리하고 생각하면서 하기!! - float을 제대로 사용하지 못함 ......?! 오른쪽으로 가야하는데 자꾸 오른쪽+밑으로 이동한다. 2. 해결 방법 - 맨 처음 박스로 구간나누고 시작하기!! 그래야 덜 헷갈림 - 위에서부터 하나씩 해나가기 - float:right; margin-top: -770px; 이용해 위로 보냈으나 다른 해결방법이 있을듯함 간단한 건데 틀렸다. 다음부턴 주의해서 구간 나누기! 3. 주의할 점 - 박스 제대로 묶어라 - 도저히 모르겠으면 검색!!! 혼자.. 2022. 9. 24.
2022-09-23 javascript 사용방법, 함수정의 javascript 사용방법 1. 바디태그 내부에서 정의하고 사용하는 방법 2. 헤드태그 안에 스크립트를 정의하고 사용 -> 주로 해드태그에 함수를 정의하고 필요한 곳에서 호출해서 사용 3. 태그 내부에서 inline으로 삽입(이벤트핸들러를 통해서 연결) // "내용입력"이라는 버튼을 클릭하는 순간 "팝업으로 뜰 내용"이라는 팝업창이 뜨도록 함수정의 4. 외부문서에 정의하고 연결해서 사용하기 -> js파일 따로 만들어서 경로를 연결하기 // js파일 /** * */ function hello() { alert("hello"); } * onclick : 클릭이 될 때 "내용" 실행하겠습니다. -> onclick = " 함수명() " * document.write : 내용을 문서(페이지)에 출력함 2022. 9. 24.
2022-09-22 CSS우선순위, 속성 [선택자] 특정한 것을 독립적으로 표현하고자 할 때 사용. 3. id선택자 (자바스크립트, 제이쿼리) - 웹문서를 구성하는 다양한 컨텐츠 중에서 하나의 컨텐츠만 식별해서 사용하고 싶은 경우 사용하는 선택자 - class속성을 정의해서 사용하는 경우는 여러 번 적용해서 사용할 수 있으나 id속성은 하나의 문서에서 한 번만 적용하여 사용할 수 있다. (유일한 컨텐츠를 정의할 목적으로 사용, 하나의 문서에서 하나의 id만 정의한다.) - css에서 id속성은 레이아웃을 설정하는 용도로 많이 사용 첫 번째, 정의 id속성으로 정의 내용 두 번째, 선택자 #id명 { 속성1 : 속성값; 속성2 : 속성값2 ...} 4. 스타일시트의 우선순위 !important h.. 2022. 9. 22.

티스토리툴바