JavaScripte practice_240401

Choi Suyeon·2024년 4월 1일
JavaScriptPracticebacktickconst 상수inline, embed, 외부파일prompt연산자주의사항지역/전역변수

JavaScript

사용법

inline, embed, external file 방식 3가지 방식으로 사용할 수 있다.

inline 방식

HTML태그에 직접 정의하는 방식.
코드의 적용우선순위가 가장 높다.
코드의 중복성이 높다. 복잡한 코드를 작성하기 어렵다.
구조와 동작이 결합된다.

<태그명 onXXX="자바스크립트 코드">

embed 방식

HTML에 script태그를 사용하여 정의하는 방식.
코드의 중복성을 낮출 수 있다.
HTML태그와 JS Code를 분리할 수 있다.

<script type="text/javascript">
 자바스크립트 코드
</script>

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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>

    <script type=“text/javascript”>
      자바스크립트 코드
    </script>

    </head>
    <body>
     .
     .
    <script type=“text/javascript”>
      자바스크립트 코드
    </script>
      .
     .
    </body>
</html>
  • HTML 태그와 JavaScript 코드를 분리할 수 있다.
    JS코드에서 Error가 발생했을 때 에러메시지가 사용자에게 보여지지않고 body 의 내용을 로딩된다.
  • HTML 태그와 JavaScript 코드를 합쳐진다.
    JS코드에서 Error가 발생했을 때 에러메시지가 사용자에게 제공되고 사용자가 모든 error를 확인 했을때 나머지 body 의 내용이 로딩된다.

external file 외부파일 방식

확장자가 .js인 파일을 만들고 필요한 HTML에서 연결하여 사용하여 방식
코드의 중복성이 가장 낮은 방식.
JavaScript Library가 개발되고 배포되는 방식.
.js파일의 인코딩과 HTML파일의 인코딩이 같지 않으면 한글이 깨진다.

  • 사용법
1. .js인 파일생성
2. 필요한 HTML에서 연결하여 사용
<script type="text/javascript" src="연결할 JS의 URL"></script>
//외부파일을 연결한 <script>태그 사이에서는 
//절대로 자바스크립트 코드를 정의하지 않는다.

  • 자바스크립트 코딩 시 주의사항.
    대.소문자 구분.
    괄호는 짝으로 정의. (), {}, []

  • ;은 생략 가능.

  • 출력

-경고창으로 출력(코드의 실행을 멈추고 출력. - debug용)
alert(값);

-HTML <body> 출력.
window.document.write(출력값);

-console 출력(개발자 도구 (F12)의 console출력 - debug용)
console.log(값);
  • 주석(Comment)
    코드의 실행을 막거나, 코드에 부연설명을 기술할 때.
    // - 한 줄 주석
    /* 여러 줄 주석 */

변수(Variable)

프로그램에서 필요한 값을 일시적으로 저장하고 사용하기 위해서.
가독성향상.
변수를 선언할 때 데이터 형을 직접 지정할 수 없다.(TypeScript은 가능)
데이터 형은 변수에 값이 할당될 때 동적으로 결정된다.(동적할당)
hoisting을 지원 - 아래 라인에서 선언된 변수를 윗 라인에서 사용할 수 있는 것.
전역변수와 지역변수를 제공.

지역변수) 데이터 형을 설정할 수 없다.
1. 선언
var 변수명; //값 할당될 때 변수에 데이터 형이 결정된다.

2. 값 할당
변수명 = 값;

3. 값 사용
출력, 연산, 재할당
console.log(변수명)
* 변수의 데이터 형 명을 얻기
typeof(변수명)

전역변수
1. 선언 및 값 할당
var를 붙이지 않는다.
변수명 = 값;

2. 값 사용
출력, 연산, 재할당
console.log(변수명)

ES6에서 지원하는 변수타입

  • const : 상수로 만들 때 사용.

const 상수명 = 값; //값 할당은 선언할 때만 가능하다(값 변경 불가)

let : - hoisting을 막을 때 사용.(존재하지 않는 변수를 사용하게 되는 상황을 막기 위해)

  • 같은 이름의 변수를 중복 선언하지 못하게 막기 위해서.
    (var는 같은 이름으로 변수 선언을 여러 번 할 수 있다.)

연산자(Operator)

연산에 사용되는 예약된 부호들.
최단쉬 관리 삼대 콤마

단항

~, !, +, -, ++, --

산술

+, -, *, /, %

쉬프트연산자(비트밀기)

<<. >>, >>>

관계연산자

>, <, >=, <=,
==(값만 같은지 비교), ===(값과 데이터 형이 모두 같은지 비교),
!=(값이 다른지 비교), !==(값과 데이터 형이 모두 다른지 비교)

  • 데이터 형을 개발자가 선택하지 못하는 언어는 값의 비교가 느슨하다.

var num=10;//number
var num2="10";//string

num == num2 => true(데이터형은 달라도 값이 같으니 true가 나온다.//값의 비교가 느슨하다.)
num === num2 => false(값은 같으나 데이터 형은 달라서 false가 나온다.//값의 비교가 빡세다.)

논리연산자

일반논리 : 여러 개의 관계연산자를 묶어서 비교 &&, ||
비트논리 : 비트 연산 &, |, ^

삼항(조건)연산자

?

대입연산자

=, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, |=, ^=

prompt

web browser에서 제공하는 입력 값을 받을 수 있는 객체.
입력 값은 문자열로 반환된다.
입력 폼을 만들지 않고, 값을 동적으로 얻을 때 사용.

var 변수명 = prompt("제공할 메시지", "기본값");

제어문

프로그램의 순차적인 흐름을 변경해 줄 수 있는 문장들.

조건문

if, switch~case( 모든 값을 비교할 수 있다.)

단일 if) - 조건에 맞을 때에만 코드를 실행해야할 때

if(조건식){
조건에 맞을 때 수행할 문장들,,,;
}

- if~else) - 둘 중 하나의 코드를 실행해야할 때
if(조건식){
조건에 맞을 때 수행할 문장들,,,;
}else{
조건에 맞지 않을 때 수행할 문장들,,,;
}

- else~if) - 연관된 여러조건을 비교
if (조건식) {
조건에 맞을 때 수행할 문장들,,,;
} else if (조건식) {
조건에 맞지 않을 때 수행할 문장들,,,;
} else if (조건식) {
조건에 맞지 않을 때 수행할 문장들,,,;
} else {
모든 조건에 맞지 않을 때 수행할 문장들,,,;
}
  • switch ~ case
    일치하는 모든 값(number, string, boolean,,,)을 비교할 때 사용.
switch(변수명){
  case 상수 : 변수의 값이 상수와 같을 때 수행할 문장; break;
  case 상수 : 변수의 값이 상수와 같을 때 수행할 문장; break;
    ...
  default : 비교될 상수가 없을 때 수행될 문장;
}
  • 반복문
    조건에 맞을 때까지 코드를 반복실행해야할 때.
    for, while, do~while
for : 시작과 끝을 알 때 사용.
for(초기값; 조건식; 증.감소식){
	반복수행 문장들,,,;
}
* 초기값은 가급적이면 지역변수로 선언
var, let의 형식을 권장(전역변수 형식으로 사용하지 말 것!)
for(i=0; i < 10; i++)//전역변수 형식 권장X
for(var i=0; i < 10; i++)//권장O
for(let i=0; i < 10; i++)//권장O
  • while
    시작과 끝을 모를 때 사용
    최소 0부터 최대 조건까지 반복.

초기값
while(조건식){
반복수행할 문장들,,,
증,감소식
}

  • do~while
    시작과 끝을 모를 때 사용
    최소 1부터 최대 조건까지 반복

초기값
do{
반복수행할 문장들,,,
증.감소식
}while(조건식);

  • array
    일괄처리시 사용.
    일차원 배열만 지원.
    가변길이형.
    배열의 방의 수를 얻기 위해서 length속성을 사용.(배열명.length)
    배열의 방에는 모든 데이터 형을 입력할 수 있다. 이전 방의 데이터 형과 다른 데이터형도 추가 가능.
1. 생성
var 배열명 = new Array();//방의 수를 설정하지 않는다.

2. 값 할당
배열명[ 인덱스 ] = 값;//값이 할당되면 방의 개수가 증가한다.

3. 값 얻기
배열명[인덱스]

-일괄처리
for(var i=0; i<배열명.length; i++){
	배열명[i]
}

* 배열의 초기화 (기본형 형식의 사용)
var 배열명 = [ 값,,, ];

Backtick

JavaScript에서 템플릿 리터럴(Templete Literal)을 사용할 때 사용되는 특별한 문자(`)
문자열이 사용되는 곳에서는 어디에서든 사용할 수 있다.

`문자열 ${변수명} 문자열,,,`

var name="윤웅찬";
document.write(`내 이름은 ${name}입니다. <br>`);
profile
Choi Suyeon
이전 포스트

HTML practice_240322

다음 포스트

JavaScript practice_240402

0개의 댓글