본문 바로가기
728x90

JS/JavaScript

JS/JavaScript 2022. 4. 28. [JavaScript] 함수 사용자 정의 함수 - 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미 - 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행하기 때문에 코드를 재활용할 수 있음 함수 선언식 function 함수명(매개변수1, 매개변수2 ..) { ... return 값; } 함수 표현식 const 함수명 = function(매개변수1, 매개변수2..) { ... return 값; } ✅ 자바스크립트는 함수를 변수(상수)에 저장할 수 있음 ✅ 자바스크립트는 script 태그를 만나면 자바스크립트를 읽고 선언된 함수, var로 선언된 변수를 먼저 메모리에 저장 함수1 함수 - 2 호이스팅(hoisting) - 코드가 실행되기 전 변수선언/함수선언을 최상단으로 끌어 올려진 것 같은 현상 - var 변..
JS/JavaScript 2022. 4. 28. [JavaScript] 배열의 반복 for in 문 for(변수 in 객체) { 객체의 요소(프로퍼티) 갯수만큼 반복할 문장; ... } ✅ 변수 : 키(인덱스)를 저장 for of 문 for(변수 of 객체) { 객체의 요소(프로퍼티) 갯수만큼 반복할 문장; ... } ✅ 변수 : 값을 저장 forEach 문 오직 Array 객체에서만 사용가능 배열명.forEach(function(item, index, arr)) { 배열의 요소의 갯수만큼 반복할 문장; ... } 배열의 반복
JS/JavaScript 2022. 4. 28. [JavaScript] Array 객체의 메소드 (프로퍼티 메소드) Array 객체의 메소드(프로퍼티 메소드) push() : 배열의 요소를 추가 pop() : 배열의 마지막 주소에 있는 값을 제거 shift() : 배열의 첫번째 주소에 있는 값을 제거 concat() : 두개의 배열을 합침 join() : 배열 요소 사이에 원하는 문자를 삽입 reverse() : 배열을 역순으로 재배치 sort() : 배열을 오름차순으로 정렬 Array 객체의 메소드
JS/JavaScript 2022. 4. 28. [JavaScript] 자바스크립트 배열 배열(array) - 자료구조 중 하나 - 이름과 인덱스로 참조되는 정렬된 값의 집합 - 배열에서의 위치를 가리키는 숫자는 인덱스라고 부름 - 자바스크립트의 객체 자바스크립트의 특징 - 배열 요소의 타입이 고정되어 있지 않음 [1, 1.5, true, '김사과'] - 배열 요소의 인덱스가 연속적이지 않아도 됨 let arr = []; // 배열의 길이를 정하지 않아도 됨 arr[0] = 1; arr[2] = 10; arr[1]은? undefined // 타입이 정해져 있지 않기 때문. 배열의 생성 let 배열명; // undefined 배열명 = [요소1, 요소2, 요소3 ..]; let arr; arr = [100, 80, 40, 70, 60]; ---- --- --- --- --- 인덱스 0 1 2 ..
JS/JavaScript 2022. 4. 28. [JavaScript] 자바스크립트 제어문 1. 조건문 - if if ~ else if ~ else문 if문 예제 국어, 영어, 수학점수를 입력받아 아래와 같이 학생성적 프로그램을 만들어보자. (단, 학점은 평균을 기주으로 90점이상 A, 80점이상 B, 70점이상 C, 60점이상 D, 나머지는 F) 출력 이름 : 김사과 국어점수 : 90 영어점수 : 80 수학점수 : 70 총점 : xxx 평균 : xxx 학점 : xxx 학생 성적 프로그램 3 - switch switch문 switch문 예제 국어, 영어, 수학점수를 입력받아 아래와 같이 학생성적 프로그램을 switch문으로 만들어보자. (단, 학점은 평균을 기주으로 90점이상 A, 80점이상 B, 70점이상 C, 60점이상 D, 나머지는 F) 출력 이름 : 김사과 국어점수 : 90 영어점수 :..
JS/JavaScript 2022. 4. 28. [JavaScript] 자바스크립트 연산자 연산자 1. 산술 연산자 +, -, *, /, %, **(거듭제곱) 2 ** 2 = 4 2. 비교 연산자 , >=, a = a + 10; 4. 증감 연산자 ++a, --a, a++, a-- 5. 논리 연산자 &&, ||, ! 6. 비트 연산자 &, |, ^, 7. 삼항 연산자 상수 = 조건식 ? 결과1 : 결과2 ----- ------ true false
JS/JavaScript 2022. 4. 28. [JavaScript] 자바스크립트 대화 상자 대화 상자 alert() - 사용자에게 메시지를 보여주고 확인을 기다림 alert(메시지); 대화상자 confirm() - 사용자에게 메시지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 반환 const 상수명 = confirm(메시지); // 상수에 true 또는 false가 저장. 대화상자 prompt() - 사용자에게 메시지를 보여주고 사용자가 입력한 문자열을 반환 - 입력받은 데이터는 문자열 타입 const 상수명 = prompt(메시지); // 상수에 입력한 문자열이 저장 대화상자 대화상자 문제. 국어, 영어, 수학점수를 입력받아 아래와 같이 학생성적 프로그램을 만들어보자. (단, 콘솔에 출력) 출력 이름 : 김사과 국어점수 : 90 영어점수 : 80 수학점수 : 70 총점 : xxx ..
JS/JavaScript 2022. 4. 28. [JavaScript] 자바스크립트의 타입 변환 자바스크립트의 타입 변환 - 변수는 타입이 고정되어 있지 않음 - 변수에 다른 타입의 값을 대입 가능 let a = 10; ... a = "자바스크립트"; 1. 자동 타입변환 - 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환 const a = "20"; // 문자열형 const b = "10"; // 문자열형 let result = a + b; // 2010, 문자열 연결 result = a - b; // 10 result = a * b; // 200 result = a / b; // 2 const c = "자바스크립트"; result = c - a; // NaN ✅ NaN(Not a Number) - 정의되지 않은 값이나 표현할 수 없는 값 - 숫자로 변환할 수 없는 연산을 시..
[JavaScript] 자바스크립트(visual Studio Code)
JS/JavaScript 2022. 4. 28. [JavaScript] 자바스크립트(visual Studio Code) 자바스크립트 확장프로그램 설치 - JavaScript (ES6) code snippets(ECMA 스크립트) es 검색 ->JavaScript (ES6) snippets 설치 자바스크립트 - 객체 기반의 스크립트 프로그래밍 언어(인터프리터) - 웹브라우저 내에서 주로 사용, 다른 응용프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있음 - 대소문자 구별 - HTML문서 내에서 사용할 때는 태그 안에 작성 자바스크립트의 출력 - HTML 문서에 출력 document.write() 함수를 통해 출력 document.write('안녕하세요'); - console에 출력 console.log() 함수를 통해 출력 console.log('안녕하세요'); 자바스크립트의 주석 - 한줄 주석 : // - 여러줄..
JS/JavaScript 2022. 4. 28. [JavaScript] 자바스크립트 역사 최초의 웹사이트 : 팀 버너스리가 1990년에 만든 http://info.cern.ch/ 최초의 브라우저 : 일리노이 대학교 1993년 모자이크 1994년 모자이크(넷스케이프) 커뮤니케이션스 -> 넷스케이프(모질라, 1994) 1995년 브렌든 아이크 - 10일만에 모카(자바스크립트)를 개발 -> 라이브스크립트 -> 자바스크립트(자바하고는 관계x) 1996년 표준화(ECMA 스크립트) 2000년 2005년 2006년 jQuery 라이브러리 출시 2008년 구글 크롬 출시 2009년 strict mode 추가(버전 5) 2015년 class, 새로운 문법이 많이 추가(버전 6) (브라우저에서 지원. 새로운 변수 let) 2016년 버전 7 2017년 버전 8 2018년 버전 9 2019년 버전 10 7부터..

티스토리툴바