*자바스크립트
Netscape 사의 브렌든 아이크가 개발
동적인 웹페이지 작성을 위해 사용되는 클라이언트측 프로그램 언어.
모든 웹브라우저에 자바스크립트 해석기가 내장되어 있음.
웹페이지의 동작을 정의하는 언어
인터프린터 언어 ---> 디버깅하는데 조금 어려움이있음.
클라이언트에서 실행됨 ---> 서버의 부담을 줄일수있다.
자료형이 없음(가변 자료형)
var i = 0;
i = "hello";
i = true;
* 자바스크립트의 활용
- jQuery : 자바스크립트 라이브러리
- JSON(JavaScript Object Notation) : 자바스크립트의 객체 표기 법, 서로 다른 기종간의 데이터 전송용으로서 XML을 대체하여 많이 사용되고 있음. 텍스트 기반의 데이터 교환 형식.
* 자바스크립트의 작성방법
1. 인라인 자바스크립트 : 태그 내부에 직접작성
<태그 이벤트 = "자바스크립트 코드">
<input type="button" onclick="alert('ok')">
2. 내부 자바스크립트
<head> 태그 또는 <body> 태그 내부에 작성
<script>
자바스크립트 영역
</script>
3.외부 자바스크립트
<script src="자바스크립트파일.js"></script>
*자바스크립트의 대화상자
-alert("메시지"); 단순 메시지박스
-var 변수 = prompt("메시지","기본값"); 입력받은 값을 변수에 저장할 때
-confirm("메시지") 사용자의 확인을 받을 경우
*HTML 요소에 접근하는 방법
1. id로 접근 : document.getElementById("태그의 id")
2.name으로 접근 : document.getElementsByName("태그의 name")
*배열
-배열선언
var 배열 =["값","값","값"];
var fruits = ["apple","banana","peach"];
var fruits = new Array();
fruits[0] = "apple";
fruits[1] = "banana";
fruits[2] = "peach";
*함수
- 함수 이름이 있는 경우
function 함수이름(매개변수){
함수몸체;
}
-함수이름이 없는 경우(무명함수)
function(매개변수){
함수몸체;
}
*HTML 문서에 쓰기
document.write("문장");
*자바스크립트의 객체
-내장객체 ;document,window,screen,browser등
Date : 날짜와 시간 작업
Number :수치형 데이터
String : 문자열 관련
Math :수학연산
Array : 배열
<script> // 자바스크립트 영역
// var 면수명;
var now = new Date(); //날짜 객체
//document : 웹페이지의 최상위 객체
document.write(now);
//콘솔창에 출력
console.log("날짜 : " + now);
</script>
//on이벤트 = "자바스크립트 코드"
//이벤트가 발생하면 지정된 자바스크립트를 실행함
//인라인 자바스크립트 -->다른데서 호출할수없다.
//헤드부분과 다른부분들은 생략했음!!
<button type="button" onclick="alert('hello')">
버튼을 누르세요.
</button>
---------------------------------------------
<script>
function test(){
alert("hello");
}
-----------------------------------------------
</script>
<button type="button" onclick="test())">
버튼을 누르세요.
</button>
----------------------------------------------------
<script>
var s; //변수선언(자료형이 없음)
s = 100; // 가변자료형(우변의 데이터형에 따라 결정)
document.write(s+"<br>"); //웹브라우저에 출력
s = "홍길동";
document.write(s+"<br>");
</script>
<script>
var s = "Hello World";
var t = "How are you " + " today " ; //문자열 연결
document.write(s+"<br>");
document.write(t+"<br>");
//대문자로 변환
document.write(s.toUpperCase()+"<br>");
//소문자로 변환
document.write(s.toLowerCase()+"<br>");
</script>
<script>
var x= 10;
var y = 20;
document.write(x+y+"<br>");
document.write(x-y+"<br>");
document.write(x*y+"<br>");
document.write(x/y+"<br>");
document.write(x%y+"<br>"); //나머지
</script>
ll
ll
ll
ll
~!!!!!함수로!!!!
funtcion test(x,y){
x = parseInt(x); //스트링을 숫자로 변환
y = parseInt(y);
document.write(x+y+"<br>");
document.write(x-y+"<br>");
document.write(x*y+"<br>");
document.write(x/y+"<br>");
document.write(x%y+"<br>"); //나머지
<body>
<form>
<input type="button" value="확인" onclick="test('10','20')">
</form>
</body>
<body>
//document.form1.a.value : a 태그에 입력된 값
// name으로 찾을때는 document를 쓴다!!
<form name = "form1">
<input type="text" name="a" size="10">
<input type="text" name="b" size="10">
<br>
<input type="button" value="확인" onclick="test(document.form1.a.value, document.form1.b.value)">
</form>
</body>
'자바스크립트' 카테고리의 다른 글
| 자바스크립트 DOM과 이벤트 처리, 입력 검증 (0) | 2016.10.13 |
|---|---|
| 자바스크립트 정리(2) (0) | 2016.09.02 |
| HTML5 drag&drop (0) | 2016.08.28 |