[JavaScript] 자바스크립트 기초

jiyehyeon·2022년 9월 10일

JavaScript

Javascript

목록 보기

1/3

자바스크립트란?

이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어
객체 기반 스크립트 언어
- 객체(Object)란? : 속성(key)과 값(value)로 구성된 집합
```
var person = {
	name: "osori",
	age: "26"
}
```
- 스크립트 언어란? : 최종 사용자가 동작을 수정할 수 있는, 예를 들어 개발자 도구에서 코드를 작성할 수 있는 언어
인터프리터 언어
- 컴파일러가 없고 한 줄씩 기계어로 번역되는 언어
ES6
- ECMAScript: ECMA라는 기관이 만든 스크립트 언어

자바스크립트 변수

var: ES6 이전에 사용된 변수 선언 키워드, 재할당 가능, 재선언 가능
let: ES6부터 사용되는 변수 선언 키워드, 재할당 가능, 재선언 불가능
const: ES6부터 사용되는 변수 선언 키워드, 재할당 불가능, 재선언 불가능
- 반드시 선언과 동시에 초기화
변수명을 지을때는 camelCase로 (파이썬은 언더바(_)로)

자바스크립트 데이터 타입

String
- 문자열 자료형
- 인덱싱을 사용해 문자 추출 가능
- 주요 프로퍼티
- 주요 메서드
Number
Function
Array
Object
Boolean
undefined: 변수 안에 데이터를 입력하지 않은 상태
null: 임의로 변수 안에 빈 데이터를 삽입한 상태

자바스크립트 사용 방법

inline 방식

HTML 태그 내 속성으로 입력

짧은 내용을 작성할 때 사용

<input type="button" value="버튼" onclick="alert("버튼을 클릭했습니다");"/>

internal 방식

HTML 파일 내에 <script> 태그를 이용해 작성

<script>
	function clickBtn(){
		alert("버튼을 클릭했습니다");
}
</script>

html파일의 <script> 태그 안에 src의 속성값으로 js파일 입력
```
<body>
	<script src="index.js"></script>
</body>
```

모달 띄우기

alert: 경고창
- 메세지 일방적 전달
prompt: 질문창
- 사용자가 입력한 값을 반환받음
confirm: 확인창
- true 혹은 false를 반환받음

프로퍼티(Property)와 메서드(Method)

문자열 프로퍼티와 메서드

var str1 = "Hello World";

str1.length;     // 문자열 길이 반환
str1.charAt(0);  // 0번째 문자 반환

var str2 = str1.split(" "); // " " 기준으로 슬라이싱한 배열 반환
>> str2: ["Hello", "World"]

var str3 = str2.join(","); // 배열을 문자열로 변환
>> str3: "Hello,World"

배열 프로퍼티와 메서드

var fruit = ["사과", "배", "포도"];

fruit.length;        // 데이터 개수
fruit.push("딸기");   // 배열 뒤에 데이터 삽입
fruit.unshift("레몬") // 배열 앞에 데이터 삽입

fruit.pop();         // 배열 뒤의 데이터 제거
fruit.shift();       // 배열 앞의 데이터 제거

math 라이브러리 내의 메서드

Math.abs(-3);     // 절댓값 => 3
Math.ceil(0.3);   // 올림 => 1
Math.floor(10.9); // 깎음 => 10
Math.random();    // // 0과 1 사이의 랜덤한 실수 반환

변수 타입 변환

parseInt("12.3");  // 정수 타입으로 변환 => 12
parseFloat("12.3") // 실수 타입으로 변환 => 12.30

콘솔에서 값 입력 받기

readline 모듈

모듈 불러오기
```
const readline = require("readline");
```

입출력 인터페이스 객체 생성

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

입력 받은대로 출력하기

rl.on("line", (line) => { 
      // 한 줄씩 입력받은 후 실행할 코드
     // 입력된 값은 line에 저장된다.
      rl.close(); // close가 없으면 입력을 무한히 받는다.
  });

자바스크립트 연산자

비교 연산자
- == 는 값만 비교하는 연산자
- === 는 값과 타입을 비교하는 연산자

jiyehyeon

https://github.com/jiyehyeon

다음 포스트