SH's 개발일기

* form validation (폼 검증) - form 데이터를 서버에 제출(submit) 하기 전에 클라이언트에서 1차적으로 값의 유효성을 체크해주는게 좋다. - 이때 JavaScript 를 사용하여 검증합니다. ex) - '필수 항목'들은 입력이 되었는지? - 숫자만 입력하는 경우 숫자로만 입력되었는지? - n글자 이상이 입력되었는지? - checkbox 의 경우 n개 이상이 체크 되었는지? - 특정포맷 (이메일, url 등..) 으로 입력되었는지? * 의 onsubmit 이벤트 처리 코드 : true 를 return 하면 정상적으로 submit 됨 : false 를 return 하면 submit 안됨 ★주의! 안의 에 type을 특별히 명시 안하면 submit 버튼으로 작동한다! - focus()..

JavaScript 로 다양한 form element 들의 '값을 가져 올수도' 있어야 한며, 반대로 '값을 입력해야 할수도' 있다. JavaScript 는 form element 들을 접근할수 있는 다양한 방법들을 제공한다. (특히 name 값 활용!) ★ form 에서 읽어온 값은 무조건 string 이다! * 객체 가져오기 1. 일반적인 input 값 .value 2. checkbox 의 값 .checked 로 판단 3. checkbox 동일 name 이 여럿인 경우 4. radio : 이 또한 동일 name 으로 구성. 3. 과 유사. 5. : 단일 .value 사용 result += "좋아하는차1: " + frm['cars'].value + " "; 6. : multiple 3. 과 유사 .se..

* Javacript JavaScript 는 client(브라우저)에서 구동되는 스크립트 프로그램. 주로 HTML 페이지 내의 element 들의 동적인 변화, 폼 데이터 검증, 브라우저 제어, AJAX 등에 사용. HTML element 에 접근 할때는 id, class, name, tag명 을 통해서 접근가능. JavaScript 를 HTML 에 적용하는 방법 3가지 1. inline 방식 : 태그의 onxxx 속성(이벤트) 값으로 JavaScript 코드 동작. 2. internal 방식 : 태그 안에 JavaScript 코드 기입 3. external 방식 :

정규 표현식 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions 문자열에 특정 문자 조합과 대응시키기 위해 사용되는 패턴 정규표현식.test('비교할 문자열') --> 정규표현식에 부합하면 true / 아니라면 false 리턴 ^a 'a'로 시작됨 \d 숫자 a{n} 'a'가 n번 반복 a{n,m} 'a'가 n번 이상, m번 이하 반복 a$ 'a'로 종료됨 [a-z] 'a'부터 'z'중 하나 a+ 'a'가 한번 이상 반복됨 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미 - 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행 - 자바스크립트는 비동기식 ..

노드(node) - HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장 - 노드 트리는 노드들의 집합이며 노드간의 관계를 보여줌 노드의 종류 문서 노드(document node) : 문서 전체를 나타내는 노드 요소 노드(element node) : HTML 요소는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드 속성 노드(attribute node) : HTML 요소의 속성은 속성 노드이며 요소 노드에 관한 정보를 가지고 있음 텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드 주석 노드(comment node) : 모든 주석은 주석 노드 노드간의 관계 parentNode 부모노드 childNodes 자식 노드 리스트 firstChild 첫번째 자식 노드 last..

프로토타입(prototype) - 자바 스크립트의 모든 객체는 프로토타입이라는 객체를 포함하고 있다. - 모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. - 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. - 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 Object.prototype과 자신의 객체를 프로토타입으로 가진다. const mycar = new Car(); mycar h2 태그요소들이 객체로 담겨있는 배열 [제목, ] getElementById() : 해당 아이디의 요소를 선택 getElementsByClassName(): 해당 클래스에 속한 요소를 모두 선택 getElementsByN..

변수의 범위(scope) 자바스크립트에서는 객체, 함수가 모두 변수에 담길 수 있다. 변수의 범위는 해당 변수에 접근할 수 있는 영역이다. 1. 지역변수 - 함수 내부에서 선언된 변수, { } 영역 내부에 선언된 변수 - 지역 변수는 변수가 선언된 영역 내에서 유효하고 그 영역을 벗어나게 되면 메모리에서 사라진다. function f1(){ let data = 10; } console.log(data); //undefined if(조건식){ let data2 = 20; } console.log(data2); //undefined 2. 전역변수 - 함수 외부에서 선언된 변수 - 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며 웹 페이지가 닫혀야만 메모리에서 사라진다. let data = 10; f..

continue - 반복문 내에서 아래쪽의 부분을 건너뛰고 다음 반복으로 넘어가게 하는 문장 반복문{ 반복중인문장 조건문{ continue; } ... } 중첩 반복문 - 반복문이 2개이상 겹쳐있는 문장 for(let i=0;i

삼항 연산자 (조건식)?(값1):(값2) 삼항연산자는 사용부분 통째로 값 경우의 수가 두가지일 때 사용하는 것이 좋다. 제어문 - 프로그램 내에서 주어진 조건식의 결과에 따라 별도의 명령을 수행하도록 제어하는 문장 - 위에서 아래로만 흐르던 프로그램의 흐름을 제어하기 위한 문장 조건문(선택 제어문) if ~ else if ~ else switch ~ case ~ default 반복문(반복 제어문) while for 조건문 - 조건에 따라 경우의 수를 나눌 때 - 프로그램의 흐름을 여러갈래로 나눌 때 - 사용자에게 선택지를 주어줬을 때 - 특정한 상태를 물어볼 때(입력한게 6글자 이상이니? 입력한게 짝수이니?) if문 if(조건식1){ 조건식1의 결과가 true일때 실행 } else if(조건식2){ 조건..

자료형 5. 심볼형(Symbol) - 유일하고 변경 불가능한 기본값을 만드는 타입이다. - 객체 속성의 Key값으로 사용할 수 있다. const symbol1 = Symbol("apple"); 자바스크립트의 형변환 값의 타입을 변화시키는것 1. 자동 형변환(암시적, 묵시적) 숫자 + 문자열 ---> 문자열 10 + "20" ----> "1020" 10 + "" ----> "10" 숫자 - (숫자로 이루어진)문자열 ----> 숫자 10 - "20" ----> -10 10 * "20" ----> 200 10 / "20" ----> 0.5 10 * "Hello" ----> NaN *NaN(Not a Number) - 정의되지 않은 값이나 표현할 수 없는 값 - 숫자로 변환할 수 없는 연산을 시도한 경우 2. ..