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>
안녕하세요
초보에요
강의 출처: JavaScript 입문과 웹 UI개발
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기 (1) | 2022.09.30 |
---|---|
JavaScript 입문과 웹 UI개발(5)-자바스크립트 이벤트 리스너 (1) | 2022.09.30 |
JavaScript 입문과 웹 UI개발(4)-function의 파라미터 문법 (0) | 2022.09.30 |
JavaScript 입문과 웹 UI개발(3)- JavaScript function 문법 사용법 (0) | 2022.09.30 |
JavaScript 입문과 웹 UI개발(2)-동적 UI 만드는 스텝(Alert 박스 만들기) (0) | 2022.09.30 |