<head>
<style>
</style>
<script>
document.write("Hello JavaScript");
</script>
Hello JavaScript를 페이지에 띄워보았습니다.
지금부터는 JS에 관한 여러가지를 배우기 전에
document.write(); 를 이용해 의식을 치룹시다.
JS 출력코드
JS 에서는 scrips태그가 main method같은 역할을 합니다.
이 부분에 자바 스크립트 코드를 넣어서 사용합니다.
스크립트 태그 내부에 작성된 구문을 가리켜서 선언문이라고
합니다.
권장되는 선언문의 위치는 head태그 내부 혹은
body태그 내부의 script 태그입니다.
JavaScript의 출력코드는 다음과 같습니다.
-
브라우저 화면에 출력하기
document.write("Hello JavaScript"); -
콘솔에 출력하기
console.log("Hello Javascript"); -
경고창에 출력하기
alert("Hello JavaScript");
<head>
<style>
</style>
<script>
document.write("Hello JavaScript");
console.log("Hello Javascript");
alert("Hello JavaScript");
</script>이렇게 자바스크립트와 인사를 나누었습니다.
변수
Java Script의 변수는 Java와 마찬가지로 어떤 값을 담을 수 있는
수이자 공간의 이름입니다.
단, 자바처럼 변수를 선언할 때 자료형까지 선언하는 언어들을 가리켜
정적타입언어라고 부르는데(int, string, boolean 등을 선언하는 언어)
자바 스크립트는 자료형을 따로 지정하지 않아도 되며
이렇게 변수에 자료형이 부여되지 않는 언어를 가리켜서
동적타입언어라고 부릅니다.
이로인한 장점도 있고 단점도 있습니다.
자바 스크립트에서는 편리하게 변수 선언을 하는만큼
자료형 검사에 엄격해야 하겠습니다.
먼저, 변수 선언 var 변수명;을 활용하면 됩니다.
var num1 = 10;
var num2;
num2 = 20;
document.write(num1);
console.log(num2);
alert(num1 + num2);이렇게 변수를 작성할 시 주의할 점으로
-
대소문자를 구분한다는 점
-
변수명 맨 앞에 영문자, _, $ 를 사용가능한다는 점
-
변수명에는 $, _, 영문자, 숫자를 쓸 수 있다는 점입니다.
변수에 저장 가능한 데이터의 종류는
-
문자열 = 큰따옴표나 작은따옴표로 감싼 자료
-
숫자 = 수로만 입력된 자료
-
논리(bool) = true, false
-
null형 데이터 = null로 작성되는 빈 데이터
이렇게 4가지 입니다.
그러면 이러한 자료형들을 가지고 연산을 해보겠습니다.
<script>
// 자바에서와 마찬가지로 각각
// 더하기, 빼기, 곱하기, 나누기, 나머지로 활용합니다.
// 이항연산자는 자바와 똑같이 작동합니다.
var A = 10;
var b = 3;
var result;
result = A + b;
document.write(result + "<br/>");
result = A - b;
document.write(result + "<br/>");
result = A * b;
document.write(result + "<br/>");
result = A / b;
document.write(result + "<br/>");
result = A % b;
document.write(result + "<br/>");
</script><script>
// 비교연산자는 왼쪽, 오른쪽에 있는 것들을 비교해주며
// 자바와 마찬가지로 대소비교 연산자와
// 단순비교 연산자 두 종류로 나뉩니다.
// 단순비교는 모든 자료형간에 사용이 가능하지만
// 대소비교는 수치데이터끼리만 비교가 가능합니다.
// >, < , >=, <=
// 자바 스크립트의 ===, !==연산자
// 자바에서는 동등비교를 ==, !=로만 했습니다.
// 그러나 자바스크립트에서 ==, !=는
// 자료형을 고려하지 않고 생긴 것만 비교하기 때문에
// 문제가 됩니다.
console.log(10 == '10');
console.log(10 === '10');
var A = 10;
var B = 3;
var result;
result = A > B;
console.log(result);
result = A < B;
console.log(result);
result = A >= B;
console.log(result);
result = A <= B;
console.log(result);
</script>그리고 문자와 문자,
문자와 문자가 아닌 자료끼리도 더할 수 있습니다.
<script>
var txt1= "아름다운";
var txt2 = "우리나라";
// 문자 + 문자 = 문자
document.write(txt1 + txt2 + "<br/>");
// = 아름다운우리나라
var txt3 = "자바";
var txt4 = 8;
//문자 + 숫자 = 문자
document.write(txt3 + txt4 + "<br/>");
// = 자바8
var num1 = 200;
var num2 = 300;
var txt5 = String(1000);; // String(자료);실행 시 문자로 강제변환
// 숫자 + 숫자 + 문자 = 문자
document.write(num1+num2+txt5+"<br/>");
// = 5001000
</script>일단은 여기까지 정리해보았습니다.