분류 전체보기20 9. [JavaScript] 표준 내장 객체 - Math 🏃🏻♀️ 표준 내장 객체 [ Math, 수학 ] Math의 모든 멤버(속성과 메서드) 정적임. Math객체(Math 클래스)에 사용해야함 MDN - Math - 🏰 const math; const pi = 3.1415926535; const num0 = 123; const num1 = -123; const num2 = 60; const num3 = 10; - Math.abs(num); absolute(절대값)의 줄임말로 숫자의 절대값은 +,-를 제거한 값 즉 인수가 음수이면 양수로 변환해서 반환 (양수와 0은 그대로 반환) console.log(Math.abs(num0)); // 123 console.log(Math.abs(num1)); // 123 - Math.ceil(num); 소수점을 올림해서 정.. 2023. 8. 1. 8. [JavaScript] 표준 내장 객체 - Number 🏃🏻♀️ 표준 내장 객체 [ Number, 숫자 ] 🏰 const number; const pi = 3.1415926535; const piStr = '3.1415926535'; const num0 = 123456; const numStr = '123456'; const numNat = NaN; const str = 'Hello world'; const nul = null; - .toFixed(num); 대상이 부동소숫점일때 소수점 자리를 인수만큼 잘라서 문자 데이터로 반환 console.log(pi); // numberData 3.1415926535 console.log(pi.toFixed(2)); // stringData 3.14 // parseFloat(); 숫자형식의 문자데이터를 숫자데이터로 반.. 2023. 7. 31. 7. [JavaScript] 표준 내장 객체 - String 🏃🏻♀️ 표준 내장 객체 멤버 - 객체의 속성과 메소드를 통틀어 칭함 [ String, 문자 ] MDN - string의 멤버 🏰 const welcome; const welcome = 'Welcome to the world of Poppy!'; // length 123456789012345678901234567890 // index 012345678901234567890123456789 // backCounting -098765432109876543210987654321 (음수, 모든 숫자 앞에 -) - .length 특수문자, 띄어쓰기를 포함한 문자열의 갯수(길이)를 숫자 데이터로 반환 console.log(welcome.length); // 30 - .includes('문자데이터', index);.. 2023. 7. 27. 6. [JavaScript] 클래스 🏃🏻♀️ class [ 프로토 타입 ] prototype 자바스크립트는 prototype(이웅모 선생님 블로그 - prototype) 기반 자바스크립트의 모든 객체와 배열은 상위 객체와 연결되어 상위 객체의 속성과 메소드를 상속(공유)되어 사용할수있음 이때 상위 객체를 프로토타입이라고 함 최상위 배열, 객체에 내장되어있는 메소드(MDN - 배열 내장 메소드)나 프로토타입(.prototype)으로 새로 등록하는 함수(.함수명 = function() {})를 prototype메소드(prototype속성)이라고 함 함수안에 this를 사용 할 경우 fucntion키워드를 사용하는 일반함수로 등록 -> 화살표함수의 this는 정의가 다르기때문 프로토타입메소드는 인스턴스에서만 사용가능 생성자함수로 실행이되서 호.. 2023. 7. 27. 5. [JavaScript] 함수 🏃🏻♀️ 함수 function [ 함수의 정의 ] - 함수의 구조와 호출 함수명 매개변수(인수로 들어온 데이터를 매개변수로 받음) function add (a, b) { 반환값 return a + b; } 인수 add(3, 5); // 함수 호출 5 인수 = Argument / 매개변수 = Parameter 함수호출시 인수로 작성된 데이터가 매개변수에 할당됨 -> 인수가 할당된 매개변수는 함수의 코드블럭{} 안에서만 유효(지역변수) - 호이스팅 MDN - Hoistiong 자바스크립트는 최상단에서 -> 하단 순서로 코드를 읽고 실행하는데 호이스팅이 발생하면 함수 선언문을 유효범위의 최상단으로 끌어올려 먼저 다 읽음 즉, 호이스팅이 발생하는 함수의 선언문(함수의 로직)이 함수호출 아래에 있어도 함수가 실.. 2023. 7. 25. 4. [JavaScript] 연산자와 구문 🏃🏻♀️ 연산자와 구문 [ 연산자 ] 값과 값사이에 연산자 사용시 연산자를 연산자 값(데이터)을 피연산자라고 함 피연산자 연산자 피연산자 연산자 피연산자 3 + undefined && '할롱방구' - 산술 연산자 +: 더하기 -: 빼기 *: 곱하기 /: 나누기 %: 나머지 (2로 나눴을때 나머지로 짝수(0)와 홀수(1) 구분시 유용) - 할당 연산자 =: 이퀄기호로 변수에 값 할당 및 재할당 const: 재할당 불가 let: 재할당 가능 const a = 3; a = a + 2; // Uncaught TypeError: Assignment to constant variable. let b = 5; b = b + 12; // 17 +=: 더하기 할당연산자 (=+ 없음 X) 왼쪽변수 데이터 값에 오른쪽 피.. 2023. 7. 22. 3. [JavaScript] 데이터 타입 🏃🏻♀️ 데이터 타입 [ 원시형 ] 변경할수없는값 - Sring / 문자열데이터 리터럴 방식의 문자열데이터 리터럴: 기호를 통해 데이터를 만듦 (eg. '', ""...) const singleQuotes = 'Single quotes String'; const doubleQuotes = "Double quotes String"; const templateLiterals = `Template Literals String. Not ${singleQuotes}.`; '', ""취향에 따라 사용하며 MDN - 템플릿리터럴 방식은 문자 중간에 데이터를 채워넣을때 ${}안에 보간하여 사용하며 모든 데이터는 문자열데이터로 반환됨 - Number / 숫자데이터 숫자데이터 .. 2023. 7. 22. 2. [JavaScript] NodeJs와 npm 프로젝트 개발서버실행 및 빌드 🖥️ NodeJs 브라우저의 자바스크립트 엔진에서만 작동하던 자바스크립트를 브라우저 외의 환경(컴퓨터등)에서도 동작(실행)할수 있도록 자바스크립트 엔진을 독립시킨 실행환경(런타임) -> 자바스크립트로 브라우저에서 웹사이트 동작 + 컴퓨터 제어 가능한 환경을 만들어줌 [ 🤵🏻♀️ npm ] node package manager 전 세계의 개발자들(개인, 팀, 회사등)이 Node.js환경에서 사용할수있는다 다양한 패키지(모듈, 기능)을 만들어 npm에 업로드하면 내 프로젝트에 npm을 사용해 설치하고 관리함 프로젝트진행시 HTML에서 link나 script 태그로 불러왔던 reset.css, 구글의 meterial아이콘, Lodash, GSAP, Swiper등의 자바스크립트 플러그인이 패키지 이런 패키지(.. 2023. 7. 22. 1. [JavaScript] 개요 🏃🏻♀️ JavaScript JavaScript는 데이터를 기준으로 사고 위키백과 - ECMA스크립트 : 자바스크립의 표준 줄여서 ES 제로베이스 넘버링 사용 (index) [네이밍 컨벤션] 프로그래밍 표기법 dash-case: -, 꼬치에 끼워논것처럼 보인다고 kebab-case라고도함 -> HTML/CSS에서 주로 쓰임 snake_case: _, 뱀처럼 생겨서 snake -> HTML/CSS에서 주로 쓰임 camelCase: 제일 앞글자 소문자로 시작해 단어 구분을 대문자로 사용 낙타같이 생겨 camel -> JS에서 주로사용 PascalCase: 제일 앞글자 대문자로 시작하고 camelCase 같음 - Zero-basde Numbering 0부터 숫자를 시작 // 0일요일 1월요일 2화요일 3수요.. 2023. 7. 22. 1. 웹과 HTML 기본 개념(Tip. 특수문자이름) 웹 표준 W3C(표준화 제정 단체)에서 제정한 권고안에 해당하는 기술이나 규칙을 의미 - 표준화 제정 단계 1. 초안 2. 후보권고안 3. 제안권고안 4. **권고안** 에 해당하는 기술 - 태그의 필수 속성을 지정하지 않으면 웹표준에 어긋남 - CSS 동작가상선택자 :: 로 표기하는게 웹표준 의미있는 마크업(Semantic Markup) 콘텐츠 데이터의 의미(가장 잘 설명및 표현해줄수있는)와 맞는 HTML 태그로 감싸 의미있는 요소 문서를 작성하는 것 SEO에도 도움이됨 [ MDN - Semantic ] 검색 엔진 최적화 (SEO) search engine optimization 웹사이트가 검색에 더 잘보기에 하기위한 작업 [ MDN - SEO ] 크로스 브라우징 브라우저를 만드는 회사가 다양해 조금 .. 2023. 7. 22. 이전 1 2 다음
