220919_JavaScript_국비_코드위치/ 데이터 타입/ 변수 & 상수/ 식& 연산자

JavaScript 언어

자바스크립트는 조각난 소스 코드 형태로 html페이지에 내장됨
소스코드는 컴파일 과정없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 처리
C언어 구조를 차용하고 단순화

웹 페이지에서 자바스크립트 역할

사용자의 입력을 처리하거나 웹 어플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용
역할
1. 사용자의 입력 및 계산
2. 웹 페이지 내용 및 모양의 동적제어
자바스크립트 코드로 html태그의 속성이나 컨텐츠, csss 프로퍼티 값을 변경해 웹 페이지의 동적 변화를
일으키는데 사용
3. 브라우저 제어
브라우저 윈도의 크기, 모양변경, 새 윈도우 탭 열기, 다른 웹 사이트 접속, 브라우저의 히스토리 제어 등
브라우저의 작동을 제어하는데 활용
4. 웹 서버와 통신
웹 페이지가 웹 서버와 데이터를 주고 받을 때 활용
5. 웹 어플리케이션 작성
자바스크립트 언어로 활용할 수 있는 api제공하므로, 웹 브라우저에서 실행되는 다양한 웹 어플리케이션 개발 가능

자바 스크립트 코드 위치

html 태그의 이벤트 리스너 속성에 작성
<script></script> 내에 작성
자바 스크립트 파일로 작성
url 부분에 작성

html태그의 이벤트 리스너 속성에 작성
1. html태그에는 마우스가 클릭되는 등의 이벤트가 발생할 때 처리하는 코드를 등록하는 리스너 속성이 있음.
사용자는 이 속성에 이벤트를 처리할 때 자바 스크립트 코트를 작성 할 수 있음
2. 예시) <img src="apple.png" alt="과일그림 onclick="this.src='banana.png' ">
onclick 이벤트 리스너 속성 | 자바스크립트 코드
<script></script> 내에 작성
1. <head></head>나 <body></body>내 어느곳이나 가능
2. 웹 페이지내 <script></script>여러번 사용가능
자바 스크립트 파일로 작성
1. 자바스크립트 코드를 .js로 저장하고 <script>태그의 src속성으로 불러 사용
2. 예시 ) <script src="file_name.ja">
</script>
url 부분에 작성
1. 자바스크립트 코드로 html컨텐츠를 웹 페이지에 직접 삽입해 바로 브라우저 윈도우에 출력 가능
document.write()나 document.writeln()으로 사용
2. 예시) 웹 페이지에 h3 텍스트를 삽입하는 방법
document.write("<h3> Hello World </h3>");

자바 스크립트 다이얼로그

경고 : alert("메시지")
확인 : confirm("메시지")
프롬프트 : prompt("메시지","디폴트 값")

데이터 타입 & 변수

자바스크립트 식별자

자바스크립트 프로그램의 변수, 상수(리터럴), 함수에 붙이는 이름
규칙
1. 첫번째 문자 : 알파벳, '_', '$'만 가능
2. 두번째 이상 문자 : 알파벳, 숫자, '_', '$'만 가능
3. 대소문자 구문

데이터타입 종류

숫자 타입 : 45,45.678
논리 타입 : tru, false
문자열 타입 : 'Hello' , 'World', "45+55"
객체 레퍼런스 타입 : 객체
null : 값이 없음을 뜻하는 특수 키워드(NULL, NuLL과 다름)

변수

변수에 데이터 타입을 정하지 않음
선언 방법(var키워드로 변수를 만드는게 바람직함)
1. var score; → undefined 값으로 초기화
var year, month, day;
var address="서울시";
2. age=25; → var없이 age변수 선언하고 25로 초기화
이미 선언된 변수라면 이 변수는 새로운 변수를 생성하지 않고 이미 존재하는 변수에 값 할당

상수(Literal)

데이터 값 자체
종류

종류		특징	예
정수	8진수	0으로 시작	var n=105;
	10진수		var n =77;
	16진수	0x로 시작	var n = 0x45;
실수	소수형	var height = 0.1234;
실수	지수형	var height = 0.1234E-4;	//1234 X 10 -4 → 0.1234
논리	참	true	var aaa = true;
논리	거짓	false	var aaa = false;
문자열		" " 묶음	var hello = "Hello";
문자열		' ' 묶음	var hello = 'Hello';
기타	null	값 없음	var hello = null;
기타	NaN 숫자가 아님 (Not a Number)	var =n paraseInt("Hello"); → paraseInt()는 NaN을 리턴

식과 연산자

연산 : 식(Expression)을 계산해 결과를 얻는 과정
종류

연산	연산자 종류
산술	+, -, *, /, %
증감	++,--
비트	&, \|, ^, ~
시프트	>>, <<, >>>
대입	=, *=, /=, +=, -=, &=, ^=, \|=, <<=, >>=, >>>=
비교	>, <, >=, <=, ==, !=
논리	&&, \|\|, !
조건	? :

<예시_1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 리스너 속성에 자바스크립트 코드</title>

</head>
<body>
    <h3>마우스를 클릭하세요</h3>
    <hr>
    <img src="../images/apple.png" alt="이미지" title="image" 
    onclick="this.src='../images/banana.png'"
    onmouseout="src='../images/apple.png'">
    <!-- this 생략가능 -->
</body>
</html>

문자열 : " " → ' ' →" " 교차하면서 사용해야함

문자열 기호로 인한 에러는 다음 줄에서 나타남

↓결과

마우스 클릭 전/ 마우스 클릭 후 / 마우스 포인터를 밖으로 out 시켰을 때

<예시_2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>script태그에 자바 스크립트 작성</title>
    <script>
        function over(obj){
            obj.src="../images/banana.png";
        }
        function out(obj){
            obj.src="../images/apple.png";
        }
        function click2(obj){
            obj.src="../images/back.png";
        }
    </script>
</head>
<body>
    <h3>마우스를 올려보세요</h3>
    <hr>
    <img src="../images/apple.png" alt="이미지"
    onmouseover="over(this)"
    onmouseout="out(this)"
    onclick="click2(this)">
    <!-- this는 img를 가리킴 -->
</body>
</html>

↓결과

<예시_3>

html파일 생성)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 파일에 자바스크립트 작성</title>
    <script src="fruit.js"></script>
</head>
<body>
    <h3>마우스를 올려 보세요</h3>
    <hr>
    <img src="../images/apple.png" alt="이미지"
        onmouseover="over(this)"
        onmouseout="out(this)">
</body>
</html>

js파일 생성)

function over(obj){
    obj.src="../images/banana.png"
}
function out(obj){
    obj.src="../images/apple.png"
}

↓결과

<예시_4>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document.write() 활용</title>

</head>
<body>
    <h3>document.write()활용</h3>
    <hr>
    
    <script>
        document.write("<h3> Welcome</h3>")
        document.write("hello")
        document.write("<mark> world</h3>")
    </script>
</body>
</html>

<mark> : 참조목적으로 강조된 문서의 텍스트, 인용문 일부에 주위를 끌기위해 사용

↓결과

<예시_5>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수, 전역변수</title>

</head>
<body>
    <h3>지역변수, 전역변수</h3>
    <hr>
    <script>
        // 전역변수
        var x = 100
        // 함수 f()선언
        function f(){
            // 지역변수
            var x=1;
            document.write("지역변수 x="+x)
            document.write("<br>")
            // this는 script의 전체를 가리킴
            document.write("전역변수 x="+this.x)
        }
        // 함수 f()호출
        f();
    </script>
</body>
</html>

↓결과

<예시_6>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 코드</title>
    <script>
        function over(obj){
            obj.style.background="yellow"
        }
        function out(obj){
            obj.style.background="white"
        }
        function over2(obj){
            obj.style.background="green"
        }
        function out2(obj){
            obj.style.background="#aa6699"
        }
    </script>

</head>
<body>
    <h3>마우스를 올려보세요</h3>
    <hr>
    <div onmouseover="over(this)" onmouseout="out(this)" >
        여기에 마우스를 올리면 배경색이 노란색으로 변경됩니다
    </div>
    <p onmouseover="over2(this)" onmouseout="out2(this)" >
        여기에 마우스를 올리면 배경색이 초록색으로 변경됩니다
    </p>
</body>
</html>

↓결과

마우스 올리기 전/ 첫번째 문장에 마우스 커서를 올렸을때 / 두번째 문장에 마우스 커서를 올렸을때

<예시_7>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>상수</title>

</head>
<body>
    <h3>상수</h3>
    <hr>
    <script>
        // 015 : 8진수, 10진수로 13
        var oct=015;
        // 0x15 : 16진수, 10wlstnfh 21
        var hex=0x15;
        // True로 하면 안됨(대소문자 구분)
        var condition=true;

        document.write("8진수 015는 10진수 : "+oct+"<br>")
        document.write("16진수 0x15는 10진수 : "+hex+"<br>")
        document.write("condition : "+condition+"<br>")
        document.write('문자열 : 단일인용부호로 표현'+"<br>")
        

    </script>
</body>
</html>

↓결과

<예시_8>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>산술연산</title>

</head>
<body>
    <h3>산술연산</h3>
    <hr>
    <script>
        var x= 32;
        var total = 100+x*2/4-3;
        var div =x/10;
        var mod = x%2;

        document.write("x : "+x+"<br><br>");
        document.write("100+x*2/4-3 = "+total+"<br>");
        document.write("x/10 = "+div+"<br>");
        document.write("x%2 = "+mod+"<br>");
    </script>
</body>
</html>

↓결과

<예시_10>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>대입 연산</title>

</head>
<body>
    <h3>대입연산</h3>
    <hr>
    <script>
        var x=3, y=3, z=3;
        document.writeln("x="+x+", y="+y);
        document.writeln("z="+z+"<br><br>");

        x+=3;
        y*=3;
        z%=3;

        document.write("x+=3; 실행 후, x ="+x+"<br>");
        document.write("y*=3; 실행 후, y ="+y+"<br>");
        document.write("z%=3; 실행 후, z ="+z);

    </script>
</body>
</html>

<pre>로 감싸면 document.writeln으로 개행 가능

↓결과

<예시_11>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비교연산</title>

</head>
<body>
    <h3>비교연산</h3>
    <hr>
    <pre>
        <script>
            var x=13, y=7;
            
            document.writeln("x= "+x+", y = "+y);
            document.writeln("x==y : "+(x==y));
            document.writeln("x!=y : "+(x!=y));
            document.writeln("x>= y : "+(x>= y));
            document.writeln("x> y : "+(x> y));
            document.writeln("x<= y : "+(x<= y));
            document.writeln("x< y : "+(x< y));
    </script>
    </pre>
</body>
</html>

↓결과

<예시_12>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>논리 연산자</title>

</head>
<body>
    <h3>논리연산</h3>
    <hr color="green">
    <pre>
    <script>
        var x = true; y = false;
        document.writeln("x = "+x+", y = "+y);
        document.writeln("x&& y : "+(x&&y));
        document.writeln("x|| y : "+(x||y));
        document.writeln("!x : "+(!x));
        document.writeln("<hr color = red size=5>");
        document.write('(3 > 2) && (3 < 4) : '+((3 > 2) && (3 < 4))+"<br>");
        document.writeln("(3==-2) ||(-1<0) : "+(3==-2) ||(-1<0));
    </script>
    </pre>
</body>
</html>

↓결과

<예시_13>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>조건 연산</title>

</head>
<body>
    <h3>조건 연산</h3>
    <hr>
    <script>
        var a = 33, b = 55;
        var ccc = (a>b)?(a-b):(b-a);
        document.write("a = "+a+", b = "+b+"<br><br>");

        document.write("a b 차이1 : "+((a>b)?(a-b):(b-a))+"<br>");
        document.write("a b 차이2 : "+ccc);
    </script>
</body>
</html>

↓결과

'UI > JavaScript' 카테고리의 다른 글

220921_JavaScript_국비_내장함수/ 객체/ Array (2)	2022.09.21
220920_JavaScript_국비_식& 연산자/ if~else/switch/for/while/do~while/function (2)	2022.09.20
220805_ JavaScript_생활코딩_refactoring/function (0)	2022.08.05
220804_JavaScript_생활코딩_if (0)	2022.08.04
220803_JavaScript_생활코딩_string/number (0)	2022.08.03

coing-daily

220919_JavaScript_국비_코드위치/ 데이터 타입/ 변수 & 상수/ 식& 연산자

JavaScript 언어

웹 페이지에서 자바스크립트 역할

자바 스크립트 코드 위치

자바 스크립트 다이얼로그

데이터 타입 & 변수

자바스크립트 식별자

데이터타입 종류

변수

상수(Literal)

식과 연산자

'UI > JavaScript' 카테고리의 다른 글

티스토리툴바

220919_JavaScript_국비_코드위치/ 데이터 타입/ 변수 & 상수/ 식& 연산자

JavaScript 언어

웹 페이지에서 자바스크립트 역할

자바 스크립트 코드 위치

자바 스크립트 다이얼로그

데이터 타입 & 변수

자바스크립트 식별자

데이터타입 종류

변수

상수(Literal)

식과 연산자

'UI > JavaScript' 카테고리의 다른 글

'UI/JavaScript' Related Articles

티스토리툴바