DDOstory

👨‍🎓 JSXReact를 사용하여 개발할 때 거의 필수적으로 사용A syntax extension to javaScript자바스크립트의 확장 문법JavaScript + XML/HTML을 결합한 것const element = Hello, world!;👨‍🎓 JSX 역할XML/HTML 코드를 JavaScript로 변환하는 과정을 거침// JSX를 사용한 코드class Hello extends React.Component{ render(){ return Hello {this.props.toWhat}; }}ReactDom.render( document.getElementById('root'));// JSX를 사용하지 않은 코드class Hello extends React.compone..

💍 Array 객체변수 하나에 여러 개의 값을 넣을 수 있음한꺼번에 자료를 모아서 처리할 수 있다는 장점 때문에 자바스크립트에서는 배열을 사용한 프로그래밍이 많음배열에 활용하는 많은 속성과 함수가 미리 정의되어 있는 객체  💍 Array 객체로 배열 만들기초깃값이 없을 때var myArray = new Array();초깃값이 있을 때 var numbers = ["one","two","three","four"]; // 리터럴을 사용한 배열var numbers = new Array("one", "two", "three", "four"); // Array 객체를 사용한 배열💍 배열을 만들어보고 배열을 사용하여 메서드 적용 방법 살펴보기concat은 2개 이상의 배열을 연결해서 새로운 배열을 만듬새로운 배..

공부 자료 : 인프런 Do it 자바스크립트 입문 https://www.inflearn.com/course/do-it-javascript/dashboard🪫사용자 정의 객체리터럴 표기법을 사용한 객체 만들기var book = { title : "자바스크립트", author : "고쌤", pages : 500, price: 15000, info : function( ){ alert(this.title + "책의 분량은 " + this.pages + "쪽 입니다."); }};🪫생성자 함수를 사용해 객체 만들기function Book(author, pages, price, title){ this.author = author; this.pages = pages; ..

📟 객체자료를 저장하고 처리하는 기본 단위자바스크립트 프로그램에서 인식할 수 있는 모든 대상복합 자료형 (객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함됨)이름과 값이 들어있는 하나를 프로퍼티라고 함var book = { titile: "자바스크립트", // 제목 author: "홍길동", // 저자 pages: 500, // 쪽수 price: 15000 // 가격}📟 내장 객체브라우저 안에 미리 정의되어 있는 객체웹 브라우저를 컨트롤하기 위해서 웹브라우징 요소들을 모두 하나의 객체로 만들어 놓은 것   문서 객체 모델 (DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 택스트 필드 등을 모두 별도의 객체로 관리브라우저 객체 모델 : 웹 브라우저 정보를 객체로 ..

⛑️ 마우스 이벤트 click사용자가 HTML 요소를 마우스롤 눌렀을 때 이벤트 발생dblclick사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트 발생mousedown사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트 발생mousemove사용자가 요소 위에서 마우스 포인트를 움직일 때 이벤트 발생mouseover마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 mouseout마우스 포인터가 요소를 벗어날 때 이벤트 발생mouseup사용자가 누르고 있던 마우스 버튼에서 손을 땔 때 이벤트 발생⛑️ 폼 이벤트 blur폼 요소에 포커스를 잃었을 때 이벤트 발생change목록이나 체크 상태 등이 변경되었을 때 이벤트 발생 , , 태그에서 사용focus폼 요소에 포커스가 놓였을 때 이벤트 발생 ,..

🎵 함수 표현식 - 익명 함수이름이 없는 함수함수 자체가 ;식 (Expression)'이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있음var add = function(a, b){ // 함수 선언 후 변수 add에 할당 return a + b;}////////////////////////////////////////////var sum = add(10, 20); // 익명 함수 실행 후 결과값을 변수 sum에 저장sum // 변수 sum값 확인30중간에 필요한 함수가 있을 경우에 작성하고 변수를 할당하여 사용할 수 있음🎵 함수 표현식 - 즉시 실행 함수여러 번 실행한 함수는 아닌데 어느 순간에 바로 그 자리에서 실행이 될 필요성이 있을 때 선언과 동시에 실행이 되도록 ..

🎥  함수하나의 기능을 실행하기 위해서 여러 개의 명령이 사용되었을 때 하나의 덩어리로 묶은 다음에 이름을 부여한 것여러 개의 동작을 묶어놓은 명령들 🎥  함수를 사용하면 좋은 점각 명령의 시작과 끝을 명확하게 구별할 수 있음함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있음 🎥  함수 선언 (함수 정의)함수가 어떤 명령을 처리해야 할지 미리 알려주는 것function 예약어를 처리하고, { } 안에 실행할 명령 작성function addNumber( ){ var sum = 10 + 20; console.log(sum);} 🎥  함수 호출함수 이름을 사용해 함수 실행addNumber()30 🎥  함수 위치함수를 선언해 놓기만 하면, 선언한 위치와 상관없이 함..

🎞️  제어문소스가 입력될 순서가 작성된 순서에 따라서 하나씩 처리소스 실행 순서를 결정하는 명령문조건에 따라 순서 조절 => if문, if.....else문, switch문, 조건 연산자반복 횟수 조절 => for문, while문, do....while문소스 흐름에 영향을 주는 문 => continue문, break문🎞️  조건이 많을 때 switch문으로 흐름 조절switch 예약어 오른쪽에 괄호와 함께 값을 확인할 변수 지정여러 가지 조건 값은 case문 다음에 콜론을 붙여 지정하고, 해당 값일 때 실행할 명령도 콜론 다음에 나열, 둘 이상의 명령을 실행한다면 명령을 중괄호 {}로 묶음break문을 사용해서 명령을 실행한 다음에는 완전히 switch문을 빠져나오도록 소스를 작성사용자가 입력한 값..

🔌 산술 연산자사칙 연산자+ (더하기) => 두 값을 더함- (뺴기) => 앞의 값에서 뒤의 값을 뺌* (곱하기) => 두 값을 곱함/ (나누기) => 앞의 값을 뒤의 값으로 나눔나머지 연산자% (나머지) => 앞의 값을 뒤의 값으로 나눈 나머지의 값을 구함증감 연산자++ (증가) => 변수값을 1만큼 증가-- (감소) => 변수값을 1만큼 감소🔌 할당 연산자변수에 값을 할당하는 연산자사칙 연산자와 조합해서 사용할 수 있음+= : y += x / y = y + x-= : y -= x / y = y - x*= : y *= x / y = y * x/= ; y /= x / y =  y / x%= : y %= x / y = y %= x🔌 연결 연산자문자열과 문자열을 연결+ 기호 사용🔌 형변환숫자형과 문자..

💾  자료형컴퓨터가 처리하는 자료의 형 처리하려는 하는 자료가 어떤 종류인지를 이해하는 방법컴퓨터에서 어떤 자료를 입력할 때 숫자인지 문자인지 구별이 가능하지만 컴퓨팅은 그 자체를 인식할 수는 없음JavaScript의 자료형은 크게 2가지💾  기본 자료형primitive type : 값이 하나인 유형, 값을 한가지만 가질 수 있는 유형 number(숫자) => 따옴표 없이 표기한 숫자를 나타냄string(문자열) => 작은 따옴표나 큰 따옴표로 묶어 나타냄boolean(논리형) => 참과 거짓이란 두 가지 값만 가지고 있는 유형undefined => 자료형을 지정하지 않았을 때의 유형, 변수를 선언만 하고 값을 정의하지 않으면 undefined가 됨null => 값이 유효하지 않을 때의 유형💾  복..