[Java Script] 자바스크립트 기초

[Java Script] 자바스크립트 기초

2022. 8. 18. 21:37ㆍFE/JavaScript

자바스크립트

이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어

HTML → 웹사이트 구조

CSS → 디자인

자바스크립트 활용 범위

Iot, 하이브리드앱, 서버 개발 등

자바스크립트 변수

변수 안의 데이터 확인 방법

var fruit = "apple"

console.log(fruit);

console.log()는 콘솔에서 변수값을 출력한다.

※ 브라우저에서 F12 (개발자 검사) - console탭 선택하면 웹 브라우저에서 값을 볼 수 있다.

변수값을 웹 화면에 출력하는 방법

var num = 1;

document.write(num);

document.write()는 웹 화면에 변수값을 출력한다.

자바스크립트 사용 방법

<body>
    <script src="index.js"></script>
</body>

자바스크립트 데이터 타입

String : 문자열

Number : 숫자

Function : 함수

Array : 배열

Object : 객체

Boolean : 불린

undefined : 정의되지 않음

null : 널

문자열 데이터 타입

큰 따옴표 또는 작은 따옴표 안에 있는 데이터

var str1 = "JavaScript";
var str2 = "JavaScript's a programming language";
var str3 = 'JavaScript\'s a programming language';

역슬래쉬 다음 따옴표를 쓰면 문자로 인식한다.

숫자 데이터 타입

숫자만 입력하면 숫자 데이터

var num1 = 10;
var num2 = -10;
var num3 = 3.14;

함수 데이터 타입

함수를 변수로 받을 수 있다.

// 1번
var func1 = function(){ // 함수 데이터 타입 선언 및 초기화
    console.log("Func1");
}

// 2번
fuction func1() { // 함수 정의
    console.log("Func1");
}

func1(); // 1번, 2번 두 경우 모두 함수 호출 할 때

배열 데이터 타입

비슷한 성격을 갖고 있는 데이터를 하나의 변수 안에서 관리

var fruits = ["사과", "배", "수박"];
console.log(fruits);

객체 데이터 타입

property, method, data로 구성된다.

여러 종류의 데이터 타입을 넣을 수 있다.

var student = {
    name : "홍길동",
    age : 20,
    skills : ["JavaScript", "HTML", "CSS"],
    sum : function(num1, num2) { return num1 + num2;}
}

property : 객체가 가지고 있는 데이터

method : 객체가 가지고 있는 함수

객체 데이터 접근

var student = {
    name : "홍길동",
    age : 20,
    skills : ["JavaScript", "HTML", "CSS"],
    sum : function (num1, num2) {return num1 + num2;}
}

console.log(student.name);
console.log(student['name'];

Boolean 데이터 타입

true 또는 false를 받는 데이터 타입

var t = true;
var f = false;

undefined 데이터 타입

변수 안에 데이터를 입력하지 않은 상태(데이터 없는 경우)

var unde;

null 데이터 타입

개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태

var empty = null;

데이터 타입의 프로퍼티와 메서드

문자열 프로퍼티와 메서드

var str1 = "Hello World";
str1.length; // 문자열 길이
str1.charAt(0); // 문자열 인덱스 0번째 문자
str1.split(" "); // 공백 기준으로 문자열 스플릿 후 배열로 반환

배열 프로퍼티와 메서드

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

fruit.length; // 배열 길이

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

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

math 라이브러리 연산 메서드

Math.abs(-3); // 절댓값
Math.ceil(0.3); // 올림
Math.floor(10.9); // 내림
Math.random(); // 임의의 숫자

문자를 숫자로 변환하는 메서드

parseInt("20.6"); // 정수 형태로 소수점은 버림
parseFloat("20.6"); // 실수 형태로 변환

연산자

산술 연산자

console.log(20 + 10); // 합
console.log(20 - 10); // 빼기
console.log(20 * 10); // 곱
console.log(20 / 10); // 몫
console.log(20 % 10); // 나머지

문자열로 표현된 숫자도 산술 연산자 사용 가능하다.

단, + 는 문자열 합치기다.

다른 연산들은 숫자 데이터와 동일하게 연산한다.

증감 연산자

var num = 10;

console.log(++num); // 출력 전에 증가
console.log(--num); // 출력 전에 감소

console.log(num++); // 출력 후 증가
console.log(num--); // 출력 후 감소

비교 연산자

// 동등 
console.log(10 == 20); // 같은지
console.log(10 === 20); // 데이터 타입과 값이 같은지
console.log(10 !== 20); // 값이 같지 않은지

// 대소 비교
console.log(10 > 20);
console.log(10 >= 20);
console.log(10 < 20);
console.log(10 <= 20);

10 == "10" 은 true를 반환한다.

논리 연산자

console.log(10 === 10 && 20 === 30); // AND
console.log(10 === 10 || 20 === 30); // OR

조건문

if (조건) { 수행할 코드}

var a = 20;
var b = 40;

if (a < b){
    console.log("a는 b보다 작다.");
}

if (조건) { 참일 때 수행 코드} else { 거짓일 때 수행 코드}

var a = 20;
var b = 40;

if (a > b){
    console.log("a는 b보다 크다");
}else{
    console.log("a는 b보다 작거나 같다.");
}

if (조건1) {조건1 만족할 때 수행 코드} else if (조건2) {조건2 만족할 때 수행 코드} else {그 외 수행 코드}

var a = 20;
var b = 40;
var c = 60;

if (a > b) {console.log("a는 b보다 크다.");}
else if(b > c) {console.log("b는 c보다 크다.");}
else if(a < c) {console.log("a는 c보다 작다.");}
else if(b < c) {console.log("b는 c보다  작다.");}
else{ console.log("모든 조건을 만족하지 않는다.");}

else if 문은 가장 첫 번째로 true가 나오는 조건의 명령문을 실행한다.

반복문

for (초기화한 변수값;조건;증감) {수행할 코드}

for (var i = 0; i<10; i++){
    console.log(i);
}

while (조건) {수행할 코드}

var num = 0;

while (num < 10){
    console.log(num);
    num++;
}

do {수행 코드} while (조건);

var i = 12;

do {
    console.log(i);
    i++;
}while(i<10);

자바스크립트 활용

주사위

var dice = Math.floor(Math.random()*6) + 1;

Math.random() 메소드는 0 이상 1미만 구간의 난수를 반환한다.

소수 출력

function isPrime(n){
    var divisior = 2;
    while (n > divisor){
        if(n % divisor === 0){
            return false;
        }else{
            divisor++;
        }
    }
    return true;
}

문자열 거꾸로 출력

function reverse(str){
    var reverStr = '';
    for (var i = str.length - 1; i>=0; i--){
        reverStr = reverStr + str.charAt(i);
    } return reverStr;
}

728x90

저작자표시 비영리 변경금지 (새창열림)

'FE > JavaScript' 카테고리의 다른 글

[Java Script] 데이터 타입 (0)	2022.08.24
[Java Script] 표현식 (0)	2022.08.24
[Java Script] 변수 (0)	2022.08.23
[Javascript] 자바스크립트 실행환경 (0)	2022.08.23
[Javascript] 자바스크립트란 (0)	2022.08.23

묵마의 블로그