17.12.14 웹수업2일차
자바 스크립트 수업시작 -비전문개발자를 위해
세미콜론 붙여도 되고 안붙여도됨
더블쿼테이션도 구분안함
변수를 선언하지않아도 사용가능(명시적자료형은 없지만 묵시적자료형있음)
네스케이프에서 개발한 프론트엔드 언어
정적문서 html 동적요소 지원하기 위해서 제작
Node.js Back End 영역까지 확장
최초 Live Script로 개명 ECMA스크립트(es) -> 자바스크립트
풀스택개발자
프론트엔드
문법은 같은데 자원관리 CPU Thread 뎁스 부족으로 돌아옴
자바디벨로퍼
3가지 방식있음
External - 파일을 따로 만들고 임포트
Internal - Html 에 자바코드 넣음(해드 - 스크립트 / 바디- html)
Inline - 한줄정도 함수로 연결
우리는 Internal 로 시작한다
외부 라이브러리
문서상에 <script> - </script>
내장라이브러리 내장객체 이용가능
클라이언트브라우져에 내장되어있음 라이브러리는 이미 준비되어있음
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
document.write('Hello Java Script<br>');
document.write('Hello Document');
</script>
</body>
</html>
===========
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
window.alert("Hello");
var result = window.confirm("Confirm Function 연습중입니다.");
document.write(result);
</script>
</body>
</html>
=============
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var result = window.confirm("Confirm Function 연습중입니다.");
document.write(result);
</script>
</body>
</html>
=============
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var input = window.prompt("메세지를 입력하세요");
document.write(input);
</script>
</body>
</html>
============
자바스크립트 html 제어 공부
DOM
html 인스턴스처럼 자바스크립트에서 가져다 쓸수있게 하는것
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
Hello
<script type="text/javascript">
var br = document.createElement("br");
document.body.appendChild(br);
</script>
World
</body>
</html>
=========== Element접근2
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<input type=text id=inputText>
<script type="text/javascript">
var ptag = document.getElementById("inputText");
ptag.value = "input value by id";
</script>
</body>
</html>
=========
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border=1>
<script>
var row = prompt("행");
var col = prompt("열");
var count = 1;
for (var j = 0; j < row; j++) {
if (j % 2 == 0) {
document.write("<tr bgcolor=#d2ddef>");
} else {
document.write("<tr>");
}
for (var i = 0; i < col; i++) {
document.write("<td>" + count++);
}
document.write("<tr>");
}
</script>
</table>
</body>
</html>
===================
자바스크립 함수(Function)
메소드와 동일
매개변수 가지지만 반환형가지지않음
C언어 함수포인터
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function plus(num1, num2) {
return num1 + num2;
}
var asVar = plus;
document.write(asVar(10, 20));
</script>
</body>
</html>
==========
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function doFunc(func){
func();
}
doFunc(function(){
document.write("hello<br>")
});
doFunc(function(){
document.write("hoho")
});
</script>
</body>
</html>
'JAVA 개발 공부 정보' 카테고리의 다른 글
| [개발교육] 자바 jsp 기초 - 5(인라인스크립트, 링크 합계 팝업) (0) | 2018.01.15 |
|---|---|
| [개발교육] 자바 jsp 기초 - 4(합계구하기) (0) | 2018.01.15 |
| [개발교육] 자바 jsp 기초 -3 (0) | 2018.01.15 |
| [개발] 자바 jsp 기초 - 1 (0) | 2018.01.15 |
| 무료폰트 소개-저작권문제없는폰트 (3) | 2017.08.22 |