오늘은 자바스크립트를 간단하게 배워보겠다.
html에서 자바스크립트를 쓰는 방법은 다음과 같다.
<script type ='text/javascript'>
</script>이렇게 스크립트 태그를 써줄것이다.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<script type ='text/javascript'>
</script>
<body>
</body>
</html>이런 식으로 세팅을 해둔다. 자바스크립트는 스크립트 태그안에서 코딩을한다고 생각하면된다.
보통 html은 세미콜론 ;를 사용하지 않지만 스크립트 태그를 사용하면 일반 프로그래밍 언어처럼 세미콜론 ;을 붙인다.
c언어에서는 printf 함수가 출력에 있어서 기본적이었다면 자바스크립트에서는 alert 함수가 기본적이다.
<html>
Hello Javascript<br>
<script type ='text/javascript'>
alert("안녕하세요");
</script>
</html>이렇게 한번 써서 출력해보자.
그러면 이렇게 출력이 된다. 신기하지 않은가?
자바스크립트는 이렇게 스크립트 태그 사이에 쓰는 것이다. 자바 스크립트 태그를 여러 개 만들어서 쓸 수 도 있다.
여기서 중요한게 자바스크립트 태그를 쓸때 위에 쓸거면 위에 아래쪽에 쓸거면 아래쪽에 이렇게 한 곳에 몰빵해서 써야한다. 그때그때 필요할때 계속 만들어서 써도 물론 가능하긴 하지만 그건 좋은 코딩이 아니라고한다. (교수님 피셜)
자바에서 출력방법은 총 3가지 가 있는데 alert( ); , document.write(변수이름); , console.log (변수이름); 이렇게다.
alert(‘ “안녕하세요” ’); 은 가능함.
alert(“ ‘안녕하세요’ ”); 은 가능함.
alert(‘ ’안녕하세요‘ ’);은 불가능
alert(“ ”안녕하세요“ ”);은 불가능
" " 혹은 ' '을 사용할 때 위와 같은 상황에서 중복으로 사용하면 인식을 못한다.
자바스크립트도 프로그래밍언어처럼 변수설정이 가능한데 주로 변수 앞에 var라고 붙인다. 안 붙여도 상관은 없다.
다음은 document.write를 설명하겠다.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<script type ='text/javascript'>
a=30;
b=20;
c=a+b;
document.write(c);
</script>
<body>
</body>
</html>이렇게 써보자. 그러면 우리가 생각한 결과로는 30+20인 50이 출력되어야 할 것이다. 확인해보자.
그렇다 이렇게 출력이 되었다.
다음은 console.log( ) 방식을 설명하겠다.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<script type ='text/javascript'>
a=30;
b=20;
c=a+b;
console.log(c);
</script>
<body>
</body>
</html>이렇게 써보고 아까와 같은 결과인지 봐보자.
어라 아무것도 뜨지 않는다??
그런데 절대 이상한게아니다.
필자는 앞에서 크롬창이 html의 기본적인 테스트 인터넷익스플로러 환경이라고 했었다.
크롬창에서 Ctrl+Shift+i를 해보아라.
그러면 이러한 창이 뜰텐데 여기서 저 빨간색 밑줄 친 콘솔을 눌러보자.
50이 출력된 것을 확인할 수 있다.
html을 배운 사람이라면 크롬에서 Ctrl+Shift+i를 써서 콘솔창을 띄울줄 기본적으로 알아야한다.
그리고 스크립트 태그 안에서는 주석처리가 가능하다.
범위 주석 : /* ~ */
한줄 주석 : //
다음은 새로운 자바 스크립트 함수를 설명하겠다.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<img id='img1'>
<div id="info1">
</div>
<div id="info2">
</div>
<script type ='text/javascript'>
document.getElementById("info1").innerHTML="<h1>Hi~~</h1>";
document.getElementById("info2").innerHTML="<ul><li></li></ul>";
document.getElementById("img1").setAttribute('src','movie.jpg');
</script>
<body>
</body>
</html>일단 이러한 소스가 있고 실행결과는
이렇게 나온다.
소스를 설명하자면 <img id='img1'> 으로 이미지의 id를 img1으로 설정해주었다.
그리고 스크립트 태그 안에서 document.getElementById("img1").setAttribute('src','movie.jpg'); 이러한 소스를 통해
img1을 movie.jpg로 바꾸어 주었다. 이때 movie.jpg는 파일질라를 통해서 미리 옮겨 주었기 때문에 출력이 된 것이고
notepad++와는 다르게 Brackets는 무조건 파일질라를 통해 사진을 옮겨주는 과정을 거쳐야 한다.
그리고 <div id="info1">으로 id를 info1로 설정해주었다.
그리고 스크립트 태그 안에서 document.getElementById("info1").innerHTML="<h1>Hi~~</h1>"; 이러한 소스를 통해
info1을 Hi~~ 라는 문자가 출력되도록 바꾼 것이다.
그리고 <div id="info2">으로 id를 info2로 설정해주었다.
그리고 스크립트 태그 안에서 document.getElementById("info2").innerHTML="<ul><li></li></ul>"; 이러한 소스로
info2를 . 이라는 문자가 출력되도록 바꾼 것이다.
그러면 이번에는 링크도 만들어보자. go~~~ 라는 글자를 눌렀을 때 구글홈페이지로 가지게 만들어보자.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<a id="a1">go~~~</a>
<script type ='text/javascript'>
document.getElementById("a1").setAttribute('href','http://www.google.co.kr');
</script>
<body>
</body>
</html><a id="a1">go~~~</a> 를 통해 id를 a1으로 설정해주었고
document.getElementById("a1").setAttribute('href','http://www.google.co.kr');
여기서 a1을 google 사이트와 연동이 되도록 해준 것이다.
사진의 경우 src를 썼고 이건 사이트 주소이므로 href를 사용
모든 프로그래밍 언어에서 ..의 경우 상위 폴더를 의미 .의 경우 현재 폴더를 의미
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<a href='#' onclick='sayhello()'>go</a>
<script type ='text/javascript'>
function sayhello()
{
alert('안녕');
alert(add(4,5));
}
function add(op1, op2)
{
return op1+op2;
}
</script>
</html>go를 누르면 안녕 나오고 9(= 4+5)가 출력된다.
일단 이렇게 뜨고 go를 누르면?
이렇게 안녕이라는 문구가 나온다.
확인을 누르면?
9 라는 문구가 나온다.
'기술노트 > 웹프론트엔드' 카테고리의 다른 글
| 웹 프론트 엔드 강의(5) (0) | 2020.12.28 |
|---|---|
| 웹 프론트엔드 강의(4) (0) | 2020.12.25 |
| 파일질라 설치 (0) | 2020.12.25 |
| 웹 프론트엔드 강의(2) (0) | 2020.12.25 |
| 웹 프론트엔드 강의(1) (0) | 2020.12.25 |
