[JS] 자바스크립트 특징 ,JS 변수 선언

html: 웹문서를 나타내는 표현법

태그를 사용해서 정보를 표시한다.

태그: <태그이름></태그이름> (항상 짝으로 사용)

JavaScript: html 태그를 사용해서 여러가지 기능 처리

버튼으로 javascript 만들기 (1) - 버튼

head/body 안에 버튼
<input type="button">

버튼 안에 글씨
<input type="button" value="버튼">

버튼 누르면 javascript
<input type="button" value="버튼" onclick=" alert('js 실행버튼')">

버튼으로 javascript 만들기 (2) - 하이퍼링크

<a href ="">하이퍼링크 실행</a>

=새로고침과 하이퍼링크 실행 버튼이 같다. (자바스크립트-헤드)
"" 안에 주소가 없으면 나 자신을 새로고침한다.

<a href ="javascript: alert('JS 실행(a태그)')">하이퍼링크 실행</a>

1. 헤드안에 스크립트
2. 바디안에 스크립트
3. 바디안에 a태그
4. 바디안에 input태그

5. javascript 코드만 작성하는 공간

// testScript.js
// 자바스크립트 코드만 작성하는 공간
// 외부 파일 (단독실행 불가능 -> HTML 같이 실행)

alert('JS 실행(외부파일)');

—서버(단독실행) 불가능 → HTML같이 실행

-title과 script사이에

<script src="testScript.js"> </script>

실행 → 외부파일- > 헤드 → 바디 → 페이지

자바스크립트 특징

컴파일언어 : 고급언어를 저급언어로 바꾸는 것 (번역)

<h3> 1. 인터프린터 언어 (<-> 컴파일언어(java))</h3>

<p> 코드를 위에서 아래로 순차적으로 실행.
    에러가 발생하기 전까지만 실행, 
    에러 발생 후에는 더이상 코드를 실행x

어도비 플래시 → javascript로 대체

2. 클라이언트 (스크립트) 언어

클라이언트(컴퓨터, 휴대폰 등)에서 실행되는 언어 <->서버에서 실행되는 언어(java) (스마트폰의 등장)

 

 3. 객체 기반언어

4. 오픈소스 기반의 언어

중요한 내용은 자바스크립트에 안남기는게 좋음

5. 다양한 라이브러리 지원

라이브러리 : 도서관(여러 기능들을 모아놓음 - 필요한것들을 그때그때 찾아서 처리)

 

javascript 작성 규칙

1. 대,소문자 구분하여 작성

2. 모든코드(실행문)의 끝에는 세미콜론(;)을 작성 

3. 코드를 작성할 때 한번에 한 줄씩 작성

4. 문자 표시할때 "" / '' 를 구분해서 사용x -java에서는 구분함-

5. [대괄호] {중괄호} (소괄호)는 항상 짝이 맞아야함

6. 기본적으로 코드는 키보드로 수행가능해야함

출력문

<script>
        // 출력문
        // 1. alert(); 
        // alert('안녕하세요!');
        //2. document.write
        // document.write('안녕하세요 아이티윌 입니다');
        // console.log();
        // console.log('안녕하세요!');

    </script>

숫자 + 숫자에서의 ‘+’는 연산자

문자 + 문자에서의 ‘+’는 연결자

//숫자 +(연산자) 숫자 => 숫자
document.write(100+200);
//문자 +(연결자) 문자 => 문자(연결)
document.write("100"+"200");

document.write("<br>");
//문자 + 숫자 => 문자
// => 문자 + A => 문자
document.write("100" + 200);

document.write("<br>");
document.write("100" + 200 + 300); //?

document.write("<br>");
document.write("100" + (200 + 300)); //계산 우선순위를 높여줌

자바스크립트는 int가 없음 → var / let / const 변수명

⇒ HTML 언어

<script> </script> 안에 써야 스크립트 언어!

<script>
// 변수 선언
var itwill;
// 변수 초기화
itwill = 1000;
//변수 사용
document.write('변수 :' + itwill);
</script>

변수 초기화 하는 이유

-변수 → 메모리에 올라간다.

-변수 선언 : 사물함 할당

-사물함 청소 : 초기화

-짐 넣기 : 사용

-초기화 한 이유 : 원래 있던 사물함에 뭐가 있는지 모르니까 청소를 한거임

-프로그래밍에서는 사물함에 하나씩만 담을 수 있음.

-두 개 넣으면 값 사라짐 (덮어쓰기됨)

---

★JS 변수 선언 ≠ Java의 변수선언과 다름(8개) - 외우기

//JS 변수 선언
// [데이터타입] 변수명;
// => 데이터타입 : 문자형(String), 숫자형(Number),
//                논리형(boolean), Null

	1Byte(8bit)	2Byte(16bit)	4Byte(32bit)	8Byte(64bit)
논리형	boolean(1byte)
정수형	byte(1byte)	short(2byte)	int(4byte)	long (8byte)
실수형			float(4byte)	double(8byte)
문자형		char(2byte)

*자바 - 기본타입(8개), 참조타입(무한대)

변수명 - 카멜표기법

//변수명 : 한글사용x, 영문자, 숫자조합, (특수문자 _, $)
//         가능하면 의미있는 단어, 카멜표기법
//카멜표기법 :  최소 두개 이상이 단어를 결합하여 작성
//             두번째 단어의 첫글자를 대문자로 표시
// applebox => appleBox

문자데이터 타입

document.write("<hr>");
//문자데이터 타입 : "". '' 사용하여 정보 저장
//본인 이름을 저장하는 변수 생성
var myName = '<h1>아이티윌</h1>';
document.write(myName);
document.write("<hr>");
document.write("아이티윌");

Java에서 “ ” , ‘ ’

‘ ’ : Char : 한글자

“ ” : String : 두글자

JS에서 “ ” , ‘ ’

구분 없음

---

document.write("<h1>이름 : 아이티윌</h1>");
var myName = '<h1>아이티윌</h1>';

위 아래가 같은 결과가 나옴

---

문자데이터 타입

document.write("<hr>");
//문자데이터 타입 : "". '' 사용하여 정보 저장
//본인 이름을 저장하는 변수 생성
var myName = '<h1>아이티윌</h1>';
document.write(myName);
document.write("<hr>");
document.write("아이티윌");

숫자데이터

document.write("<hr>");
//숫자데이터 : 숫자정보 저장(실수, 정수)
var tmpValue = 100; // 숫자
document.write(tmpValue + 100); // 결과값이 200으로(연산자) 변수의 데이터가 숫자인것을 알 수 있음
document.write(typeof tmpValue);
document.write("<hr>");
var tmpValue2 = "100"; // 문자
document.write(tmpValue2 + 100); // 결과값이 100100으로(연결자) 변수의 데이터가 문자인것을 알 수 있음
document.write(typeof tmpValue2);

데이터타입을 나타내는 명령어

document.write(typeof 변수명);

논리데이터

Null / undefined => 변수값이 없음

// null / undefined : 데이터가 없음, 정의되어 있지않음

var a; //undefined (초기화X)
var b = null; // null (초기화O)

undefined : 초기화를 하지 않은 상태 : 값이 들어있는지 모름 (사물함 배정받았을 때 안에 물건이 있는지 없는지 모름)

null : 초기화 한 상태 (사물함을 비워서 청소를 해놓은 상태)