학습 내용

html은 정보다
css는 디자인이다
JavaScript는 사용자와 상호작용한다

자바스크립트 실행 방법

크롬에서 JavaScript 테스트

크롬 웹페이지 - 우클릭 - 검사 - Console

> 1+1	// 입력
< 2		// 출력
> Math.random();		// 임의의 값
< 0.3458398220234411	// 매번 다름

> alert('화이팅');		// 화이팅 문구가 있는 경고창 띄움

> confirm('정말?');	// 확인 취소 버튼이 있는 경고창 띄움
< true		// 확인 누르면
< false		// 취소 누르면

> prompt('아이디?');	// 텍스트를 입력할 수 있는 경고창 띄움
< '텍스트'				// 입력받은 텍스트 출력
< null				// 취소 누르면

> alert(Math.random());		// 임의의 값 경고창에 띄우기

> alert(1);alert(2);alert(3)	// 순차적으로 실행

첫번째 경고창 확인버튼을 누르면 두번째 경고창이 뜨고
두번째 경고창 확인버튼을 누르면 세번째 경고창이 뜬다.

html에서 JavaScript 사용

<html>
    <body>
        <script>
            // alert(1);
            console.log(1);
            console.log(2);
            console.log(3);

            document.write(1+1);	
            document.write('<br>');
            document.write(Math.random());
        </script>
        <input type="button" value="Hello" onclick="alert('안녕');">
    </body>
</html>

console.log() : 웹브라우저의 콘솔창에 값 출력
document.write() : 웹페이지에 데이터 출력

<input type="button" value="Hello" onclick="alert('안녕');">

Hello 버튼을 누르면 안녕이라는 경고창이 뜬다

문자열과 숫자

<html>
<body>
    <h1>Number</h1>
    <script>
        console.log(1); // 정수
        console.log(1.1); // 실수
        
        // Operator 연산자
        console.log(1+1); // 2
        console.log(2-1); // 1
        console.log(2*2); // 4
        console.log(4/2); // 2

        // 함수
        console.log(Math.random());
        console.log(Math.floor(1.9));	// 내림값
        console.log(Math.floor(Math.random()*100));	// 0과 100 사이의 임의의 값

        console.log(Math.PI);	// 파이값
    </script>

    <h1>문자열(String)</h1>
    <script>
        console.log('Hello World');	// 작은따옴표 사용
        console.log("Hello World");	// 큰따옴표 사용
        console.log('Hello \
         World');					// 역슬래시 사용하여 줄바꿈
         console.log(`Hello 
         World`); 					// 백틱 사용

         console.log('Hello World'.length);	// 문자열 길이 확인
         console.log('Hell World'.replace('Hell',
         'Hello'));		// 문자열 대체 (Hell을 Hello로)
        console.log('Hello '+'World');	// 문자열 합치기

        console.log('1'+'1');
    </script>
</body>
</html>

변수

변수는 데이터에 이름을 붙인 것

<html>
    <body>
        <h1>Variable</h1>
        <script>
            var a = 1;
            a = 2;
            console.log(a);

            // 1 = 2; // 상수, constant 바뀌지 않는 값
            // 그래서 위와 같이 사용시 오류가 난다.

            let b = 1;
            b = 2;
            console.log(b);
        </script>

        <script>
            // // 10000 : 가격
            // // 0.1 : 부가가치세율
            // console.log(10000*0.1);
            
            let 가격 = 10000;
            let 부가가치세율 = 0.1;
            let 부가가치세 = 가격*부가가치세율;
            console.log(부가가치세);
        </script>
    </body>
</html>

상수는 그냥 사용하지 말고 변수로 선언해서 사용할 것

var과 let의 차이점
생활코딩 유투브 강의 JavaScript - var VS let VS const
https://www.youtube.com/watch?v=61iolhWgQt0&feature=youtu.be

querySelector

JavaScript에서 html의 클래스를 컨트롤할 수 있다.

<script>
  	// 배경색 검은색으로 변경
	document.querySelector('body').style.backgroundColor = 'black';
  	// 글자색 흰색으로 변경
	document.querySelector('body').style.color = 'white';
</script>

응용

<!doctype html>
<html>
<head>
    <title>WEB</title>
    <meta charset="utf-8">
</head>
<body>
    <h1><a href="index.html">html</a></h1>
    <h2>Welcome</h2>
    Hello, WEB<br>

    <input type="button" value="night" onclick="
        document.querySelector('body').style.background = 'black'
        document.querySelector('body').style.color = 'white'
    "> <input type="button" value="day" onclick="
        document.querySelector('body').style.background = 'white'
        document.querySelector('body').style.color = 'black'
    "> 
</body>
</html>

night 버튼 클릭하면 웹페이지를 어둡게, day 버튼 클릭하면 밝게 바꾼다.

학습 후기

강의를 들을 땐 querySelector를 사용하는게 헷갈렸는데 학습일지를 쓰는 과정에서 코드를 다시 보며 정리하니까 이해가 됐다.
정리하는 시간이 학습하는 시간만큼 들지만 그래도 코드를 뜯어보며 스스로 다시 작성해보고 정리하는 시간이 있어야 남는다는 걸 다시 한번 느낀다.

Author And Source

이 문제에 관하여(웹기초 - JavaScript 1일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hanss1122/웹기초-JavaScript-1일차

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

웹기초 - JavaScript 1일차