728x90
자바스크립트
자바스크립트는 객체 기반의 스크립트 언어입니다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다. 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.
자바스크립트 특징
- 자바스크립트는 객체 기반의 스크립트 언어입니다.
- 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.
- 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.
실습
실습 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: coral;
cursor: pointer;
}
</style>
<script type="text/javascript">
function changeColor(obj) {
obj.style.backgroundColor = 'green';
}
</script>
</head>
<body>
<div id="box" onclick = "changeColor(this)" ></div>
</body>
</html>
실습 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#test {
cursor: pointer;
}
</style>
</head>
<body>
<img id="test" alt="클릭하면 바뀌는 이미지" src="default.jpg">
<script type="text/javascript">
document.querySelector('#test').onclick=function(){
this.src = 'change.jpg';
};
</script>
</body>
</html>
실습 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function printInfo(str) {
if (str == 'apple') {
console.log('사과');
}
else if (str == 'banana') {
console.log('바나나');
}
else {
console.log('등록되지않은 단어입니다...');
}
}
for (var i = 0; i < 3; i++) {
var input = prompt('단어를 입력하세요.');
printInfo(input);
}
</script>
</body>
</html>
실습 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습1</title>
</head>
<body>
<script type="text/javascript">
function printInfo(str) {
if (str == 'admin') {
document.write("관리자페이지입니다.");
}
else {
document.write("안녕하세요, " + str + "님!");
}
}
var input = prompt('아이디를 입력하세요.');
printInfo(input);
</script>
</body>
</html>
실습 5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
</head>
<body>
<script type="text/javascript">
function Car(name) {
this.name = name;
this.printInfo = function() { // 무명 함수 -> printInfo 함수
console.log('차의 주인은 ' + this.name + '님입니다.');
}
}
var car1 = new Car('홍길동');
var car2 = new Car('티모');
console.log(car1); // Car {name: '홍길동', printInfo: ƒ}
console.log(car2.name); // 티모
car2.printInfo(); // 차의 주인은 티모님입니다.
</script>
</body>
</html>
실습 6
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
</head>
<body>
<script type="text/javascript">
var arr1 = new Array(1, 2, 3, 0.14, -2.22, 'apple', '홍길동');
var arr2 = ['apple', 'banana', 'kiwi'];
console.log(arr1); // Array(7)
console.log(arr2[0]); // apple
</script>
</body>
</html>
실습 7
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열의 활용</title>
<style type="text/css">
div {
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
var colorDatas = ['MediumSeaGreen', 'Dodgerblue', 'BlueViolet', 'Goldenrod', 'Tomato'];
for (var i = 0; i < colorDatas.length; i++) {
var elem = '<div style="background-color:' + colorDatas[i] + '">' + colorDatas[i] + '</div>';
document.write(elem);
}
</script>
</body>
</html>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
728x90
