코딩/웹 개발 20

자바스크립트 함수 (1)

함수 함수는 ①특정 작업을 수행하도록 설계된 코드 블록에 ②이름을 붙인 것이다. 이름을 붙인 이유는 호출하기 위해서이다. 즉 함수는 재사용하기 위해 호출될 수 있는 코드 블록이다. '무언가'가 호출하면 함수가 실행된다. 1. 왜 함수를 쓰는가 코드를 재사용(reuse) 하기 위해서이다. 코드를 한 번 정의해 두고 여러 번 사용하기 위해서이다. 데이터에 이름을 부여하는 것이 변수라면, 코드에 이름을 붙이는 것이 함수이다. 구분 변수 함수 차이점 데이터에 이름을 부여 코드에 이름을 부여 let number = 3 function sayHi(){ console.log("Hi") } sayHi() 반드시 함수를 호출해야 한다 공통점 함수 이름에는 문자, 숫자, 및 특수 기호 2개($_)가 사용된다 괄호 안에 쉼..

코딩/웹 개발 2021.12.21

자바스크립트 while 반복문, for 반복문

반복문 반복문 은 비슷하거나 동일한 구문을 반복해서 수행해 주는 구문이다. 반복문의 종류(Different Kinds of Loops) 종류 내용 while 문 명시된 조건이 true 인 동안 코드를 실행한다. for 문 지정한 수만큼 반복한다 for/in 반복 ← 객체의 속성을 통해(the properties of an object) for/of 반복 ← 반복 가능한 객체의 값(the values of an iterable object) do/while 반복 ← 지정된 조건이 참인 동안(while a specified condition is true) 반복문의 대표적 두 가지 while 문 for 문 두 반복문은 구조 및 동작 방식에서 차이가 있다. while 문 while문은 주어진 조건이 참일 동안..

코딩/웹 개발 2021.12.21

자바스크립트 조건문

자바스크립트 조건문 조건문이라는 주어진 조건에 참 또는 거짓 여부에 따라 각각 다른 할 일을 정의하는 구문이다. 여기서 조건은 boolean 데이터를 반환하거나 또는 boolean 데이터로 해석될 수 있는 연산식이다. 조건문 = 제어문 통사론(Syntax) 내용 if문 if(조건) { 참일 때 할 일 } 조건이 참일 때 할 일 if-else문 if(조건) { 참일 때 할 일 }else{ 거짓일 때 할 일 } 조건이 참일 때 할 일을+ 조건이 거짓일 때 할 일 else는 if에 종속적이다: else만으로 따로 구문을 만들 수 없다(if에 붙여서만 가능하다) if는 소문자로 써야 한다: 대문자(If 또는 IF)로 쓰면 JavaScript 오류가 표시된다. if 문 if 문은 가장 일반적인 형태의 조건문이다...

코딩/웹 개발 2021.12.20

자바스크립트 비교연산자

자바스크립트 비교 연산자 비교 연산자는 주어진 2항을 비교한다. 주어진 2항을 비교해서 큰지 작은지 또는 같은지 다른지 여부를 계산하기 때문에, 비교하는 작업 은 자바스크립트에서는 연산의 일종이다. 비교 연산의 공통적 특징 비교 연산식은 항상 불리언 데이터를 반환한다. 비교(대소 비교 혹은 가 비교)는 하나의 질문이다. 자바스크립트는 질문에 대하여 참 또는 거짓으로 대답한다. (예시) 2가 3 보다 크냐? false! 4와 4가 같니? True! 비교 연산식의 결과는 언제나 boolean 데이터이다. 1. 대소 비교 반드시 부등호가 등호보다 앞에 쓰여야 한다. 구분 연산자 내용 사용사례 대소비교 > 크다(greater than) A>B =B

코딩/웹 개발 2021.12.20

querySelector, getElementById, textContent

document, 메소드(methods) Window의 document는 DOM에 진입하기 위한 인터페이스(interface)이다. 브라우저 객체 Window의 document: 지금 브라우저에 렌더링 되고 있는 문서를 의미하는데, Window의 document 속성을 이용하여 이 문서에 접근이 가능하다.| Window의 document를 이용하여 웹페이지의 정보를 얻고, 요소(elements)의 변경 등 문서를 조작할 수 있다. 문서 인터페이스 기능 도큐먼트는 문서(html, xml, svg 등)에 대한 공통의 속성과 메소드를 제공한다. 다양한 API(Application Programming Interface)를 제공한다. 도큐먼트가 제공하는 속성과 메소드는 그 종류가 많다. 요소 선택에 필요한 메소..

코딩/웹 개발 2021.12.20

DOM이란

DOM이란 웹페이지가 로드될 때 브라우저가 생성하는 문서 객체모델(DOM: Document Object MODEL) 웹브라우저는 html문서를 로딩한 후 그 내용을 해석해서 화면에 보여준다. 그 과정이 렌더링이다. 렌더링 하는 과정에서 코드 해석 과정 해석 과정에서 브라우저는 html 요소들을 트리 형태로 구조화한다. 이를 문서 객체(DOM: Document Object MODEL = 문서 객체모델)이라 하는데, 결국 브라우저는 이 DOM을 토대로 화면에 웹 콘텐츠들을 렌더링 하는 것이다. 트리 형태란: 가장 상위 태그가 html태그이다. html 코드들은 한 태그가 다른 태그를 포함하는 형태이다. 요소가 다른 요소 안에 포함되는 형태가 트리 형태의 계층 구조를 이룬다. html은 body의 부모이고 ,..

코딩/웹 개발 2021.12.20

JavaScript 데이터 타입: null, undefined, 그리고 Boolean의 완벽 가이드 (2024)

JavaScript의 데이터 타입 중 null, undefined, 그리고 Boolean은 자주 혼동되지만, 각각 고유한 의미와 사용 목적을 가지고 있습니다. 이 글에서는 이러한 데이터 타입의 차이점과 사용법을 예제와 함께 명확히 정리합니다.JavaScript 데이터 타입의 이해: null, undefined, 그리고 Boolean1. null과 undefined의 차이점nullnull은 값이 없음을 의도적으로 지정할 때 사용됩니다. 변수에 특정 값이 없음을 명확히 표시할 때 활용합니다.let number = 0; // 숫자 0은 하나의 값으로 존재number = null; // 데이터가 없음을 명시적으로 지정console.log(number); // 출력: nullundefinedundefined는 값..

코딩/웹 개발 2021.12.19

연산자, 산술연산자, 대입연산자, 복합대입연산자

연산자 연산이란 '식이 표시하는 일정 규칙에 따라 계산'하는 것을 말한다 산술 연산은 두 항의 계산 결과를 반환한다. 대입 연산은 항상 오른쪽 항이 먼저 계산되어 왼쪽 항에 대입한다. 주로 변수 초기화에 사용된다. 연산자가 여러 개 사용되는 경우 우선순위가 적용된다. 1. 산술 연산자 연산자(Operator) 의미(Description) 예제 + 더하기/ Addition 2+3=5를 반환 - 빼기/ Subtraction 6-2=4를 반환 * 곱히가/ Multiplication 3*4=12 ** Exponentiation () / 나누기/ Division 2/4=2 % 나머지/ Modulus (Division Remainder) 12%5=2 ++ Increment -- Decrement 2. 대입 연산자 ..

코딩/웹 개발 2021.12.19

템플릿 리터럴

템플릿 리터럴 문자열 안에 데이터 표현식을 삽입할 수 있는 표현법이다. 백틱(`)을 이용한 표헌 백틱은 물결 키(~)를 shift 누르지 않고 누르면 입력 가능하다. 변수나 메소드 모두 템플릿 리터럴에 삽입될 수 있다. 기존문자열과 차이점 기존 문자열 템플릿 리터럴 차이점 문자열 안에 표현식을 삽입할 수 있다 = 문자열의 내용에 데이터 삽입 가능 달러 사인($)과 플레이스 홀더({})를 기입 문자열 안에 달러 사인($)과 플레이스 홀더({})를 기입하고 그 안에 데이터를 기입하면 된다. 그 데이트는 문자열의 일부가 된다. 예시 입력 내용 아래 코드표: 변수이므로 값의 변경이 가능하다. let lit = "따옴표" console.log(lit); str = `백틱 백틱` console.log(lit); 콘..

코딩/웹 개발 2021.12.19

자바스크립트 상수

1. 상수 상수는 변하지 않는 값이다. constant의 약자이다. constant: 변함없는, contancy: 불변성 변수와 상수의 차이점과 공통점 차이점과 공통점 변수 상수 차이 변하는 값 변하지 않는 값 값은 변할 수 있다. 단 하나의 값(데이터)을 위한 것 값(데이터)의 변경 불가 선언과 초기화를 ①따로 해도 되고 ②동시에 해도 된다. 선언과 초기화를 ②동시에 해야 한다. (하나의 구문으로 1번에 처리) const x = 데이터; 공통점 지정된 데이터 대신 사용 가능 이름 짓기 규칙 let 이름 = 데이터; 이름 짓기 규칙 let 이름 = 데이터; 선언과 초기화를 동시에 해야 한다. 선언과 초기화를 따로 하면 아래 그림처럼 오류가 난다. const aa; aa=10; console.log(aa)..

코딩/웹 개발 2021.12.19