자바스크립트(JavaScript, 줄여서 JS)란?
자바스크립트는 프로그래밍 언어로, HTML 상에서 쓸 수 있는 언어이다.
Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나?
A. 불가능한 이야기는 아니다.
다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에,
모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고,
모든 웹서버는 HTML+CSS+Javascript를 응답(response) 데이터로 주게 되어있다.
Q. Java와 Javascript는 어떤 차이가 있나?
A. 인도와 인도네시아.. 바다와 바다코끼리.. 처럼 아무 관련 없다.
자바스크립트 맛보기
띄어놓은 페이지의 크롬 개발자도구 콘솔창에서 자바스크립트를 빠르게 테스트해 볼 수 있다.
(*크롬 개발자도구 콘솔창: 개발자들을 위해 만들어둔 도구로, 새로고침하면 사라진다.)
1. 버튼을 클릭하면 경고창이 뜨는 기능 만들기
2. 버튼을 클릭하면 콘솔창에 문구를 띄우는 기능 만들기
=> 결과를 브라우저에 띄우고 개발자도구 -> console 탭에서 버튼을 누를 때마다 문구가 뜨는 것을 확인한다.
3. 콘솔창에 직접 코드 작성하기
콘솔창에 hey()를 쓰고 엔터를 쳐서 똑같이 경고창이 뜨는 것을 확인한다.
// head 안에 script 태그를 만든다.
// 1. 버튼을 클릭하면 경고창이 뜨는 기능 만들기
// onclick="hey()"
function hey(){
alert('안녕!');
}
// 2. 버튼을 클릭하면 콘솔창에 문구를 띄우는 기능 만들기
// onclick="hello()"
// 브라우저에서 개발자도구 -> console 탭을 열면
//버튼을 누를 때마다 문구가 뜨는 것을 확인할 수 있다.
// 복잡한 코드를 실행할 때 중간중간에 console.log()를 이용하여 확인이 가능하다.
function hello(){
console.log('Hello!');
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
<title>SW사관학교 정글 | 자바스크립트 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.wrap {
margin: auto;
width: 900px;
}
.comment {
font-weight: bold;
color: blue;
}
.posting-box {
margin: 10px auto 30px auto;
width:500px;
border: 3px solid black;
border-radius: 5px;
padding: 25px;
}
</style>
<script>
// head 안에 script 태그를 만든다.
// 1. 버튼을 클릭하면 경고창이 뜨는 기능 만들기
// onclick="hey()"
function hey(){
alert('안녕!');
}
// 2. 버튼을 클릭하면 콘솔창에 문구를 띄우는 기능 만들기
// onclick="hello()"
// 브라우저에서 개발자도구 -> console 탭을 열면
//버튼을 누를 때마다 문구가 뜨는 것을 확인할 수 있다.
// 복잡한 코드를 실행할 떄 중간중간에 console.log()를 이용하여
// 결과를 콘솔창에 출력하면서 잘 실행되는지 확인가능
function hello(){
console.log('Hello!');
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button onclick="hello()" type="submit" class="btn btn-primary">기사 저장</button>
</div>
<div class="card-columns">
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</body>
</html>
'알아두면쓸데있는신기한잡학사전 > 고군분투흔적들' 카테고리의 다른 글
| [Web] 서버 - 클라이언트 통신 (0) | 2022.08.22 |
|---|---|
| [Web] FE - jQuery (0) | 2022.08.22 |
| [Web] FE - Javascript 연산 (0) | 2022.08.22 |
| [Web] FE - JavaScript 변수 선언, 자료형 (0) | 2022.08.19 |
| [Web] FE - JavaScript 기초 (0) | 2022.08.19 |
