1. 소스 기술 선언
<head>
<meta charset="utf-8">
<script type="text/javascript">
</script>
<body>- 코드 <script>: 웹 브라우저에게 지금부터는 자바스크립트의 문법에 따라서 해석해서 실행해달라고 알려주는 구문(태그)
- 코드 </script>: 웹 브라우저에게 이 후부터 나타나는 코드는 HTML의 문법으로 해석하라고 브라우저에게 알려주는 구문(태그)
2. 소스 기술(실행)
// 결과 출력
document.write('Hello ECMAScript 1');
// 디버깅 출력 - 개발자도구의 console 출력되며, 실행과정 확인 가능
console.log('Hello ECMASript 2');- document.write(): 웹 페이지가 로딩될 떄 실행되면, 웹 페이지에 가장 먼저 데이터를 출력(웹 상 출력)
- console.log(): 웹 브라우저의 콘솔을 통해 데이터를 출력(콘솔창 출력)
3. HTML 태그를 이용한 결과 출력
<body>
<script type="text/javascript">
// HTML 태그를 이용한 결과 출력
document.write('Hello ECMAScript 1<br>');
document.write('<b>Hello ECMAScript 1</b>');
document.write('<table border="1" width="100">');
document.write('<tr>');
document.write('<td>1열</td>');
document.write('</tr>');
document.write('</tabel>');
</script>
</body>
See the Pen Untitled by hbkuk (@hbkuk) on CodePen.
- 자바스크립트 코드로 HTML요소를 웹 페이지에 직접 삽입하여 웹 브라우저에 출력 가능하며, 이떄는 document.write() 메소드를 사용
4. 변수 선언 / 초기화 / 사용
<body>
<script type="text/javascript">
// 변수 선언
let num;
//초기화 1
num = 10;
// 사용 1
console.log(num);
//초기화 2
num=20;
// 사용 2
console.log(num);
// 변수 선언과 동시에 초기화
let num2 = "10"
</script>
</body>- 변수를 사용하기 위해서는 두가지 단계를 거쳐야하며, ① 변수를 선언 ② 변수에 값을 할당 해 초기화
5. Boolean 사용과 데이터 타입 확인 연산자(typeof)
<body>
<script type="text/javascript">
// Boolean
let bool = true;
console.log(bool);
//typeof : 연산자
console.log(typeof bool);
//let bool2 = Ture;
//console.log(bool2);
let bool2 = 'true';
console.log(typeof bool2)
</script>
</body><body>
<script type="text/javascript">
// String / 자료형
let str1 = "Hello ECMAScript";
let str2 = 'Hello ECMAScript';
console.log( str1 );
console.log( str2 );
console.log(typeof str1);
</script>
</body>
- Boolean: 참과 거짓을 표현하는 자료형으로, true 또는 false 값을 가짐. javascript에서는 true는 1, false는 0과 같다고 표현되기도 함.
- typeof: 변수 타입을 문자로 반환하는 함수인 연산자. 타입을 확인해야 하는 피연산자 앞에 위치
6. 따옴표 / 들여쓰기 / enter키 구현
<body>
<script type="text/javascript">
let str1 = "Hello ECMAScript";
// 문자열에 따옴표 1
//let str2 ='Hello "ECMAScript"'
// 문자열에 따옴표 2(역슬래쉬) => escape code
//let str2 = "Hello \"ECAMScript\"";
// Tap키(들여쓰기) 구현
let str3 = "Hello\tECMAScript";
// Enter키 구현
let str4 = "Hello \nECMAScript";
console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);
</script>
</body>
7. undefined / null
<body>
<script type="text/javascript">
let test1 = '1';
console.log(typeof test1);
// undefined - 선언되지 않은 변수
console.log(typeof test2);
//초기화 되지 않은 변수 - undefined
let test3;
console.log( typeof test3)
console.log(test3);
//object 관련 내용
//null - 값의 형태를 지정하지 않은 초기화
let test4 = null;
console.log(typeof test4);
console.log(test4);
</script>
</body>- undefined: 변수를 선언하고 값을 할당하지 않은 상태, 자료형이 없는 상태
* 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당
** 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수
** 아래와 같은 경우에 변수가 undefined를 반환
- 값을 할당하지 않은 변수
- 메서드와 선언에서 변수가 할당받지 않은 경우
- 함수가 값을 return 하지 않았을 때
- null: 변수를 선언하고 빈 값을 할당한 상태(빈 객체)
* 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당
** 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수
8. 산술 연산자
<body>
<script type="text/javascript">
let num1 = 10;
let num2 = 3;
console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
</script>
</body>
9. 산술과 문자열
<body>
<script type="text/javascript">
// 산술
console.log( 1 + 2 );
// 문자열 결합
console.log( '1' + 1 );
let result1 = 1 + 1;
let result2 = '1' + 1;
console.log(typeof result1);
console.log(typeof result2);
//결과
console.log(1+1+1);
console.log('1'+1+1);
console.log(1+'1'+1);
console.log(1+1+'1');
// 우선순위 지정
console.log(1+1+1); // 3
console.log('1'+(1+1)); // 12
console.log(1+'1'+1); // 111
console.log((1+1)+'1'); // 21
</script>
</body>
'Front' 카테고리의 다른 글
| [Javascript] 테이블 별찍기와 구구단표 출력 (0) | 2022.09.14 |
|---|---|
| [Javascript] 변수 선언/데이터 타입/연산 (0) | 2022.09.13 |
| [CSS] display: inline, inline-block, block (0) | 2022.09.07 |
| [CSS] a:link, a:visited, a:hover, a:active (0) | 2022.09.07 |
| [CSS] 자식/후손/형제 선택자 (0) | 2022.09.07 |
댓글