DDOstory

자바스크립트에서 '변수'란? 변수(Variable)는 데이터를 저장하는 공간이에요.이름을 붙여 어떤 값들을 담아두고,필요할 때 그 이름을 불러서 사용할 수 있어요. 예를 들어let name = "도희"; 위 코드에서는 name이라는 변수에 "도희"라는 문자열을 저장했어요.이제부터 name을 사용하면 "도희"를 의미하게 돼요.변수 선언 방식 : var, let, const 자바스크립트에서는 변수를 선언할 때세 가지 키워드를 사용할 수 있어요.키워드재할당 가능재선언 가능스코프var✅ 가능✅ 가능함수 스코프let✅ 가능❌ 불가블록 스코프const❌ 불가❌ 불가블록 스코프각각 자세히 살펴보자 var (거의 안 씀)var nickname = "deco";var nickname = "dodo"; // 재선언도 가능..

자바스크립트는 왜 필요한가?웹 페이지를 처음 만들던 시절에는 HTML만 있어도정보 전달에는 큰 문제가 없었어. 하지만 사용자들이 웹에서 점점 더 많은 걸 기대하게 되면서,정적인 HTML과 CSS만으로는 부족한 상황이 찾아왔지. 예를 들어 이런 것들이야:버튼을 클릭하면 창이 뜨는 기능사용자가 입력한 값을 검사해서 경고 메시지를 보여주는 기능스크롤하면 애니메이션이 재생되는 기능실시간으로 서버에 데이터를 요청해서 새로운 내용을 불러오는 기능이런 인터렉티브한 기능을 가능하게 만들어주는 것이 바로 자바스크립트(JavaScript)자바스크립트는 어떤 언어인가?자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 인터프리터 기반의 프로그래밍 언어 초기에는 단순한 스크립트 언어였지만, 지금은 웹 개발의 핵심 ..

10. 자바스크립트 브라우저 객체 모델😺 브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것  브라우저 창의 크기, 주소 표시줄, 히스토리를 포함하고 있는 것😺 Window 객체의 속성자바스크립트 객체 중 최상위 객체😺 Window 객체의 함수 alert()나 prompt()도 window 객체의 함수 -> window.alert(), window.prompt()window 객체는 기본 객체이기 때문에 window를 생략하고 alert(), prompt()로 사용할 수 있음 😺 Window 객체의 함수 alert()나 prompt()도 window 객체의 함수 -> window.alert(), window.prompt()😺 Naviga..

💍 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) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 택스트 필드 등을 모두 별도의 객체로 관리브라우저 객체 모델 : 웹 브라우저 정보를 객체로 ..

🎵 함수 표현식 - 익명 함수이름이 없는 함수함수 자체가 ;식 (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🔌 연결 연산자문자열과 문자열을 연결+ 기호 사용🔌 형변환숫자형과 문자..