목록Code개발일지 (103)

Daily Front_Minhhk

[JS] 유효성검사(기본로그인폼), 이벤트객체[onsubmit, onchange, onmouse~, e.preventDefault]

유효성검사 - 기본 로그인 폼 적용 학습 목표 DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다. querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다. oncilck, onkeyup 속성이나 addEventListener 메서드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다. 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다. 이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다. 유효성 검사에 필요한 기술 요소를 익힐 수 있다. 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다. 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none) 유효성 검사에서 활용할 수 있는 정규 표현식의 기초 ..
Code개발일지 2022. 11. 11. 14:51
[JS] DOM과JS, createDocumentFragment(), node vs element, children과 childNodes의 차이, children과 childNodes의 차이, appendChild()

DOM과 JavaScript의 차이에 대해 이해할 수 있다. DOM은 플랫폼이나 구체적인 언어 구현에 종속된 것이 아닌 언어 독립적 인터페이스다. 반드시 자바스크립트로 구현할 필요 없이 DOM 인터페이스 구현만으로 DOM을 조작할 수 있다. DOM 과 자바스크립트 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용된다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document objec..
Code개발일지 2022. 11. 10. 20:17
[JS] DOM[createElement(), append(), querySelector(),setAttribute(’속성명’, ’속성값’), remove() ]

DOM(Document Object Model) HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model, DOM으로 HTML을 조작할 수 있습니다. 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다. HTML 해석을 잠시 멈춘 웹 브라우저는 요소를 먼저 실행합니다. 요소는 등장과 함께 실행된다는 사실을 꼭 기억하세요. DOM 구조를 조회할 때에는 console.dir이 유용합니다. console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력합니다. 학습 목표 DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE) DOM을 ..
Code개발일지 2022. 11. 10. 20:04
[JS] koans 복습[(암묵,명시)타입변환, 호이스팅, 화살표함수, …etc]

😁 뭔가 장황하게 나열한거 같은데,, 나름 헷갈렸던 것 위주로 정리를 해보았다! 생각보다 알고 있는 것이라고 생각한 것들이 오히려 들어가서 문제를 풀어보니 나는 제대로 알고 있던 것이 아니었고, 안다고 착각하고 대충 쓰고 있었다ㅋㅋㅋ 정신 차리고~~ 차근히 다시 하면 되니까 드ㅡㅡ가자!! 암묵적 타입 변환(Implicit coercion) || 타입 강제 변환(Type coercion) let a = 1 let b = true console.log(a+b) // 2 typeof(a+b) // 'number' let a = 1 let b = '1' console.log(a+b) // 11 typeof(a+b) // 'string' let a = 12 let b = '1' // + 제외한 -, *, / 는 ..
Code개발일지 2022. 11. 9. 15:30
[JS] ...Spread/Rest/구조분해할당

학습목표 spread/rest 문법을 사용할 수 있다. 구조 분해 할당을 사용할 수 있다. 개념학습 spread/rest 문법 spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 질문: 어떤 값을 리턴하나요? --- 6 rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용하다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + cur..
Code개발일지 2022. 11. 8. 13:55
[JS] 클로저

"변수 및 함수 선언의 형태” 클로저 함수 클로저 함수의 특징 클로저 함수의 첫 번째 특징은 클로저 함수는 함수를 리턴하는 함수로 함수를 리턴하는 함수가 클로저의 형태를 만든다. 클로저 함수의 두 번째 특징은 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다. 클로저의 활용 데이터를 보존하는 함수 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수를 사용할 수 있다. HTML 문자열을 만들 수 있다. (클로저는 이처럼 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 해줍니다.) 정보의 접근 제한 클로저 모듈 패턴을 내부 함수를 단 하나만 리턴하는 것에 그치지 않고, 객체에 담아 여러 개의 내부 함수를 리턴하도록 만든다. 다만 외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다라는 ..
Code개발일지 2022. 11. 7. 15:33
이전 Prev 1 ··· 11 12 13 14 15 16 17 18 Next 다음