JavaScript 입문과 웹 UI개발(1)-강의소개와 자바스크립트의 근본

2022. 9. 29. 12:24애플코딩 javascript 강의

반응형

강의특징

1. 프로젝트 중심으로 가르침(문법은 사이드로)

2. 혼자 코드 잘짜는 법 알려드림

 

개별 환경 셋팅

난 VS Code 사용할거임

 

바탕화면에 폴더 만들어서  

index.html 만들어라

미리 보기를 띄울려면 live server를 다운로드 받아서 html파일 마오스 오른쪽 클릭후 Open with server 누른다.

 

javascript는 html을 조작하기 위한 것이다. 

 

첫번째 프로젝트로 alert 박스 만들기를 해볼거다.

 

<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>
    <h1 id="hello">안녕하세요</h1>
    <h1 id="hi">초보에요</h1>
    <script>
        //자바스크립트 작성하는 곳
        //document는 html 문서라는 뜻
        // .(점)을 ~의 라고 생각하면 된다
        //getElementById는 id가 ~인 html 요소를 가져와 달라는 뜻
        // innerHTML은 거기에 안녕을 넣어 달라는 것
        // =은 왼쪽에 있는걸 오른쪽에 넣어 준다는 것 
        document.getElementById('hello').innerHTML='안녕';

        //document.getElementById('???').????='???';
        //물음표에 원하는걸 넣어서 사용할 수 있다.
        document.getElementById('hi').innerHTML='고수에요';
        
        //getElementById('???')는 원하는 요소를 찾기위한 selector 라고 한다
        //컴퓨터는 빡대가리라서 추상적으로 설명하면 못알아 들어서 구체적으로 얘기를
        //해줘야 알아들음. 그래서 코드가 긴거임

        //숙제!!!
        //안녕하세요 라는 글씨를  16 px로 바꿔봐라
        //숙제 답
        document.getElementById('hello').style.fontSize='16';
    </script>
</body>
</html>
Document

안녕하세요

초보에요

 

강의 출처: JavaScript 입문과 웹 UI개발

https://codingapple.com/

 

코딩애플 온라인 강좌 - 개발자도 단기완성!

단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절

codingapple.com

 

반응형