2019. 5. 20. 17:23ㆍJava script
-------------------------------------java script-----------------------------------
자바스크립트
- 브라우져에서 실행되는 프로그램을 작성할 수 있다.
- 하는 일
- HTML문서의 컨텐츠를 변경할 수 있다.
- HTML태그의 속성값을 변경할 수 있다.
- HTML문서의 스타일을 변경할 수 있다.
- 사용자와 상호작용하는 프로그램을 작성할 수 있다.
(이벤트 핸들링)
- 서버와 데이터 교환을 하는 프로그램을 잗성할 수 있다.
(Ajax 코딩)
자바스크립트 프로그램 작성하기
- script 태그 사이에 작성한다.
* 브라우저가 스크립트태그 사이에 작성된 코드는
자바스크립트 엔진을 사용해서 실행시킨다.
* 스타일과 스크립트가 둘다쓰이면 스타일을 먼저 작성한다.
<script>
자바스크립트 프로그램
</script>
script 태그의 위치
- head태그 안에
<head>
<meta>
<title></title>
<script>
자바스크립트
</script>
</head>
- body 태그 안에
<body>
<h1></h1>
<p></p>
...
<script>
자바스크립트 코드
</script>
</body>
////////////////////////////////스크립트 명령어
document
- 문서내에 찾을때
getElementById
- document의 하위로 아이디로 값을 찾을때
textContent
- 텍스트 값을 변경한다.
사용예시 ) document.getElementById("아이디").textContent("변경할 값")
console.log()
- println같은것 , 이나 +로 값을 붙일 수 있다.
onclick="아이디"
- 마우스를 클릭하는 행위를 아이디로 지정할 수 있다.
onmouseenter="아이디"
- 마우스를 위에 올리는 행위 아이디로 지정할 수 있다.
/////////////////////////////////자바스크립트 연산자
자바스크립트 연산자.
사칙연산자 +, _, *, /, %
대입연산자 =, +=, -=, *=, /=, %=
증감연산자 ++, --
비교연산자 >, >=, <, <=, ==, ===, !=, !==(타입이 다르거나 값이 다르면 true)
논리연산자 &&, ||, !
자바스크립트의 참/거짓
참
- 참 예시 : true, 100, -3.14, "안녕", "false"
거짓
- 거짓 예시 : false, 0, "", undefined, null, NaN
///////////////////////////////////자바스크립트 함수
function 함수명(매개변수1, 매개변수2, ...) {
수행문;
수행문;
}
function 함수명(매개변수1, 매개변수2, ...) {
수행문;
수행문;
return 반환값;
}
var 변수 = function(매개변수1, 매개변수2, ...) {
수행문;
수행문;
}
var 변수 = function(매개변수1, 매개변수2, ...) {
수행문;
수행문;
return 반환값;
}
자동실행함수는 브라우저가 HTML문서를 전달받아서
화면에 로딩하자마자 실행할 작업을 구현할 때 사용한다.
* 사용자와 상호작용하는 이벤트 처리용 함수와 버튼을 연결짓기
* 화면에 표시할 초기 데이터를 서버로부터 받아오는 작업
* 화면의 요소를 감추거나 보이도록 하는 작업
////////////////////////////////////자바스크립트 배열
* 자바스크립트의 배열은 가변길이 배열이다.
(자바의 ArrayList와 유사하다.)
* 배열의 요소는 인덱스로 조작할 수 있다.
* 배열의 생성
var x = []; // 길이가 0인 배열이 생성된다.
var x = [10, 72, 30]; // 요소를 3개 가진 배열이 생성된다.
* 배열의 값 조회
var x = [10, 20, 30];
console.log(x[0]);
* 값을 찾을때
for(var i=0; i<names.length;i++){
console.log(names[i]);
}
/////////////////////////////////////자바스크립트 객체
* 자바스크립트는 객체지향프로그래밍 언어다.
* 자바스크립트는 클래스없이 객체를 생성한다.
* 자바스크립트의 객체는 속성과 기능을 가질 수 있다.
* 자바스크립트의 객체는 속성과 기능을 key, value의 형태로 저장한다.
(자바스크립트의 객체는 자바의 HashMap과 유사하다.)
* 생성하기
var x = {}; // 비어있는 객체 만들기
var x = { // 속성을 가지고있는 객체 만들기
name:"홍길동";
age: 30,
height: 182.4,
weight: 76
};
* 객체에 구성요소(속성, 기능) 추가하기
var x = {};
x["name"] = "홍길동"; // 객체에 name이라는 이름으로 "홍길동" 추가하기
x.email = "hong@gmail.com"; // 객체에 email이라는 이름으로 "hong@gmail.com" 추가하기
x.age = 10;
x["height"] = 182.4;
x["weight"] = 76;
* 기능을 포함하고 있는 객체 생성하기
var x = {
plus:function(a,b){
console.log(a + b)
},
minus: function(a, b) {
console.log(a - b);
}
};
* 객체에 기능 추가하기
var x = {}
x["plus"] = function(a, b) {
console.log(a + b);
};
x.minus = function(a, b) {
console.log(a - b);
}
* 객체의 속성과 기능 사용하기
var x = {
name: "홍길동",
age: 10
}
console.log(x.name);
console.log(x["age"]);
var x= {
plus: function(a, b){
console.log(a + b);
},
minus: function(a. b){
console.lob(a - b);
}
}
// 사용법
x.plus(2, 5);
x.minus(6, 4);
예시1) 내부 코드로 사용하기
버튼을 클릭하면
예시2) 외부 파일로 사용하기
demo2.jsp
버튼을 클릭하면
예시3) 값을 표시하기
앞에부터 버튼을 누르면
// 앞의 숫자는 클릭한 숫자이다.
예시4) 변수 선언하기 var 사용 ( 모든 변수는 var로 사용가능)
예시4-1) 변수 선언하기
예시4-2) 변수
예시5) 연산자
예시5-1) true false
예시6) function 사용
예시7) 변수안에 function을 넣어 사용하기
예시8) 자동실행 함수 만들기
예시9) function실행
예시10) 자바스크립트의 배열 var x = [];
예시11) 자바스크립트 객체 사용하기 var x = {};
