[JAVASCRIPT] HTML 동작 구현

Notice

Recent Posts

Recent Comments

Link

수빈의 GitHub

250x250

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

[JAVA_Back-End]

[JAVASCRIPT] HTML 동작 구현 본문

Programming/HTML+ CSS + JAVASCRIPT

[JAVASCRIPT] HTML 동작 구현

너굴위 2023. 8. 8. 11:53

728x90

[JAVASCRIPT]

*프로그램-작업

*프로그램 언어- 작업의 내용을 기술 => 컴퓨터에게 일을 시키는 방법

*기술하지 않은 내용을 동작하면 안됨

*기술순서는 순차처리이다 (위->아래)

#프로그램 언어의 종류

- 컴파일 언어: 소스O, 컴파일 하여 실행코드로 만들고 실행한다.

속도 빠름:C/C++/JAVA

- 스크립트 언어: 소스=실행코드 이기 때문에 바로 실행한다.

코딩 편리성이 좋음: javascript/python

# 프로그램 언어에서의 중요요소

- 문법 (프로그램 언어에 대한 이해할 때)

- 라이브러리 (프로그램 구현할 때)

* 문법을 생각하면서 라이브러리를 사용해야함

#프로그램 종류

1. 윈도우 프로그램 - windows/linux/macOS =>인스톨해서 실행하는 프로그램

2. 웹 프로그램 (FullStack)

- 브라우저 내부에서 실행되는 프로그램(프론트엔드) : javascript 디자인 위주

- 웹서버에서 실행되는 프로그램(백엔드): jsp, php, asp.net 코딩위주

3. 모바일 앱 프로그램

#실행환경

1. HTML 페이지 안에 기술

2. 브라우저에서 해석

*시스템에서 해석 또한 가능 (Node.js)

표준안(netscape) =>ECMA(=>w3c)

java=javascript =>ECMAScript

ms-jscript

es1->es5 ... ->es6

v8엔진 -> https://v8.dev/

1. 표준 자바 스크립트인 ECMAScript

2. C++로 작성된 Google의 오픈소스 고성능 JavaScript 및 WebAssembly 엔진인 V8

javascript 기본 => 브라우저 내부

소스코드

</script>

javascript 응용 => node.js

javascript 문법 구성요소

1. 자료: 처리할 데이터

2. 제어: 프로그램 흐름 변경

라이브러리/모듈

3. 함수

4. 클래스

*암기

소스코드

</script>

2. 코딩 - 대소문자 구분

3. 한 줄이 끝나면 ; 붙이기 (생략 가능)

4. <script>안에서 사용하는 주석처리

// 또는 /* */

5. 출력:

document.write('내용') -화면출력(실제출력)

console.log('내용') - 개발자도구의 콘솔 로그 출력 (error잡는용) (디버깅 출력)

* js의 적용방법(기본)

1. default.js 파일 따로 작성

document.write('Goodbye js');

document.write('<table border="1" width="500">');

document.write('<tr>');

document.write('<td>1열</td>');

document.write('<td>2열</td>');

document.write('<td>3열</td>');

document.write('</tr>');

document.write('</table>');

2. HTML파일에서 src="./default.js"로 선언

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

[변수]

*암기

1. 문자열 (String)형 - " "

2. 숫자형 (Number)

- 사칙연산 (+ - * /)

- 정수형(integer)

- 실수형(float, double)

3. 논리형 (Boolean)

- 참(True)

- 거짓(False)

============================================================================================

Undefined = 정의되지 않음

Null = 할당되지 않음

Symbol

Object

자료에 대한 저장소 (메모리 속의 공간)

- 변수 (variable) : 내부 데이터가 변경될 수 있는 공간

- 상수 (constant) : 내부 데이터가 변경될 수 없는 공간

선언 : 공간의 생성

변수 선언

let 변수명; //변수 선언은 let으로 한다. var은 이전버전이기 때문에 사용을 지양.

//변수선언

let num1;

//초기화

num1=10;

console.log(num1);

num1=20;

console.log(num1); //한 변수 안에는 1개의 값만 넣을 수 있다. 20으로 갱신 시키면 10이 출력될 수 없다.

// let(num1); //이미 선언된 변수에 대해서 다시 선언할 수 없다.

</script>

상수 선언

const 상수명;

const NUM1 =10;

console.log(NUM1);

//NUM1=40; // 상수로 선언하면 한번 대입한 변수 값을 변경할 수 없게 된다.

</script>

초기화 : 공간에 처음 값을 할당(대입)

<변수 이름 짓는 규칙>

문법규칙 - 에러

대소문자를 구분
키워드(문법에서 사용되는 단어)를 사용하면 안됨
숫자로 사용하면 안됨
특수문자는 -과 $만 허용
공백문자를 포함할 수 없음

네이밍룰... 잘 지켜야함...

의미있게 작명

변수

- Camel표기법

상수

- 전체를 대문자로 작성

변수명 = 값; =>값을 변수명에 대입한다고 생각. (수학적 의미로 같다.로 생각하면 절대 ㄴㄴ)

<각 자료형에 대한 구분> - typeof를 써서 확인할 수 있음.

//bool1에 " " 가 없으므로 boolean형이며,

bool2에는 " " 가 있으므로 String형으로 분류된다.

let bool1= true;

let bool2="true";

//number

let num1=10; //정수(integer)

let num2=3.14; //실수

let num3=3.14e3; //정수 => 지수

console.log(num1,num2,num3);

console.log(typeof num1, typeof num2, typeof num3); //변수의 타입을 확인

</script>

* \n 과 \t의 사용

<body>

//String

//let str1 ='hello';

//let str2= "hello";

let str1='Hello"world"';

let str2='Hello\'world\''; // \+기호: escape code(프린터제어코드)

// \n엔터키

let str3='Hello\n world';

console.log(str3);

console.log(str1, str2);

// \t 탭 키

let str4='Hello\t world';

console.log(str4);

</script>

</body>

* 백텝을 사용하면 사용한 범위까지 공백또한 같이 출력된다.

`을 사용하면 한 문장에 들어가 있지 않더라도 해당 공백만큼이 출력될 수 있게 된다.

ex)

//백텝을 시켜 태그를 한번에 다 묶어 변수에 저장시킴

let html =`<table border="1" width="700">

<tr>

</tr>

</table>`;

document.write(html);

* 나머지 연산자를 통한 홀수 짝수 구분법

console.log(1+1);

let num1 = 10;

let num2 = 20;

let sum = num1+num2;

console.log(sum);

//나머지

console.log(1%2);

console.log(2%2); //나머지에 대한 연산자 (나머지는 반드시 정수다)

console.log(3%2); //결과값 1이며 홀수 0이면 짝수

console.log(4%2);

</script>

* 앞 뒤 피연산자로 인한 +연산자의 역할 변화

let num1 =1;

let num2 =1;

let num3 =1;

console.log(num1+num2+num3);

//어떤 +인지 확인하기

console.log(1+1+1);

console.log('1'+1+1); //11이 문자열이기 때문에 나머지 더하기도 문자가 된다.

console.log(1+'1'+1); //문자열더하기 문자열더하기

console.log(1+1+'1'); //숫자더하기 문자열더하기

</script>

* 대입 연산자와 복합대입 연산자

// = :대입(할당)연산자

let num1 =10;

console.log(num1);

//num1=num1+20; //대입<산술 이기 때문에 산술이 먼저 수행되고 대입된다.

num1+=20; //복합 대입 연산자

console.log(num1);

</script>

ex)

let num1 = 10;

let num2= 3;

num1+=num2;

document.write(num1, "<br>");

num1-=num2;

document.write(num1, "<br>");

num1*=num2;

document.write(num1, "<br>");

num1%=num2;

document.write(num1, "<br>");

ex2) 복합대입연산자를 통해 html의 태그를 연결시킬 수 있다.

변수화를 시켜 문장을 연결하는 방식으로 작성

let html ='<table border="1" width="700">';

html +='<tr>';

html +='<td>1열 </td>';

html +='<td>2열 </td>';

html +='<td>3열 </td>';

html +='</tr>';

html +='</table>';

document.write(html);

* 증감연산자와 단항연산자

//(1) 증감연산자

let num=1;

//num=num+1;

//num+=1;

//단항연산자

//num++;

//++num;

//num--;

--num;

console.log(num);

let num1=1;

let num2=1;

//연산자 우선 순위의 차이

let num11=num1++; //먼저 할당하고 값이 증가

let num21=++num2; //값이 증가하고 그 다음에 할당

console.log(num1,num11);

console.log(num2,num21);

</script>

* 비교 연산자

let a=10;

let b=20;

let c=10;

let f="20";

let result;

result = a>b;