Javascript

Javascript / alert / console.log

WEB_CREASTORY 2023. 7. 11. 12:48

Javascript 는 웹을 움직이게 하는 코드

jQuery는 html 뼈대를 선택해서 쉽게 조작할 수 있는 코드모음, 라이브러리

Fetch는 짧은 코드로 서버에 요청을 보내고 받아올 수 있다.

 

자바스크립트(Javascript)란?

프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 표준언어

기초문법은 자바스크립트 뿐만이 아니라 개념자체는 어느 프로그래밍 언어나 거의 비슷하다.

 

클라이언트가 서버에 요청하면 서버가 클라이언트에게 HTML+CSS+Javascript를 준다. 모든 브라우저는 기본적으로 Javascript를 알아 듣게 설계되어 있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있다.

 

✅ 자바스크립트 기초  

# 자바스크립트 - HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기

# 함수 : 프로그래밍에서의 함수는 정해진 일을 반복하는 가능

- function hey()라는 규칙으로 hey라는 함수를 만들었고, alert(’안녕!’)이라는 작업을 할 때마다 반복적으로 수행하게 만들었다. <head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성, script 태그 안에 자바스크립트를 작성하는 것

   <script>
        function hey() {
            alert('안녕!')
        }
    </script>

버튼에 함수를 연결하기. onclick으로 버튼을 누르면 함수를 부를 수 있다.

<div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button onclick="hey()">영화 기록하기</button>
    </div>

[순서] (1) 버튼을 클릭하면 >> (2) hey를 부르고 >> (3) alert(’안녕!’)을 실행한다

 

✅ 화면에 미리 찍어보는 console.log()

script 태그 안에 있는 function hey()의 alert를 console.log로 바꿔서 적용.

<script>
        function hey() {
            console.log('안녕!')
        }
    </script>

브라우저 화면에서 오른쪽 클릭! 검사 클릭! >> 화면에 뜨는 개발자도구  Console 탭 확인 

코딩한 것이 맞게 출력되는지를 확인하기 위해 개발자들이 미리 찍어보는 도구가 console.log

그러나 값을 매번 찍어보려고 버튼을 클릭해서 실행하는 것은 불편하다. 그래서 console.log를 바로 부를 수 있다.

<script>
        console.log('hello world')
    </script>

저작자표시