코딩 이야기
자바 스크립트 기초 본문
자바스크립트 위치
CSS와 마찬가지로 내부,외부,인라인으로 삽입가능
내부 <head> </head> 안 <script> </script>작성하여 넣기
외부 <head> </head>안에 <script src="js 파일"</script> 스크립트 파일 링크넣기
(스크립트 파일이 존재해야됨.)
인라인
<body></body>에 넣지만 최대한 </body>에 가깝게 넣기 (맨뒤에)
자바스크립트 문장,블록
문장
웹 브라우저에 내리는 명령. 각 문장끝에 ;(세미콜론)을 붙인다. 자바스크립트에서는 줄이 바뀌면 하나의 문장이 끝난 것으로 판단하기에 ;으로 한줄에 여러 문장을 넣을수 있다.문장이 모이면 코드가 된다. 작성된 순서대로 실행된다.
블록
문장은 블록(block)이라는 단위로 묶일 수 있다. 블록은 {로시작하고}로 끝난다. 블록의 목적은 여러 개의 문장을 묶어서 함께 실행하기 위함이다.
예)
{
document.write("Hello World");
document.write("How are you?");
}
문자 집합과 대소문자 구별과 주석문
html은 대소문자를 구별하지 않지만 자바스크립트는 대소문자구별을 한다.또한 공백 문자는 무시하기에 가독성을 위해 공백 문자를 추가할 수 있다.
주석문
단일 문장 주석은 // 으로 시작한다.
// 뒤에 주석을 적으면되지만 한 줄을 넘어가면 안된다.\
/* 다중 문장 주석은 css와 똑같이 적으면 ok*/
변수
변수는 데이터를 저장하는 상자다. var 키워드로 변수 선언을 할 수 있다.
var x ;
var 변수선언 x 변수 ;문장의 끝맺음
변수에 값을 저장하는 방법은
등호(=)를 사용해
x = 10; 으로 표현한다.
*여기서 변수규칙이 있는데
1.변수 이름은 문자로 시작해야 된다.(숫자시작x)
2.변수이름은 $나_시작 가능하다.
3.변수 이름은 대소문자를 구별한다.
문자열을 나타낼때에는("큰 따옴표")나('작은 따옴표')를 사용할 수 있다.
var name;
name = "Hong";
변수 선언과 초기화 동시에 하기
var name = "Hong";
문자열 저장하였던 변수에 다시 정수 저장가능
var x;
x = "Hong"
x = 10;
변수값 출력 예제
<script>
var x;
x = "Hello World";
alert(x);
</script>
하나의 문자에서 여러 개의 변수를 지정할 수 있다.
var name = "Hong", age = 24, job = "student";
var name = "Hong";
var age = 24;
var job = "student";
*변수 선언
변수의 값을 재정의할 수 도 있지만 변수의 값은 없어지지 않는다.
var name="Hong";
var name;
자료형
1.수치형 - 정수나 실수가 될 수 있다.
2.문자열 - 문자가 연결된 것을 의미한다. 텍스트라고 생각하면 된다.
3.부울형 - true 또는 false 값만을 가질 수 있다.둘 중의 하나를 표현하는 데 사용 된다.
4.객체형 - 객체를 나타내는 타입이다.
5.undefined - 값이 정해지지 않은 상태를 말한다.
예)
var x; // x의 값은 undefined가 된다.
x = 100; // x는 숫자를 가진다.
x = "홍길동"; // x는 문자열을 가진다.
t = "Hello"+"wrold"; // 문자열 "Hello World"가 된다.
문자열의 메서드
var s = "abc" // s 는 문자열 "abc"를 지정한다.
alert(s.lenght); // 3이 출력된다.
var s = "Hello World";
s.charAt(0); // "H": 첫 번째 문자
s.replace("e","E"); // HEllo World : E를 e로 변경한다.
s.toUpperCase(); // HELLO WORLD : 대문자로 변경한다.\
객체형
예)
var muCar = { model: "bmz", color : "red", hp : 100 };
document. write(myCar.model + "<br>");
document. write(myCar.color + "<br>");
document. write(myCar.hp + "<br>");
연산자
산술 연산자
산술 연산자설명
| + | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함. |
| - | 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌. |
| * | 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함. |
| / | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔. |
| % | 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환함. |
| ++ | 증가 ++x → x의값 3→4 |
| -- | 감소 --x → x의값 3→2 |
++나--와 같은 증가,감소 연산자를 사용할 때는 두 가지를 구분하여야 한다.
++x와 x++은 다르기 때문이다.
++x는 x값을 증가시킨후 x 의값을 수식에 사용하지만 x++은 이전 값을 수식에 사용한 후 x 값을 증가시키기 때문이다.
예)
y=++x(10) y=11
y=x(10)++ y=10
대입 연산자
대입 연산자설명
| = | 왼쪽의 피연산자에 오른쪽의 피연산자를 대입함. |
| += | 왼쪽의 피연산자에 오른쪽의 피연산자를 더한 후, 그 결괏값을 왼쪽의 피연산자에 대입함. |
| -= | 왼쪽의 피연산자에서 오른쪽의 피연산자를 뺀 후, 그 결괏값을 왼쪽의 피연산자에 대입함. |
| *= | 왼쪽의 피연산자에 오른쪽의 피연산자를 곱한 후, 그 결괏값을 왼쪽의 피연산자에 대입함. |
| /= | 왼쪽의 피연산자를 오른쪽의 피연산자로 나눈 후, 그 결괏값을 왼쪽의 피연산자에 대입함. |
| %= | 왼쪽의 피연산자를 오른쪽의 피연산자로 나눈 후, 그 나머지를 왼쪽의 피연산자에 대입함. |
문자열에서의 + 연산자
s1= "Welcome to ";
s2 = "Javascript";
s3 = s1 + s2;
비교 연산자
비교 연산자설명(1반환이 참)
| == | 왼쪽의 피연산자와 오른쪽의 피연산자가 같으면 1을 반환함. |
| != | 왼쪽의 피연산자와 오른쪽의 피연산자가 같지 않으면 1을 반환함. |
| > | 왼쪽의 피연산자가 오른쪽의 피연산자보다 크면 1을 반환함. |
| >= | 왼쪽의 피연산자가 오른쪽의 피연산자보다 크거나 같으면 1을 반환함. |
| < | 왼쪽의 피연산자가 오른쪽의 피연산자보다 작으면 1을 반환함. |
| <= | 왼쪽의 피연산자가 오른쪽의 피연산자보다 작거나 같으면 1을 반환함. |
if (age > 18) // 변수 age 값이 18보다 크면 참이 된다.
msg = "입장하실 수 있습니다.";
===연산자와 !==연산자는 특이한 점을 갖고 있는데
=== 값과 타입이 같으면 참
예) x===1 참 , x==="1"트루
!== 값과 타입이 다르면 참
예) x!==1 트루 x1=="1" 참
논리 연산자
논리 연산자설명
| && | 논리식이 모두 참이면 1을 반환함. (논리 AND 연산) |
| || | 논리식 중에서 하나라도 참이면 1을 반환함. (논리 OR 연산) |
| ! | 논리식의 결과가 참이면 0을, 거짓이면 1을 반환함. (논리 NOT 연산) |
조건 연산자
3개의 피연산자를 가지는 삼항 연산자로써
예를 들어
group = (age <30 ) ? "청년부" : "장년부";
나이가 30살보다 적으면 청년부 많으면 장년부가 입력된다.
연산자 우선순위
우선순위연산자설명
| 1 | ++ | 후위 증가 연산자 |
| -- | 후위 감소 연산자 | |
| () | 함수 호출 | |
| [] | 첨자 연산자 | |
| . | 참조에 의한 선택 | |
| -> | 포인터를 통한 선택 | |
| 2 | ! | 논리 NOT 연산자 |
| ~ | 비트 NOT 연산자 | |
| + | 양의 부호 (단항 연산자) | |
| - | 음의 부호 (단항 연산자) | |
| ++ | 전위 증가 연산자 | |
| -- | 전위 감소 연산자 | |
| (타입) | 타입 캐스트 연산자 | |
| * | 참조 연산자 (단항 연산자) | |
| & | 주소 연산자 (단항 연산자) | |
| sizeof | 크기 | |
| 3 | * | 곱셈 연산자 |
| / | 나눗셈 연산자 | |
| % | 나머지 연산자 | |
| 4 | + | 덧셈 연산자 (이항 연산자) |
| - | 뺄셈 연산자 (이항 연산자) | |
| 5 | << | 비트 왼쪽 시프트 연산자 |
| >> | 부호 비트를 확장하면서 비트 오른쪽 시프트 | |
| 6 | < | 관계 연산자(보다 작은) |
| <= | 관계 연산자(보다 작거나 같은) | |
| > | 관계 연산자(보다 큰) | |
| >= | 관계 연산자(보다 크거나 같은) | |
| 7 | == | 관계 연산자(와 같은) |
| != | 관계 연산자(와 같지 않은) | |
| 8 | & | 비트 AND 연산자 |
| 9 | ^ | 비트 XOR 연산자 |
| 10 | | | 비트 OR 연산자 |
| 11 | && | 논리 AND 연산자 |
| 12 | || | 논리 OR 연산자 |
| 13 | ? : | 삼항 조건 연산자 |
| 14 | = | 대입 연산자 및 복합 대입 연산자 (=, +=, -=, *=, /=, %=, <<=, >>=, &=, ^=, |=) |
| 15 | , | 쉼표 연산자 |
'JAVA스크립트' 카테고리의 다른 글
| 반복문 (2) (0) | 2023.01.09 |
|---|---|
| 반복문 (0) | 2023.01.06 |
| 조건문 (0) | 2023.01.06 |
| HTML 요소에 접근하기 (0) | 2023.01.06 |
| 숫자와 문자열 사이의 반환 (0) | 2023.01.06 |