Javascript_1

rmfos82·2021년 11월 27일
0

Computers

목록 보기
5/13
post-thumbnail

좋은 듯 좋지않은 강의를 열심히 듣고 지내고 있다
시간은 빨리 가는거 같은데 내가 따라가는 속도가 너무 느리다
나는 끈적끈적하고 땀나는 여름보단 뽀송뽀송하고 건조한 겨울이 훨씬 좋다
겨울이 좋으니 겨울 스포츠 스노우보드를 정말 좋아한다 스피드있는걸 좋아하는 편인데
이 얘기를 왜 하냐면 내 머리도 보드만큼 빨리빨리 내려왔으면 좋겠네

Javascript_1

내가 처음으로 제대로 배우는 언어이다
html과 css는 언어는 언어인데 프로그래밍 언어라고 하지는 않는단다
그렇게 javascript는 내가 처음으로 프로그래밍 언어이다

javacript를 사용하려면 css와 마찬가지로 태그를 추가하고 그 안에 기능을 넣어줘야하는데 이런식이다

코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascirpt</title>
</head>
<style>
    .box {
        background-color: powderblue;
        width: 200px;
        height: 200px;
    }
</style>
<script>
    
</script>
<body>
    <div class="box"></div>
</body>
</html>
<script></script>

여기안에 기능을 구현할 자바스크립트를 만드는 것
이해 해보도록 하자 (이해하는것이 아니라고 하지만)

function(함수)

<script>
    function hey() {
        alert('안녕하세요~')
    }
</script>

우선 이해하지 말고 functionhey()함수이름을 정해주고
여기서 alert은 경고or알림이라고 생각하면 된다
이후

<body>
    <div class="box" onclick="hey()"></div>
</body>

body태그안에 onclick(한번클릭해라)그리고 hey()아까 지정한 함수이름을 넣어주고 박스모양을 클릭해주면

결과 메시지가 나오게 된다 이걸 한번 따라해보면 대충 느낌이 올 것이다
코드를 수려하게 아름답게 짜는거보다 우선은 동작을 가능하게 하는것이라고 하네

Google_console

javascript를 계속 작성하다보면 수많은 함수와 계산식 때문에 html나 css처럼 하나하나 Vs code를 통해 브라우저를 열어 확인하기는 번거롭고 너무 귀찮은 일이기도 하다 그렇때 사용하는것이
구글콘솔!!
자바스크립트는 구글콘솔으로 작동이 되고 간단한 확인도 할 수 있기 때문에 에디터에 코드를 옮기기전 많이 사용해보고 옮기는 것을 추천한다

console창 실행방법은
구글 페이지 접속 > 우클릭 >검사>console

console창에 hey()을 입력 후

에디터에서 실행한 모습과 같은 결과를 보여준다

!!!중요!!!
구글콘솔을 통해 수정한 사항은 실제로 바뀌지 않는다 에디터로 꼭 옮길 것!!

코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascirpt</title>
</head>
<style>
    .box {
        background-color: powderblue;
        width: 200px;
        height: 200px;
    }
</style>
<script>
    function hey() {
        alert('안녕하세요~')
    }
</script>
<body>
    <div class="box" onclick="hey()"></div>
</body>
</html>
profile
새벽에 처음 해보는 개발 공부! 뜨거운메로나

0개의 댓글