본문 바로가기

Javascript

 (101)
딕셔너리_ 키(key)-밸류(value) 값 🌐 딕셔너리 : 키(key)-밸류(value) 값 let a = {'name':' 영수','age':27} // 딕셔너리 선언. 변수 이름은 아무렇게나 가능! console.log(a) let a = {'name':' 영수','age':27} console.log(a['name']) # 리스트(자료형)와 딕셔너리의 조합 꺾쇠와 키-밸류, 이 두가지로 이뤄진 형태의 자료 많이 사용! let a = [ {'name':' 영수','age':27}, {'name':' 철수','age':22}, {'name':' 영희','age':14} ] console.log(a) let a = [ {'name':' 영수','age':27}, {'name':' 철수','age':22}, {'name':' 영희','age':14..
리스트 a[0] / a.length 🌐 리스트 & 딕셔너리 let a = ['사과','수박','딸기','감'] // 리스트를 선언. 변수 이름은 아무렇게나 가능! console.log(a) let a = ['사과','수박','딸기','감'] console.log(a[0]) 프로그래밍 언어는 0부터 수를 센다 # 리스트 길이 구하기 let a = ['사과','수박','딸기','감'] console.log(a.length)
변수&기본연산 let a = 2 🌐 변수 & 기본연산 프로그래밍 언어는 기계와 사람이 소통하기 위해 만든 언어로 사람이 썼기 때문에 우리 눈에 친숙하게 쓰여있다. 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다) let으로 변수를 선언한다. let a = 2 let b = 3 console.log(a+b) let a = '대한' let b = '민국' // 문자열은 작은 따옴표로 감싸준다. console.log(a+b) // 변수는 값을 저장하는 박스. // 처음 변수를 저장하려면, let을 앞에 붙여준다. // 한 번 선언했으면 다시 선언하지 않고 값을 넣는다. # 사칙연산, 그리고 문자열 더하기가 기본적으로 가능
Javascript / alert / console.log Javascript 는 웹을 움직이게 하는 코드 jQuery는 html 뼈대를 선택해서 쉽게 조작할 수 있는 코드모음, 라이브러리 Fetch는 짧은 코드로 서버에 요청을 보내고 받아올 수 있다. 자바스크립트(Javascript)란? 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 표준언어 기초문법은 자바스크립트 뿐만이 아니라 개념자체는 어느 프로그래밍 언어나 거의 비슷하다. 클라이언트가 서버에 요청하면 서버가 클라이언트에게 HTML+CSS+Javascript를 준다. 모든 브라우저는 기본적으로 Javascript를 알아 듣게 설계되어 있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다. ✅ 자바스크립트 기초 # 자바스크립트 - HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기..
배열과 반복문 & 요소 추가와 삭제 1️⃣ 배열 선언 후 요소 추가와 삭제 배열을 선언하고 난 이후에 새로운 요소를 더하거나 빼야 할 때 이 때 사용하는 것이 push 와 pop 이라는 메소드 const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] rainbowColors.push('ultraviolet') // 배열의 마지막에 ultarviolet 추가 console.log(rainbowColors) // ultraviolet이 추가된 rainbowColors 출력 rainbowColors.pop() // 배열의 마지막 요소 ultraviolet을 제거 console.log(rainbowColors) // ultraviolet이 제거된 r..
배열(Array)의 선언 & 데이터 & 길이 1️⃣ 배열(Array) 이란? 자바스크립트에서 데이터를 표현하기 위한 방법으로 기본타입과 객체를 배웠다. 이걸로도 분명 많은 것들을 할 수 있다. 하지만 같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는 데이터의 수만큼 변수들을 선언해줄 수밖에 없었다. 이 때 쓰는 것이 바로 배열이다. 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입이라고 기억해두시면 좋다! 2️⃣ 배열의 선언 숫자 1, 2, 3, 4, 5로 이루어진 배열을 선언하는 방법은 아래처럼 두 가지가 있다. // 1번째 방법 const arr1 = new Array(1, 2, 3, 4, 5) // 1번째 방법은 앞서 우리가 클래스를 활용해 객체를 만든 것과 똑같다. Array라는 클래스를 활용해서 객체를..
메소드 (method) & 객체 리터럴(Object Literal) 1️⃣ 메소드 (method) 클래스에는 데이터(값)를 나타내는 속성 뿐만 아니라 함수와 같이 특정 코드를 실행할 수 있는 [메소드]도 정의할 수 있다. 객체를 생성한 후, 만들어진 객체의 [메소드]를 호출하면 된다. // 클래스 선언 class Product { constructor(name, price) { this.name = name this.price = price } printInfo() { // 함수와 같이 특정 코드를 실행할 수 있는 메소드 console.log(`상품명: ${this.name}, 가격: ${this.price}원`) // 템플릿 리터럴을 활용해 가지고 있는 객체의 속성들을 찍어줌. } } // 객체 생성 및 메소드 호출 const notebook = new Product(..
객체(Object) 타입 & 클래스(Class) 선언 1️⃣ 객체(Object) 타입 관련있는 데이터들을 묶어서 한번에 잘 나타낼수 있는 데이터 타입. // 노트북1을 것을 표현하기 위한 데이터들 // 변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음 const notebook1Name = 'Macbook' const notebook1Price = 2000000 const notebook1Company = 'Apple' // 이름, 가격, 제조사와 같은 정보를 다 담을 수 있는 좀 더 큰 범위의 데이터 타입이 있으면 좋지 않을까? 이 때 사용하는 데이터 타입이 바로 객체 타입이다. 객체를 좀 어렵게 얘기하면 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것'..
함수 호출 코드 흐름 😅어렵! ✅ 함수 호출시 어떻게 코드가 전개되는건지 헷갈린다. 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달 함수 calculateAvg의 바디 코드가 실행됨. 이 때 1번에서 전달한 매개변수의 값이 함수를 선언할 때 썼던 매개변수명인 price1, price2에 할당되었다고 보면 됨. 함수의 바디 코드가 최종적으로 변수 avg를 리턴하고 있고, 이것이 변수 avg1에 할당됨. ✅ 세 개의 물건가격을 매개변수로 전달받아 평균값을 리턴하는 함수를 정의하고, 그 함수를 호출해서 평균값을 출력! function calculateAvg(price1, price2, price3) { const avg = (price1 + price2 + price3) / 3 return avg..
함수 선언 / 호출 😅 어렵! ✅ 함수는 반복되는 특정 작업을 수행하는 코드의 집합! const priceA = 1000 const priceB = 2000 // 두 상품가격의 합과 평균을 구해서 출력해야 하는 코드 작성 const sum1 = priceA + priceB console.log(`두 상품의 합계는 ${sum1}입니다.`) const avg1 = sum1 / 2 console.log(`두 상품의 평균은 ${avg1}입니다.`) const priceC = 3000 const priceD = 4000 // 이번에도 두 상품가격의 평균을 구해서 출력해야 한다면? 위와 동일한 코드를 또 작성... const sum2 = priceC + priceD console.log(`두 상품의 합계는 ${sum2}입니다.`) const a..

티스토리툴바