웹프로그래밍/JavaScript

프로그래밍 언어 응용 24일차 (24/12/12)

wkun 2024. 12. 12. 15:59

CONTENTS

 

CSS

hover 기능

 

JavaScript

1.프로그래밍 개념

2.자바스크립트 개념

3.자바스크립트 맛보기

4.변수

 

-----------------------------------------------

 

CSS

 

hover 기능

 

html

<body>
    <div id="box_row">
        <div id="first">
            <div class="main_box1">
                <img src="./img3/p1.png" alt="">
                <div class="text">
                    <span>Mens's shirt</span>
                    <span>$95</span>
                </div>
            </div>
            <div class="sub_box1">
                <button>Men's shirt</button>
                <button>Buy Now</button>
            </div>
        </div>
        <div id="second">
            <div>
                <img src="./img3/p2.png" alt="">
                <div class="text">
                    <span>Mens's shirt</span>
                    <span>$95</span>
                </div>
            </div>
            <div class="sub_box2">
                <button>Men's shirt</button>
                <button>Buy Now</button>
            </div>
        </div>
        <div id="third">
            <div>
                <img src="./img3/p3.png" alt="">
                <div class="text">
                    <span>Mens's shirt</span>
                    <span>$95</span>
                </div>
            </div>
            <div class="sub_box3">
                <button>Men's shirt</button>
                <button>Buy Now</button>
            </div>
        </div>
    </div>
</body>

 

css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

#box_row{
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* 첫번째 상자 */
/* sub_box1이 밑에서 위로 올라옴 */
#first, #second, #third{
  position: relative;
  background-color: white;
  box-shadow: 5px 5px 5px -5px rgba(0, 0, 0, .2);
  overflow: hidden;
}

#box_row div > div {
  width: 100%;
  height: 100%;
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* background-color: red; */
}

#box_row img{
  width: 50%;
}

#box_row .text {
  width: 80%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.sub_box1 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(126, 123, 119, 0.2);
  transform: translateY(120%);

  transition: all 1s;
}

#first:hover .sub_box1{
  transform: translateY(0%);
}

button{
  display: inline-block;
  margin: 3px 0px;
  color: white;
  width: 40%;
  height: 20%;
  padding: 10px;
  background-color: red;
  border: none;
  border-radius: 25px;
}

/* 두번째 상자 */
/* sub_box2가 살짝 위로 올라오면서 투명도 1로 돌아옴 */
.sub_box2 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(126, 123, 119, 0.2);
  transform: translateY(10%);
  opacity: 0;
  transition: all 1s;
}

#second:hover .sub_box2{
  transform: translateY(0%);
  opacity: 1;
}

/* 세번째 상자 */
#third{
  overflow: visible;
}

#box_row img{
  transition: all 2s;
}

.sub_box3 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(126, 123, 119, 0.2);
  opacity: 0;
  transition: all 1s;
}

#third:hover .sub_box3{
  opacity: 1;
}

#third:hover img{
  transform: scale(1.2);
}

 

 

JavaScript

 

1. 프로그램의 개념

-프로그래밍: 컴퓨터와의 소통

 

01.컴퓨터와 소통하기

-컴퓨터와 소통을 하는 목적이 있음, 궁극적 목적은 어떤 문제가 발생했을 때 해결하기 위함

그러므로 먼저 문제(혹은 요구사항)에 대한 분석을 하고 적절한 해결 방안을 컴퓨터한테 알려주어야 함

 

예를 들어, 컴퓨터에게 양치하는 방법을 알려줄 때 어떤 동작의 순서가 필요한지 구체적을 알려주어야 함

 

-필요한 재료: 칫솔, 치약

-동작: 치약 뚜껑 열기, 손으로 치약 누르기, 튀어 나온 치약을 칫솔 위에 바르기, 치약 뚜껑 닫기, 칫솔을 이에 가져다 대기, 칫솔을 위, 아래로 반복적으로 움직이기, 뱉어내기 등

 

위의 예시처럼 문제를(요구사항)을 분석할 때는 복잡함을 단순하게 분해하고 순서에 맞게 행위를 배열하는 것이 중요

 

즉, 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행 할 수 있을 정도로 정확하고 상세하게 요구사함을 설명하는 작업이고, 그 결과물이 코드임

 

02.프로그래밍 언어

 

1)기계는 0과 1밖에 알지 못함

bit(비트): 0 또는 1의 두 가지 상태 중 하나 

 

2)8bit는 1byte이다

-byte(바이트): 데이터를 저정하고 처리하는 기본 단위 중 하나

-사람은 구성된 기계어로 직접 명령을 전달하기 힘드니 사람이 이해 할 수 있는 컴퓨터와의 소통 규칙을 구성하였고 이를

프로그래밍 언어라고 부름

ex)숫자, 문자, ture/false, ram 등

 

3)프로그래밍 언어는 컴파일러, 인터프리터를 통해 기계어로 번역

-컴파일러: 프로그래밍 언어를 기계어로 번역하는 기능

-약속된 구문(문법)을 작성하면, 컴퓨터가 이해할 수 있는 기계어로 번역해주는데 이를 컴파일러 혹은 인터프리터라고 부름

 

              사람           →         컴파일러           →       컴퓨터
                        프로그래밍 언어                기계어

 

 

2. 자바스크립트

 

1).자바스크립트

-JAVASCRIPT: 웹페이지의 동작을 담당

 

01.자바스크립트의 역할

-웹 페이지의 일방적인 정보 제공을 벗어나 정보의 검색, 정보의 전달 등 클라이언트의 요구를 동적으로 수용할 수 있도록 제공

ex)매일 서버의 웹 페이지를 수정하지 않으면 영원히 변하지 않을 날짜를 제공 받음

 

02.자바스크립트의 필요성

-1995년 웹 브라우저 시장을 90% 점유하고 있던 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하게 됨. 그것이 자바스크립트

-1996년에는 브라우저에 따라 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하여 개발하기 어려워졌으나 ECMA 비영리 표준화 기구에서 자바스크립트의 표준화를 요청함으로 ECMAScript라는 표준이 정립되었고 매년 크고 작은 버전업이 되고있음

 

2)자바스크립트의 특징

01)스크립트 언어

-프로그래밍 언어는 실행 과정에서 요구되는 두 종류의 번역기가 있음(프로그래밍 언어->기계어)

 

(1)컴파일러 (2)인터프리터

 

 (1)컴파일러: 전체 소스 코드를 한 번에 분석하고 변환하여 실행 파일을 생성, 이 과정에서 문법 오류를 검사하고 최적화를 수행하여 기계어 코드로 변환

 (2)인터프리터: 인터프리터는 소스 코드를 한 줄씩 읽어 해석하고 즉시 실행, 프로그램 실행 중에 각 줄을 해석하므로 코드가 실행되는 동안 오류를 검사

 

-자바스크립트는 인터프리처를 요구하며, HTML문서를 작성하고 자바스크립트 프로그램을 끼워 넣어 저장 한 후 웹 브라우저로 열면 바로 실행 결과를 볼 수 있는 스크립트 언어임, 웹 브라우저에 탑대된 JavaScript Interpreter Engine에 의해 해석되어 화면에 직접 보여줌

 

02)객체 중심(지향) 언어(Object Oriented Language)

-객체는 실세계에 존재하거나 생각할 수 있는 모든 것으로 실생활의 사물이나 개념을 컴퓨터 프로그램에서 표현하는 벙법임, 예를 들어 자동차, 학생, 강아지 등이 모두 객체가 될 수 있음, 다시 말해 사전에 나와 있는 명사뿐 아니라 동사, 명사형 까지도 모두 객체임

 

*객체의 특징

-객체는 속성과 메서드를 하나의 단위로 묶어줌, 이를 통해 코드를 모듈화하여 관리할 수 있으며 각 객체는 독립적으로 동작하고 다른 객체와 상호작용 할 수 있음

-객체는 재사용이 가능함, 이는 코드 중복을 줄이고 유지 보수를 용이하게 함

-보다 직관적인 코드 북석을 가능하게 함

 

03)동적 웹 브라우저용 언어

-HTML로만 만들어진 웹 페이지는 정적임: 한 번 만들면 항상 같은 내용을 담고 있거나 다시 변경하기 전까지 항상 같은 상태로 유지됨

-자바스크립트가 적용된 웹 페이지는 동적임: 사용자의 요구에 따라 상호간에 정보를 교환하는 동적인 스타일로 변환함, 자바스크립트가 포함된 웹 페이지는 클라이언트에 다운로드되어 클라이언트의 웹 브라우저에서 실행되어 화면을 구성

(서버x, 클라이언트 측에서 열림)

 

04)클라이언트 Side 언어

-서버로부터 자바스크립트로 개발한 웹 페이지가 현재 웹 브라우저를 연 컴퓨터로 다운로드되어 실행되고, 필요에 따라 서버에 접근하면 속도 문제, 인터넷 상의 문제, 서버 과부하 문제 등 다양한 문제들이 해결됨

 

<JavaScript와 Java의 차이>

JavaScript Java
객체지향
객체는 프로토타입형태로 상속
객체에 대한 속성과 메서드의 동적 추가		 객체 지향, 클래스 기반
객체는 클래스 계층 구조에 의해 상속 클래스나 인스턴스는 동적으로 추가 불가
변수의 자료형을 별도로 선언하지 않음
(동적 연결: 실행되면서 자료형이 결정)		 변수의 자료형이 반드시 지정되어야 함
(정적 연결: 컴파일 시 자료형이 결정)
인터프리터에 의해 직접 실행 컴파일러가 필요
누구든지 소스를 볼 수 있음 안전성이 높음

 

3)자바스크립트의 활용

(1)웹 페이지 개발

-자바스크립트는 웹 브라우저에서 실행되는 클라이언트 애플리케이션을 개발하기 위하여 제공되었음, 웹 페이지 개발을 위한 다양한 도구들은 있으나 웹 브라우저에서 실행되는 언어는 자바스크립트가 유일함, 따라서 동적인 웹 페이지를 개발하기 위해서는 자바스크립트만이 유일한 해법임

 

(2)웹 서버 개발

-지금까지 웹 서버는 C#, JAVA, 파이썬 등의 프로그래밍 언어로 개발됨, 그러나 Node.js의 등장은 자바스크립트로 웹 개발에 필요한 모든 과정을 진행 할 수 있게 됨

-Node.js는 'Chrome V8' 자바스크립트 엔진이 탑재된 이벤트 처리 I/O 프래임워크로 서버 환경에서 자바스크립트로 애플리케이션을 작성할 수 있게 도움

 

(3)모바일 애플리케이션 개발

-자바스크립트를 사용한 애플리케이션은 모든 스마트폰에서 내부적으로 기본적인 인식이 되고 있는 언어임, 페이스북에서 발표된 React.js는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리며, 일부 기술은 모바일 쪽에서 활용되고 있음

 

3.자바스크립트 맛보기

 

HTML 변경하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>자바스크립트 소개</title>
  <script>document.write('안녕하세요!');
  </script>
</head>

<body>
<!-- body 부분에 내용 없어도 실행됨  -->
</body>

</html>

 

CSS 변경하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자바스크립트 소개</title>
  <script>
    window.onload=function(){
      var title=document.querySelector('#title');
      title.style.color='red';
    }
  </script>
</head>
<body>
  <h1 id="title">안녕하세요!</h1>
 
  <!-- <script>
      var title=document.querySelector('#title');
      title.style.color='red';
  </script> -->

  <!-- head뿐만 아니라 body에서도 실행가능 -->
</body>
</html>

 

1)자바스크립트 작성 규칙

01. 대소문자를 구분

-변수 'MyPage'와 'mypage'는 다른 변수임, 이는 다른 함수를 정의하는 데에서도 적용됨. 'start()'와  'START()', 'Start()' 등은 모두 다른 함수임. HTML은 대소문자를 구분하지 않기 때문에 혼돈이 오므로 주의해야함

 

02.공백 문자 무시

-자바스크립트는 연속되는 공백 문자는 무시 또는 하나의 공백 문자로 인식함, 이는 HTML과 동일함. 그래서 공백없이 작성해도 오류가 없으나 가독성을 위해 연산자들 사이는 띄어쓰는 것이 관례

 

03.문장 그루핑

-자바스크립트 뿐만 아니라 모든 언어에서 여러 개의 문장을 그룹핑하여 하나의 묶음으로 처리할 수 있음. 주로 조건문이나 반복문, 함수 등에서 요구됨, 문장 그룹핑은 중괄호{}에 의해 묶어짐

 

    function Car(model, color, speed){

        this.model=model;

        this.color=color;

        this.speed=speed;

     } 

 

*기타&관례

1)한 줄 주석: '//'로 시작하는 문장

2)여러 줄 주석: '/*'로 시작하여 '*/'로 끝나는 문장들

3)세미콜론{;}: 식의 종결을 의미하며 구문들을 구분할 때 사용함, 다른 컴퓨터 언어는 생략하면 오류가 발생하지만 자바스크립트는 생략해도 오류가 발생하진 않음

4)행길이 및 줄바꿈: 가독성을 극대화하기 위해 개발자들은 보통 80자 이상의 코드 행을 피하기를 원함. JavaScript문이 한 줄에 들어 맞지 않는 경우 연산자를 사용한 후에 행을 바꿔서 구문 작성

5) 자바스크립트 오류 확인: 개발자 모드에서 확인

 

2)자바스크립트 역할

(1)HTML 요소 내용을 바꿀 수 있음

-웹 페이지 중에서 id="demo"인 HTML 요소를 찾아내 그 내용을 바꾸기 위하여 innerHTML 속성을 사용

 

HTML 변경하기2

<body>
  <h2>What Can JavaScript Do?</h2>
  <p id="demo">JavaScript can change HTML content.</p>
  <button type="button" onclick="document.querySelector('#demo').innerHTML='Hello JavaScript!'">Click Me!</button>
</body>

 

(2)HTML 속성을 바꿀 수 있음

-<img>태그의 속성(src) 값을 바꾸어 HTML 이미지로 바꿈

-버튼을 클릭하면 이벤트가 발생하며 'document.getElementByld()'의 자바스크립트 문장이 실행됨

 

HTML속성 변경하기

<body>
  <h2>What Can JavaScript Do?</h2>
  <button onclick="document.querySelector('#myimage').src='./img/cat.jpg'">Turn on the light</button>
  <img id="myimage" src="./img/rabbit.jpg" style="width:100px;">
  <button onclick="document.querySelector('#myimage').src='./img/rabbit.jpg'">Turn off the light</button>
</body>

 

(3)HTML 요소를 숨기거나 보이게 할 수 있음

 

HTML 숨기기

<body>
  <h2>What Can JavaScript Do?</h2>
  <p id="demo">JavaScript can hide HTML elements.</p>
  <button type="button" onclick="document.querySelector('#demo').style.display='none'">Click Me!</button>
</body>

 

HTML 드러내기

<body>
  <h2>What Can JavaScript Do?</h2>
  <p>JavaScript can show hidden HTML elements.</p>
  <p id="demo" style="display:none">Hello JavaScript!</p>
  <button type="button" onclick="document.querySelector('#demo').style.display='block'">Click Me!
  </button>
</body>

 

 

3)HTML과 자바스크립트 연결

 

(1)HTML 내부 자바스크립트

-HTML <head>  섹션이나 <body> 섹션에 삽입됨

-<script> 태그를 삽입하고 그 안에 코드를 입력함, </script> 종료태그로 마무리

 

HTML 내부 연결

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var now=new Date();
    alert(now);
  </script>
</head>

 

HTML 내부 연결2

<body>
  <script>
  var now=new Date();
  alert(now);
  </script>
 
</body>

 

(2)HTML 외부 자바스크립트 불러오기

-<head>나 <body> 섹션의 <script> 태그에 있는 src 속성 값으로 자바스크립트 파일을 지정하여 불러옴

 

HTML 외부 연결_html파일

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

 

HTML 외부 연결_js파일

var now=new Date();
document.write("<h1>"+now+"</h1>");

 

(3)인라인 자바스크립트

-자바스크립트가 HTML 태그 내에 존재하는 다른 태그의 이벤트 속성으로 삽입될 수 있음. 즉, 요구되는 이벤트가 발생하였을 때 실행되는 자바스크립트를 삽입하는 경우임, 이 경우는 <script>태그를 사용하지 않음

 

인라인 자바스크립트

<body>
  <input type="button" onclick="document.write('Hello JavaScript')" value="Click Me!"/>
</body>

 

 

4.변수

 

1) 변수

-데이터를 저장하기 위한 이름이 붙은 메모리 공간

-저장된 데이터를 활용하기 위함이며, 변수에 저장된 값은 언제든지 변경할 수 있도록 함

-변수에 저장할 수 있는 종류는 여러 가지 자료형으로 구분

-자바스크립트에서는 변수 선언할 때  'var'이라는 키워드(예약어)를 사용

 

var 변수명 = 값;

 

◎ 변수 선언 규칙

-자바스크립트에서 변수는 기억 공간에 부여된 이름으로 프로그램 내의 문장에서 인용되어 사용할 수 있음, 따라서 변수는 유일한 이름으로 명명되어야 함. 일반적으로 변수의 선언은 'var'이라는 예약어(키워드)를 사용하지만 자바스크립트에서는 생략하기도 함

 

1)변수 이름은 문자로 시작

2)변수 이름은 특수문자로 시작해서는 안되지만 '$'나 '_'로 시작할 수 있음

3)변수 이름은 대소문자를 구분. 즉, 'count'와 'Count'는 다른 변수

4)예약어를 변수로 사용할 수 없음

5)자바스크립트는 변수의 자료형을 정의하지 않음

 

<예약어>

자바스크립트 예약어
abstract arguments boolean
break byte case
catch char class
const continue debugger
default enum eval
export extends false
final finally float for
function goto if
implements import in
instanceof int interface
let long native
protected public return
short static super
switch synchronized this
throw throws transient
true try typeof
var void volatile
while with yield

 

자바스크립트 객체, 속성 및 메소드
Array Date eval
function hasOwnProperty Infinity
isFinite isNaN isPrototypeOf
length Math NaN
name Number Object
prototype String toString
undefined valueOf  

 

◎ 카멜 표기법

-변수의 이름을 표기하는 방법 중의 하나

-변수는 그 변수의 역할과 기능에 적합하도록 의미를 부여하여 이름을 짓는 것을 권장함, 어떤 프로그램을 본인이 작성하였어도 며칠이 지나면 코드의 이해뿐만 아니라 사용되는 변수 등을 알아보지 못하여 난감한 경우가 많음. 주석문을 사용하지만 변수명에 의미를 부여한다면 프로그램의 디버깅이나 큰 프로젝트를 수행할 때 매우 유용함.

 

변수를 의미있는 단어의 조합으로 짓는데 첫 단어는 소문자로, 두번째 단어는 대문자로 표기

ex)dinnerParty():dinner+party

     arrayHotel:array+hotel

 

*-변수, 함수 이름: 카멜 표기법

  -클래스, 생성자 함수, 객체명: 파스칼 표기법(단어의 조합인데 첫단어도 대문자로 시작)

 

◎ 언더스코어법

-"_"를 이용하여 변수를 정의

 

ex)dinner_party():dinner+party

     array_Hotel:array+hotel

 

◎변수의 형태

형태 분류
변수선언 var 변수명;
초기화/깂할당 변수명=값;
변수선언+초기화 var 변수명=값;
사용이유 1.특정 값을 나중에 쓰기 위해 변수를 담아서 사용
2.코드가 너무 길어서 가독성이 떨어질 때 변수에 담아서 사용

 

 

◎변수에 값 할당

-한 중에 여러 개의 선언과 초기 값 할당이 가능

-다른 파일에 같은 변수 이름은 다른 이름으로 인식, 컴퓨터 내의 기억장치의 기억 공간이 다르기 때문

-같은 파일에 정의된 같은 변수일지라도 다른 기억 공간을 할당받아 다른 변수로 다루어지기도 함

 

ex)var name="홍길동, age=35, job="student";

 

     var name="홍길동";

     var age=35;

     var job="student"

 

2)자료형

-프로그래밍 언어에서 조작할 수 있는 데이터의 유형

-자바스크립트에서 변수의 자료형을 미리 선언할 필요 없음, 프로그램이 처리되는 과정에서 자동으로 파악됨

-자바스크립트는 동적 언어로 새롭게 저장된 데이터에 따라 여러 가지 자료형으로 바뀔 수 있음, 즉 한 변수에 여러 자료형의 데이터 값을 저장할 수 있다는 뜻

 

데이터에 따른 자료형

  <script>
    var dataType; //변수 선언o, 초기화x(값을 할당/대입하지 않았다)
    alert(dataType); //undefined: 값을 할당하지 않았을 때
    dataType=35; //숫자(number)
    alert(dataType);
    dataType="홍길동"; //문자열(string)
    alert(dataType); //(typeof dataType); 데이터 타입 확인
  </script>

 

 

<자료형>

자료형 의미 내용
기본 자료형 number 숫자형 정수나 실수(따옴표 없이 작성)
string 문자열형 문자열(하나 이상의 문자 결합체)
(따옴표 내에서 작성)
boolean 부울형 참(혹은 거짓)의 결과값을 갖는 데이터나 수식
복합 자료형 symbol 심볼형 유일하고 변경 불가능한 기본 값
object 객체형 객체를 정의
array 배열형 값들의 집합체
function 함수 실행 가능한 코드의 집합체 
특수 자료형 undefined 정의되지 않음 값을 할당받지 못한 유형
null 공백 값이 없음

 

◎숫자형

-정수형/실수형으로 구분되며 수 자체 표현 혹은 지수 형태로 따옴표 없이 표기

-정수형: 소수점 이하가 존재하지 않는 숫자

-실수형: 소수점 이하의 존재하는 숫자

 

데이터에 따른 자료형_숫자형

  <script>
    var num01=123; //정수
    var num02=123.45; //실수
    var num03=123e2; //지수의 표현 123x100
    var num04=123e-3; //지수의 표현 123x0.001
    var num05=0xaf; //16진수~>출력된 결과물은 10진수
    var num06=0o20; //8진수~>출력된 결과물은 10진수
    var num07='123'; //문자열
    document.write("num01="+num01+","+"num02="+num02+"<br>");
    document.write("num03="+num03+","+"num04="+num04+"<br>");
    document.write("num05="+num05+","+"num06="+num06+"<br>");
    document.write("num07="+num07);
    </script>

 

◎문자열형

-자바스크립트의 문자열형은 연속된 문자들로 구성되며, 텍스트 데이터를 나타내는데 사용함

-문자열은 2byte로 표현되며 문자열을 변수에 할당할 때는 'abc' 또는 "abc"와 같이 따옴표로 묶어 표현함

 

데이터에 따른 자료형_문자열형

  <script>
    var str01 = "I am JavaScript....";
    var str02 = 'I am JavaScript....';
    var str03 = String("I am JavaScript....");
    var str04 = new String("I am JavaScript....");

    document.write(str01+':');
    document.write(typeof str01+"<br>");
    document.write(str02+':');
    document.write(typeof str02+"<br>");
    document.write(str03+':');
    document.write(typeof str03+"<br>");
    document.write(str04+':');
    document.write(typeof str04+"<br>");
    fal
  </script>

 

<특수문자>

이스케이프 문자 분류
￦n 개행문자, 커서를 다음 줄로 이동
￦t 커서를 탭 키만큼 이동
￦b 커서를 앞으로 한칸 이동
￦f 커서를 다음 페이지로 이동
￦r 커서를 그 줄 처음으로 이동
￦￦ ￦문자 표시
￦' '문자 표시
￦" "문자 표시

 

이스케이프 문자

  <script>
    //변수 할당 버전
    var ste01="first line \n second line \n";
    var ste02='first statement \t second statement \n';
    var ste03="first statement \b second statement \n";
    var ste04="c\\javascript";

    //console.log직접 적용 버전
    console.log(str01 + '\n' +ste02);
    console.log(str02);
    console.log(str03);
    console.log(str04);
  </script>

'웹프로그래밍 > JavaScript' 카테고리의 다른 글

프로그래밍 언어 응용 29일차 (24/12/19)  (4) 2024.12.19
프로그래밍 언어 응용 28일차 (24/12/18)  (0) 2024.12.18
프로그래밍 언어 응용 27일차 (24/12/17)  (0) 2024.12.17
프로그래밍 언어 응용 26일차 (24/12/16)  (0) 2024.12.16
프로그래밍 언어 응용 25일차 (24/12/13)  (0) 2024.12.13

'웹프로그래밍/JavaScript'의 다른글

  • 현재글프로그래밍 언어 응용 24일차 (24/12/12)

관련글

티스토리툴바