🦎 JavaScript

연산자 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 지수 연산 등을 수행해 하나의 값을 만든다. 연산의 대상을 피연산자라고 한다. 피연산자는 값으로 평가될 수 있는 표현식 피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가될 수 있는 표현식 // 산술 연산자 5 * 4 // 20 // 문자열 연결 연산자 'My name is' + 'Lee' // 'My name is Lee' // 할당 연산자 color = 'red' // red //비교 연산자 3 > 5 // false //논리 연산자 true && false // false // 타입 연산자 typeof 'Hi' // string 피연산자가 "값"이라는 명사의 역할을 한다면 연산자는 "피연..

데이터 타입 데이터 타입(줄여서 '타입'이라고 함)은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참(true)와 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된7번째 타입 객체 타입 객체, 함수, 배열 등 숫자 탕비의 값 1과 문자열 타입의 값 '1'은 비슷해 보이지만 전혀 다른 값이다. 숫자 타입의 값은 주로 산술 연산을 위해 생성하지만 문자열 타입은 주로 텍스트를 화면에 출력하기 위해 생성한다. 확..

값(value) 값은 식(표현식)이 평가되어 생성된 결과, 변수에 할당하되는 것은 값 평가 식을 해석해서 값을 생성하거나 참조하는 것 // 10 + 20은 숫자 값 30을 생성한다. 10 + 20; //30 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석 가능 // 변수에는 10+20이 평가되어 생성된 숫자 값 30이 할당 관리 var sum = 10 + 20; 위 예제의 sum 변수에 할당 되는 것은 10 + 20이 아니라 결과 값인 30이다. 즉, 변수 이름 sum이 기억하는 메모리 공간에 저장된 것은 30이다. (10 + 20)은 할당 이전에 평가되어 값을 생성해야 한다. 위의 예제처럼 식으로 생성할 수 있지만 가..

변수 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘에 저장한다. 메모리(Memory) 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체 메모리 셀 하나의 크기는 1바이트(8비트), 컴퓨터는 메모리 셀의 크기 즉 1바이트 단위로 데이터를 저장하거나 읽어들임. (각 셀은 메모리 주소를 갖음) 메모리에 저장되는 모든 값은 2진수로 저장 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 프로그래밍 언어에서 값을 저장하고 참조하는 매커니즘 값의 위치를 가리키는 상징적인 이름 상징적인 이름인 변수는 프로그래밍 언어의 컴파일러/ 인터프리터에 의해 값이 저장된 메모리 공간의..

확인 단추를 클릭하면 응용 프로그램이 실제로 뭔가를 해보도록 하겠다. 이게 코드가 DOM에서 발생하는 뭔가에 반응하는 첫번째 시간이 될거다. 일단 그렇게 하려면 이벤트 리스너(event listener)가 필요하다. Event는 페이지에서 일어나는거다. 예를 들어 마우스 클릭, 마우스 무빙, 키 프레스 등 Event listener의 특징은 이벤트가 발생하길 기다렸다가 반응할 수 있다. 이벤트를 듣기 위해서는 먼저 이벤트가 발생해야할 요소를 선택해야 한다. 핑크색 박스안에 있는 이 버튼 요소의 이벤트를 들어야 한다. 이 Check 버튼말이다. 내가 관심있는 클릭이 여기서 발생할 것이다. 이 버튼을 클릭하면 뭔가 일어나야 한다. document.querySelector('.check'); html 파일로 ..

'use strict'; console.log(document.querySelector('.message').textContent); querySelector을 이용해서 이 메시지 요소를 선택했다. 선택된 요소로부터 텍스트 콘텐츠도 얻었다. 텍스트 콘텐츠를 얻는 것 외에 요소의 콘텐츠도 설정할 수 있게되었다. document.querySelector('.message').textContent = '👏 Correct Number!'; console.log(document.querySelector('.message').textContent); DOM 조작 DOM 메모의 텍스트 콘텐츠를 조작했다. document.querySelector('.number').textContent = 13; document.qu..

DOM 문서 개체 모델을 의미한다. 기본적으로 HTML 문서를 구조적으로 나타낸다. JS를 이용해 HTML 요소와 스타일에 엑세스해 조작할 수 있게 해준다. 예를 들어, 텍스트도 바꾸고 HTML 특성도 바꾸고 JS에서 CSS 스타일도 바꿀 수 있다. ∴ DOM은 기본적으로 HTML 문서와 JS 코드 사이의 연결점 HTML 페이지로 로드되면 브라우저가 자동으로 DOM을 생성한다. 이런 나무 구조물에 저장한다. 이 트리에서는 각각 HTML 요소가 하나의 개체이다. A paragraph with a link A second paragraph 사진은 tree structure이다. HTML의 각 요소에서 볼 수 있듯이 요소 노트와 DOM 트리가 있다. JS를 이용해 각 노드에 액세스하고 상호작용할 수 있다. D..

const jonas = [ "Jonas", //0번째 요소 "Schmedtmann", //1번째 요소 2037 - 1991, //2번째 요소 "teacher", //3번째 요소 [("Michael", "Peter", "Steve")], //4번째 요소 ]; 이 코드를 이용해서 for루프를 이용해 이 배열을 통과시킬 수 있다. 5가지 요소만 기록하면 된다. 일단 for문을 작성해보겠다. 일단 시작은 카운터부터 시작한다. for (let i = 0; 전통적인 counter 변수 이름은 오랫동안 i였다. 여기서도 i를 사용한다. 이번에는 0부터 시작한다. 왜? 배열은 0에 기반을 두고 있기 때문이다. 배열의 요소를 읽을 때 루프 코드를 작성하면 이해가 될것이다. for (let i = 0; ; i++) 모든..

if else문에서 컨트롤 구조가 있다고 언급했었다. 다른 통제 구조 중 하나가 고리(the for loop)이다. JS에서 기본 사항 섹션의 마지막 주제는 Loop이다. Loop는 모든 프로그래밍 언어의 근본적인 측면이다. 기본적으로 반복적인 작업을 자동화하게 해주기 때문이다. 즉 반복해서 수행해야 하는 작업들인것이다. 체육관에 가면 웨이트 트레이닝을 한다고 가정해보자. 특정 역도 운동 10번을 반복한다고 치자 어떻게 표현해야 할까? console.log("Lifting weights repetition 1 🏋"); console.log("Lifting weights repetition 2 🏋"); console.log("Lifting weights repetition 3 🏋"); console.log..

함수는 값의 또 다른 유형이다. 함수가 그냥 값이라면 그 값이 함수인 키 값 쌍을 만들 수 있다. 이 말은 즉 개체에 함수를 추가할 수 있다. calcAge: function(birthYear) { return 2037 - birthYear } }; const calcAge: function(birthYear) { return 2037 - birthYear } }; 첫번째 구문과 두번째 구문의 차이점이 있다. 첫번째 구문의 calcAge는 두번째 구문의 calcAge와 같은 정규 변수가 아니다. jonas의 객체의 속성이다. 따라서 위에서는 콜론을 사용하지만 나머지는 완전히 똑같다. 개체에 부착된 모든 기능은 메서드이다. function calcAge(birthYear) { return 2037 - bi..