Frontend/JavaScript
-
🤔 HTML에서 직접 수정 안 하고 자바스크립트로 element를 가져오는 이유? A. 서버와 통신하거나 복잡한 일 처리시 js 파일에서 처리함. 그때 HTML의 element들 다룰 수 있어야 복잡한 처리 원활하게 가능 A. 서버 - 클라이언트 사이 주고받는 것은 자바스크립트를 통해 이루어짐 (강의 댓글 참조. 궁금했던 내용인데 딱 댓글에 있어서 가져옴) 📒 DOM(Document Obejct Model) - 자바스크립트는 HTML과 상호작용하기 위해서 사용 - HTML의 element를 자바스크립트를 통해 변경하고 읽을 수 있음 - document는 브라우저에 이미 존재하는 object, console에서 사용 가능 document.title = "Hi" //title이 "Hi"로 바뀜 documen..
[JavaScript] 노마드코더 강의 정리 - DOM🤔 HTML에서 직접 수정 안 하고 자바스크립트로 element를 가져오는 이유? A. 서버와 통신하거나 복잡한 일 처리시 js 파일에서 처리함. 그때 HTML의 element들 다룰 수 있어야 복잡한 처리 원활하게 가능 A. 서버 - 클라이언트 사이 주고받는 것은 자바스크립트를 통해 이루어짐 (강의 댓글 참조. 궁금했던 내용인데 딱 댓글에 있어서 가져옴) 📒 DOM(Document Obejct Model) - 자바스크립트는 HTML과 상호작용하기 위해서 사용 - HTML의 element를 자바스크립트를 통해 변경하고 읽을 수 있음 - document는 브라우저에 이미 존재하는 object, console에서 사용 가능 document.title = "Hi" //title이 "Hi"로 바뀜 documen..
2023.06.18 -
📒 console, return const calculator = { plus: function (a, b) { console.log("hello"); //실행 return a + b; //return하고 나면 이 코드는 끝남 console.log("bye"); //실행 안 됨 } - 함수 : 어떤 일을 수행하고 그 결과를 알려주는 것 - 함수 밖에서 결과를 코드 안 화면에 출력하고 싶으면 return 사용 - console은 단순히 기록해서 보여주는 것 console.log : 냉장고 안의 망고. 볼 수는 있음 return : 망고를 꺼내 먹는다 📒 각종 함수 const age = prompt("How old are you?"); //1. 코드 실행을 멈춤 //2. CSS 수정 못함 //3. 어떤 브라..
[JavaScript] 노마드코더 강의 정리 - console, return📒 console, return const calculator = { plus: function (a, b) { console.log("hello"); //실행 return a + b; //return하고 나면 이 코드는 끝남 console.log("bye"); //실행 안 됨 } - 함수 : 어떤 일을 수행하고 그 결과를 알려주는 것 - 함수 밖에서 결과를 코드 안 화면에 출력하고 싶으면 return 사용 - console은 단순히 기록해서 보여주는 것 console.log : 냉장고 안의 망고. 볼 수는 있음 return : 망고를 꺼내 먹는다 📒 각종 함수 const age = prompt("How old are you?"); //1. 코드 실행을 멈춤 //2. CSS 수정 못함 //3. 어떤 브라..
2023.06.17 -
📒 내용 정리 JavaScript vs Python 표기 방식 JavaScript : myNameIs -> Camel Case Python : my_name_is -> Snake Case var vs const vs let var : 오래된 버전에서 사용. 재선언과 재할당이 가능해서 현재는 잘 사용 안 함 const : 기본적으로 사용하고 변수 업데이트 필요시 let 사용 let : 변수 재할당 가능 null, undefined null : 아무것도 아닌 값, 자연적으로 발생하지 않음 변수 안에 어떤 값이 “없다”는 것을 알려줌 undefined : 변수를 생성만 하고 값을 할당하지 않음, 메모리는 존재하나 값이 들어가있지 않음 array todoList = [”shopping”, “taking a sh..
[JavaScript] 노마드코더 강의 정리 - Array, Objects📒 내용 정리 JavaScript vs Python 표기 방식 JavaScript : myNameIs -> Camel Case Python : my_name_is -> Snake Case var vs const vs let var : 오래된 버전에서 사용. 재선언과 재할당이 가능해서 현재는 잘 사용 안 함 const : 기본적으로 사용하고 변수 업데이트 필요시 let 사용 let : 변수 재할당 가능 null, undefined null : 아무것도 아닌 값, 자연적으로 발생하지 않음 변수 안에 어떤 값이 “없다”는 것을 알려줌 undefined : 변수를 생성만 하고 값을 할당하지 않음, 메모리는 존재하나 값이 들어가있지 않음 array todoList = [”shopping”, “taking a sh..
2023.06.16 -
DOM이란? - 문서 객체 모델(The Document Object Model)은 HTML, XML 문서의 프로그래밍 인터페이스 - 자바스크립트를 이용해 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 - 웹 문서와 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소를 하나의 객체로 정의 DOM 사용 이유 - 자바스크립트를 사용해 객체에 접근해서 원하는 부분을 수정할 수 있기 때문 DOM Tree - 문서 노드(Document Node) : Dom Tree에 접근하기 위한 시작점(entry point) - 요소 노드(Element Node) : HTML 요소 표현 - 어트리뷰트 노드(Attribute Node) : HTML 요소의 속성 - 텍스트 노드(Text ..
[JavaScript] Dom 객체DOM이란? - 문서 객체 모델(The Document Object Model)은 HTML, XML 문서의 프로그래밍 인터페이스 - 자바스크립트를 이용해 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 - 웹 문서와 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소를 하나의 객체로 정의 DOM 사용 이유 - 자바스크립트를 사용해 객체에 접근해서 원하는 부분을 수정할 수 있기 때문 DOM Tree - 문서 노드(Document Node) : Dom Tree에 접근하기 위한 시작점(entry point) - 요소 노드(Element Node) : HTML 요소 표현 - 어트리뷰트 노드(Attribute Node) : HTML 요소의 속성 - 텍스트 노드(Text ..
2023.06.15 -
1. 기본형 함수 function addNumber() { let a = 1; let b = 2; let sum = a + b; alert("결괏값: " + sum) } addNumber() //함수 호출 2. 익명함수 - 함수 자체가 식이라 함수를 변수에 할당 가능 - 다른 함수의 매개변수로 사용 가능 let sum = function (a, b) { return a + b; }; document.write(sum(10, 20)); //함수 이름 대신 변수(sum)를 이용해 함수 실행 3. 즉시 실행 함수 - 한 번만 실행할시 함수 정의와 동시에 실행 //(1)매개변수 없는 경우 (function () { let userName = prompt("이름을 입력하세요."); document.write( "..
[JavaScript] 함수 표현식1. 기본형 함수 function addNumber() { let a = 1; let b = 2; let sum = a + b; alert("결괏값: " + sum) } addNumber() //함수 호출 2. 익명함수 - 함수 자체가 식이라 함수를 변수에 할당 가능 - 다른 함수의 매개변수로 사용 가능 let sum = function (a, b) { return a + b; }; document.write(sum(10, 20)); //함수 이름 대신 변수(sum)를 이용해 함수 실행 3. 즉시 실행 함수 - 한 번만 실행할시 함수 정의와 동시에 실행 //(1)매개변수 없는 경우 (function () { let userName = prompt("이름을 입력하세요."); document.write( "..
2023.06.13