Javascript : 연산자 - 2. 할당 연산자(대입 연산자)

 

2. 대입, 복합 연산자

  • 대입 연산자(=)는 연산 된 데이터를 변수에 저장할 때 사용한다.
  • 복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용 된 것을 뜻한다.
    연산한 뒤에 다시 변수에 값을 재할당 한다.
종류 풀이
A = B  A = B
A += B A = A + B
A *= B A = A * B
A /= B A = A / B
A %= B A = A % B

 

// 등호 연산자(=)
let a = 10;
console.log(a);

// 더하기 등호 연산자(+=)
a += 5;    // a = a 5 5와 동일
console.log(a);

// 빼기 등호 연산자(-=)
a -= 5;    // a = a - 5와 동일
console.log(a);

// 곱하기 등호 연산자(*=)
a *= 5;    // a = a * 5와 동일
console.log(a);

// 나누기 등호 연산자(/=)
a /= 5;    // a = a / 5와 동일
console.log(a);

// 나머지 등호 연산자(%/)
a %= 3;    // a = a % 3와 동일
console.log(a);

 

 

 

   Javascript : 연산자 - 1. 산술 연산자

    연산자란?

    덧셈, 뺄셈, 곱셈, 나눗셈과 같이 계산 작업을 뜻한다.
    자바스크립트에서는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다.

 

 

1. 산술 연산자

종류 기본형 설명
+ A+B 더하기
- A-B 빼기
* A*B 곱하기
/ A/B 나누기
% A%B 나머지

 

 

    더하기 연산자

  • 더하기 연산은 피연산자에 문자형 데이터가 한개라도 포함된다면 자동으로 문자형 데이터 타입으로 형 변환된다.
console.log(1 + 1);
console.log(1 + "1");

 

    빼기 연산자

  • 피 연산자에 문자열이 포함되어있더라도 산술연산된다.
console.log(1 - "2");
console.log(1 - 2);

 

    곱하기 연산자

  • 피 연산자에 문자열이 포함되어있더라도 산술연산된다.
console.log(5 * 3);
console.log("5" * 3);

 

    나누기 연산자

  • 피 연산자에 문자열이 포함되어있더라도 산술연산된다.
console.log(10 / 2);
console.log("10" / 2);

 

    나머지 연산자

  • 피 연산자에 문자열이 포함되어있더라도 산술연산된다.
console.log(7 / 2);
console.log("7" % 2);

7을 2로 나누고 나머지 값

 

 

 

   Javascript : 형 변환

    형 변환
    형태를 바꾼다.

 

1. 암시적 형 변환

     문자형(String)

  • 문자열과 다른 타입의 데이터형태가 만나면 문자열로 변환된다.
  • 문자와 숫자가 만나면 문자열로 변환된다.
let result = 1 + "2";
console.log(result);
console.log(typeof result);

  • 문자열과 논리형의 타입이 만나면 문자열로 변환된다.
let result2 = "1" + true;
console.log(result2);
console.log(typeof result2);

 

     숫자형(Number)

  • 더하기 연산자가 아닌 +, -, * 연산자가 붙으면 숫자 연산자로 변환된다.
let result3 = 1 - "2";
console.log(result3);
console.log(typeof result3);

 

let result4 = "2" * "2";
console.log(result4);
console.log(typeof result4);

 

 

2. 명시적 형 변환

     논리형(Boolean)

  • 6번 : 문자은 값이 있는 문자열은 빈 문자열이 아니라면 true라고 나온다.
  • 7번 : 객체라는 것은 값이 비어있어도 true라고 나온다.
console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log('---------------------');

console.log(Boolean("flase"));
console.log(Boolean({}));

 

    문자형(String)

  • 숫자형, 논리형, null, undefined를 넣어줘도 string을 붙여줬기 때문에 모두 문자형으로 형 변환 된다.
let result5 = String(123);
console.log(typeof result5);
console.log(result5);

let result6 = String(true);
console.log(typeof result6);
console.log(result6);

let result7 = String(false);
console.log(typeof result7);
console.log(result7);

let result8 = String(null);
console.log(typeof result8);
console.log(result8);

let result9 = String(undefined);
console.log(typeof result9);
console.log(result9);
 

 

 

    숫자열(Number)

  •  
let result10 = Number("123");
console.log(result10);
console.log(typeof result10);

 

 

 

 

 

   Javascript : 데이터 타입 - Boolean, undefined, null

    데이터 타입의 종류를 알아보자
     1. Javascript의 데이터 타입의 선언 특징
     2. 숫자
     3. 문자
     4. 논리형(Boolean)
     5. undefined
     6. 빈 데이터(null)

 

 

4. 논리형(Boolean)

     논리형(Boolean)이란?

  • Boolean은 true(참) 또는 false(거짓) 두 가지 값 중 하나를 나타내는 데이터 타입이다.
let bool1 = true
let bool2 = false
console.log(bool1);
console.log(typeof bool1);
console.log(bool2);
console.log(typeof bool2);

 

' ', " "를 사용하면 문자열(string)이 되니까 조심하자

 

5. undefined

     undefined 란?

  • 값이 할당/정의되지 않은 것(un : not , define : 정의하다.)
  • 변수에 값이 등록되기 전 상태를 말한다. 
let x;
console.log(x);

x에 정의하지 않았기때문에 undefined로 나온다.

 

6. 빈 데이터(null)

     null 이란?

  • 값이 존재하지 않음을 '명시적'으로 나타내는 것
  • null ≠ undefiend
  • null은 변수에 저장 된 데이터를 비우고자 할 때 사용한다.
let y = null
console.log(y);

 

 

 

 


 

 

5. object(객체)

     object 란?

  • {key : value pair}
let chulsoo = {
    firstname : 'lee',
    age : 20,
    isMarried : true
}
console.log(chulsoo.firstname)
console.log(chulsoo.age)
console.log(chulsoo.isMarried)

console.log(typeof chulsoo.firstname)
console.log(typeof chulsoo.age)
console.log(typeof chulsoo.isMarried)

 

 

6. array(배열)

     array 란?

  • 여러 개의 데이터를 순서대로 저장하는 데이터 타입
  • 배열은 모두 index(위치 데이터)를 가지고있다.
  • index의 순서는 0부터 시작한다.

 

 

 

   Javascript : 데이터 타입 - 문자(String)

    데이터 타입의 종류를 알아보자
     1. Javascript의 데이터 타입의 선언 특징
     2. 숫자(Number)
     3. 문자(String)
     4. 논리형(Boolean)
     5. undefined
     6. 빈 데이터(null)

 

 

 

 

3. 문자열(string)

     문자열로 선언할 때

  • ' ', " " 로 감싸주어야 문자열로 선언된다.
let str = "hello world"
console.log(str);
console.log(typeof str);

 

     string의 기능 - 문자열의 길이를 확인할 때

  • 변수.length
let str = "hello world"
console.log(str.length);

 

     string의 기능 - 문자열 결합하기

  • 변수1.concat(변수2);
let str1 = "Hello World "
let str2 = "Welcome"
let result = str1.concat(str2);
console.log(result);

 

     string의 기능 - 문자열 자르기
      ① substr

  • 변수.substr(7,5)
  • 7번째부터 5개의 글자를 자르자

문자열을 자를때에는 공백을 포함하여 자른다.

      ② slice

  • 변수.slice(7,15)
  • 7번째부터 12번째 글자까지 자르자

 

     string의 기능 - 문자열을 검색할 때

  • 변수.search("검색할 문자")
  • 대상 변수에 검색할 문자가 몇번째부터 시작하는지 찾는 기능
let str3 = "Hello World Welcome"
console.log(str3.search("Welcome"));

"Welcom"이 시작되는 지점이 몇번째인지 찾는 기능이다.

 

     string의 기능 - 문자열 대체

  • 변수.replace("대상문자", "변환할 문자")
let str5 = "Hello World Welcome"
let result01 = str5.replace("Welcom", "Javascript")
console.log(result01);

 

     string의 기능 - 문자열 분할

  • 변수.split("문자열을 자를 기준이되는 문자")
let str6 = "apple, banana, kiwi"
let result02 = str6.split(",")
console.log(result02);

 

 

 

 

 

   Javascript : 데이터 타입 - 숫자(Number)

    데이터 타입의 종류를 알아보자
     1. Javascript의 데이터 타입의 선언 특징
     2. 숫자(Number)
     3. 문자(String)
     4. 논리형(Boolean)
     5. undefined
     6. 빈 데이터(null)

 

 

1. Javascript의 데이터 타입의 선언 특징

     데이터 타입이 선언될 떄

  • 데이터 타입은 runtime(코드가 실행될 때) 데이터 타입이 실행된다. 
    예를들어 JAVA에서는 선언할 때 매번 데이터 타입을 지정해주어야하지만,
    Javascript 는 데이터 타입을 지정하지 않고 코드가 실행될 때 데이터 타입이 결정된다.
// JAVA
string A = "ABC"
 
// Javascript
const A = "ABC"

 

2. 숫자(Number)

     정수

  • 데이터 타입.
let num1 = 10;
console.log(num1);
console.log(typeof num1);

 

     실수(float)

  • 데이터 타입.
let num2 = 3.14;
console.log(num2);
console.log(typeof num2);

 

     지수형(Exp)

  • 데이터 타입.
let num3 = 2.5e5;  // 2.5 x 10^5(10의 5승)
console.log(num3);
console.log(typeof num3);

 

     NaN(Not a Number)

  • 데이터 타
let num4 = "hello" / 2;
console.log(num4);
console.log(typeof num4);

 

     무한대(Infinity)

  • 데이터 타
let num5 = 1 / 0;
console.log(num5);
console.log(typeof num5);

 

let num6 = -1 / 0;
console.log(num6);
console.log(typeof num6);

 

    Javascript : 변수와 상수 

    변수와 상수에 대해 공부한다.

 

1.  변수(variable)와 상수(constant)

     변수란 무엇일까?

  • 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간이며, 데이터를 담을 수 있는 방이다.
  • 변수에는 오직 한개의 데이터만 저장되며, 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워진다.
  • 변수에 저장할 수 있는 데이터의 종류는 문자형(string), 숫자형(number), 논리형(boolean), 빈데이터(null)이 있다.
  • 변수는 변하는 값을 저장하는 식별자로 let을 사용한다.
  • 메모리에 저장하고 저장된 값을 읽어들여 재사용하기 위해 변수를 사용한다. 
  • 변수의 5가지 주요 개념

A라는 방에 "Hello wold!"를 넣어주는 것..

변수 5가지의 주요 개념
변수 이름 저장 된 값의 고유 이름
(예) A
변수 값 변수에 저장 된 값
"Hello word"
변수 할당 변수에 값을 저장하는 행위
만들어진 변수 A에 "Hello word"를 저장하는 것 
변수 선언 변수를 사용하기 위해 컴퓨터에 알리는 행위
var 라는 키워드를 이용하여 A 에 저장하는 것을 알리는 행위
변수 참조 변수에 할당 된 값을 읽어오는 것
var c = a + b;를 구할 때 var avar b 를 참조하는 것 
var A = "hello world";

var a = 10;
var b = 20;
var c = a + b;

 

 

     상수란 무엇일까?

  • 변하지않는 값을 저장하는 식별자로 상수 선언할 때에는 const를 사용한다.

 

 

     변수를 선언할 수 있는 방법

  • 변수를 선언하는 방법은 var, let, const가 있다.
var A = "hello world var";
console.log(A);

let B = "Hello world let";
console.log(B);

const C = "Hello world const";
console.log(C);

 

  • 변수를 선언하고, 할당을 나중에 할 수도 있다.
// var D = 3 과 동일하다.
var D;
D = 3

 

 

 

     var, let, const의 차이점  

    ① 변수를 선언 후 다시 선언할 때

  • var는 동일 변수에 여러번 선언할 수 있지만 let과 const는 여러번 선언할 수 없다.
 
var 이미 선언 된 값에 다시 선언 가능
let 이미 선언 된 값에 다시 선언 불가능
const 이미 선언 된 값에 다시 선언 불가능

let으로 선언한 B와 const로 선언한 C에 에러 발생
let은 선언한 이후에 다시 변수에 선언할 수 없다.

 

    ① 변수에 선언 후 변수 이름에 다시 재할당 할 때

  • var와 let은 재할당이 가능하지만 const는 여러번 할당할 수 없다.
 
var 이미 할당 된 값에 재 할당 가능
let 이미 할당 된 값에 재 할당 가능
const 이미 할당 된 값에 재 할당 불가능
var A = "hello world var";
A = "var test 1"
console.log(A);

let B = "Hello world let";
B = "let test 2"
console.log(B);

const C = "Hello world const";
C = "cosnt test 2"
console.log(C);

 

const로 선언하고 할당한 값은 재할당이 불가능하다.

 

     변수 선언 시 주의사항
      1) 변수명의 첫 글자로는 영문자, $, _(언더바) 만 올 수 있다.


      2) 변수명 첫 글자 다음은 영문자, 숫자, $, _(언더바)만 포함할 수 있다.

     3) 변수명으로는 예약어(document, location, window 등..) 약속어를 사용할 수 없다. 
          예약어란 이미 자바스크립트에서 사용하기로 약속하고 사용 중인 단어를 말한다.

     4) 변수명을 지을 때에는 되도록 의미를 부여해 작성하는 것이 좋다.

     5) 변수명을 사용할 때에는 대/소문자를 구분해야 한다. 

대소문자가 틀린 경우 표시가 생긴다.

 

 

 

 

    글자태그

    제목글자<h1~>, 본문<p>, 앵커태그<a>, 글자 형태

 

1.  제목글자 태그

     제목글자 태그(heading)

  • 각각의 숫자는 크기 및 우선 순위를 나타낸다.
  • h1이 가장 크고, h6가 가장 작다.
태그명 설명
h1 첫번째 큰 제목 글자 태그
h2 두번째 큰 제목 글자 태그
h3 세번째 큰 제목 글자 태그
h4 네번째 큰 제목 글자 태그
h5 다섯번째 큰 제목 글자 태그
h6 여섯번째 큰 제목 글자 태그

 

<!DOCTYPE html>

<head>
    <html lang="ko">
    <meta charset="UTF-8">

    <title>Document</title>

    <script>
    </script>

    <style>
    </style>
</head>


<body>
    <h1>첫번째 큰 제목 글자 태그</h1>
    <h2>두번째 큰 제목 글자 태그</h2>
    <h3>세번째 큰 제목 글자 태그</h3>
    <h4>네번째 큰 제목 글자 태그</h4>
    <h5>다섯번째 큰 제목 글자 태그</h5>
    <h6>여섯번째 큰 제목 글자 태그</h6>
</body>

</html>

 

 

     본문 태그

태그명 설명
p 본문 글자 태그 (paragraph : 단락)
단락을 나눠주는 태그로 <p></p>태그 안에 들어간 내용은 모두 한줄로 작성된다.
br 줄바꿈 태그 
hr 수평 줄 태그
<!DOCTYPE html>
<head>
    <html lang="ko">
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <p>p태그 안에는 엄청 긴 내용을 한줄로 작성할 수 있어요. paragraph : 단락을 나타내는 태그에요.</p>
    <br>br태그는 줄 <br>← 바꿈 태그에요.
    <hr>hr은 수평 줄을 만들어줘요.
</body>

</html>

 

 

     앵커 태그(Anchor)

  • 앵커태그는 서로 다른 웹 페이지를 이동하거나, 웹 페이지 내부에서 특정 위치로 이동할 때 사용하는 태그이다.
태그명 설명
a 앵커 태그
<a href="url, ./위치"></a>

동일 위치에 있는 파일을 연동할 때 ",/파일명"
상위 폴더에 위치한 파일을 연동할 때 "/파일명"

 

'Programming > html, css' 카테고리의 다른 글

HTML5 : 페이지 구조 - html, head  (0) 2023.03.29

 

    HTML5 페이지 구조

    html, head

 

1.  lang 속성값

  • 실제 웹브라우저가 동작하는데 어떠한 영향도 끼치지 않지만 구글과 같은 검색엔진에서 웹 페이지를 탐색할 때 어떤 페이지로 만들어져 있는지 쉽게 인식하기 위한 목적을 가지고 있다.
국가 속성값
한국 ko
일본 ja
중국 zh
미국 en
러시아어 ru
독일어 de

 

2. head 태그

  •  
태그명 설명
<!DOCTYPE html> 현재 웹 브라우저가 HTML5 문서임을 선언하는 태그
<html> html 태그는 모든 HTML 페이지의 루트 요소로 lang 속성을 입력할 수 있다.
<html lang = "ko">
meta 브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 추가 정보 제공
title 브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 제목 정보 제공
script 스크립트를 추가
link 웹 페이지에 link를 통해 파일을 추가
style 웹 페이지에 style 시트를 추가
base 웹 페이지의 기본 경로를 지정한다.
<base href="/images/" target="_blank" />

 

   meta tag 설명

속성명 설명
charset 문자코드 종류 설정
문자 깨짐이나 오류가 생길 수 있어 방지하기 위해 인코딩 선언한다.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Description 검색결과에 표시되는 설명
<meta name="discription" content="YI_DADA의 웹페이지입니다.">
Keywords 검색엔진에 검색되는 키워드
<meta name="keyword" content="YI_DADA">
author 웹페이지 제작자 명
<meta http-equiv="Author" content="홍길동">
publisher 제작사
<meta http-equiv="publisher" content="제작사">
other agent 웹 책임자
<meta http-equiv="other Agent" content="웹 책임자">
copyright 저작권
<meta http-equiv="copyright" content="저작권">
distribution 배포자
<meta http-equiv="distribution" content="배포자">
build, last-modified 제작년월일
<meta http-equiv="build" content="date">
<meta http-equiv="last-modified" content="Fri, 05 Jul 2020 20:07:00">
email, reply-to 이메일
<meta http-equiv="email" content="메일 주소">
<meta http-equiv="reply-to" content="메일 주소">
 title
문서 제목
<
meta http-equiv="title" content="YI_DADA의 웹페이지">
viewport 모바일 반응 페이지
<meta name="viewport " content="width=device-width, initial-scale=1.0">
generator 제작도구
<meta http-equiv="generator" content="제작도구">
filename 파일명
<meta http-equiv="filename" content="파일명">
imagetoolbar 그림 위 마우스 오버 시 이미지 관련 툴바 생성하지 않는다.
<meta http-equiv="imagetoolbar" content="no">
cache-control 캐쉬를 가져오지않아 사용자에게 항상 바뀐 내용을 보여줄 수 있지만 페이지 출력 속도가
오래 걸리는 단점을 가지고 있다.
</meta http-equiv="cache-control" content="no-cache">
refresh
60초마다 새로고침
<
meta http-equiv="refresh" content="60">
60초 후 설정 된 url 주소로 자동 이동 
</meta http-equiv="refresh" content="60; url="주소">
   

※ meta 태그 설명 출처(🏷️ 메타(meta) 태그 종류 & 사용법 (tistory.com))

 

<!DOCTYPE html>

<head>
    <html lang="ko">
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="styles.css">

    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

    <style>
        h1 {
            color: red;
        }

        p {
            color: blue;
        }
    </style>
</head>


<body>
</body>

</html>

 

 

 

 

 

 

'Programming > html, css' 카테고리의 다른 글

HTML5 : 글자태그  (0) 2023.03.29

+ Recent posts