| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- ajax 동기식
- 원씽 내용
- 원씽 책
- async false
- 빅분기 필기
- Notepad 줄바꿈
- 책 원씽
- dom sax 장단점
- 자바 채팅
- The OneThing
- 빅데이터분석기사
- 자바스크립트 undefined
- 빅데이터분석기사 독학
- 빅분기
- TCP Socket
- dom sax 차이점
- 빅분기 독학
- 간단한 채팅 프로그램
- 자바 채팅 프로그램
- TCP 채팅
- 동기식 비동기식
- ajax 비동기식
- 원씽 독후감
- 빅데이터분석기사 필기
- 노트패드 줄바꿈
- async
- 원씽 후기
- 노트패드++ 줄바꿈
- xml 파싱 방법
- Notepad++ 줄바꿈
- Today
- Total
SooBlending
[JavaScript] JavaScript의 개념 및 Java와 차이점 본문
< JavaScript와 Java차이점 >
1. JavaScript: 클라이언트 스크립트 (브라우저에서 실행!!)
JSP(Java) : 서버 스크립트 (JVM에서 실행!!)
hello.html
-----> HTML태그
CSS
JavaScript
hello.jsp
-----> HTML태그
CSS
JavaScript
Java
2. JavaScript는 HTML문서내에 포함되어서 실행.
<html>
<head>
<script>
변수선언, 함수(function)정의
</script>
</head>
-------------------------
<body>
<script>
함수 호출
</script>
</body>
</html>
3. 자료형을 선언,정의하지 않는다!! ★
자바case)
String name="홍길동";
name="길라임";
name=10; (X)
자바스크립트case)
name="홍길동";
var su; ---> 변수선언
su=10; ---> number타입
su="김주원"; ---> String타입
su=new Date(); ---> Date타입
4. JavaScript내의 주석
- Java와 동일
- // : 라인주석
/* */ : 블럭주석
- HTML주석은 <script>태그를 인식하지 못하는 브라우저를 위해 정의!!
<!--
alert('안녕'); ====> 만약 HTML주석을 사용하지 않는다면 화면에 출력!!
-->
5. 자바스크립트에서의 문자열 표현
---> 작은 따옴표와 큰 따옴표를 구분없이 사용!!
----> 전혀 차이가 없음.
name1="홍길동"; (O)
name2='길라임'; (O)
name3="김주원'; (X)
str1 == str2
'길동' === "길동" ===>? true
6. 자바스크립트는 구분자, 종결자 역할을 하는 ';'을 생략하는 것이 가능.
===> 이유: 라인(줄바꿈)을 통해 서로 다른 문장을 구분하기 때문.
name='길동'
age=13
==> (O)
잘못된 예)
name="라임" age=15
===> (X)
name="라임"; age=15
===> (O)
7. 자바스크립트 /(몫), %(나머지)
10/5 ----> 2
10%5 ----> 0
10/3 ----> 3.33333333
parseInt(3.33333333) ----> 3
10%3 ----> 1
8. 조건문
if(조건식){
조건식 결과가 참일 때 실행할 문장;
}
if(조건식){
조건식 결과가 참일 때 실행할 문장;
}else{
조건식 결과가 거짓일 때 실행할 문장;
}
if(조건식1){
조건식1 결과가 참일 때 실행할 문장;
}else if(조건식2){
조건식1 결과가 거짓이고!!
조건식2 결과가 참일 때 실행할 문장;
}else{
조건식1,2 결과가 거짓일 때 실행할 문장;
}
※차이점
if(조건식 ===> boolean, 숫자, 객체){
}
숫자: 0인 수(false), 0아닌 수(true) 구분
객체: 브라우저에서 지원되는 객체인지 아닌지 판별.
---> 변수에 값이 존재하는지 판단.
존재하는 객체(문자열, 브라우저가 지원하는 객체) ---> true
null ---> false
9. 반복문
for(초기화; 조건식; 증감연산자){
반복할 자바스크립트 문장;
}
문제) 브라우저 화면에 '안녕'을 10번 출력하시오.
for(var i=0; i<10; i++){
document.write('안녕~!!');
}
10. switch/case문
switch(정수,문자){//자바 JDK6버전까지
}
switch(정수,문자열){//자바스크립트
case "길동":
case "라임":
}
11. 문자열 비교
자바)
str1 == str2 : 메모리 비교
str1.equals(str2) : 문자열 내용 비교
자바스크립트)
str1.equals(str2) ===> 에러!! (equals메소드르 제공X)
str1 == str2 : 문자열 내용 비교!!
===> 빈문자열 체크
1. str.length == 0
2. str == '' ==> 내용비교
str === '' ==>엄격한 비교(1. 자료형검사, 2.내용검사)
str !== '' ==>엄격한 비교(1. 자료형검사, 2.내용검사)
===> 2번을 많이 사용
12. 함수(메소드)정의!! ★★
함수형식)
function 함수명(){
} ----> return;
function 함수명(변수명1, 변수명2){
return "리턴값";
}
자바스크립트의 함수는 오버로딩을 제공할까요?
---> 기본적으로 제공X
function hello(){
안녕!!
}
hello();호출 ----> 안녕!!
function hello(){
씬짜오!!
}
===> 에러 발생X
hello();호출 ----> 씬짜오!!
function hello(name){
봉쥬르!!
}
===> 에러 발생X
===> 나중에(밑에) 정의된 같은 이름의 함수가 존재한다면(매개변수의 갯수는 상관없이)
아래에 있는 함수로 overwrite됨!!
===> 함수호출시 매개변수와 상관없이 함수명만 일치하면 호출 가능!!
hello(); (O) ----> 봉쥬르!!
hello('홍길동'); (O) ----> 봉쥬르!!
hello('홍길동',13); (O) ----> 봉쥬르!!
13. HTML태그내의 속성 중 on접두사를 갖는 속성은 이벤트 속성. (~ 했을때)
예) <input type='button' value='버튼' onclick="자바스크립트 코드">
===> 주로 함수 호출
===> 버튼을 클릭했을때
onfocus : 포커스가 들어왔을때
onblur : 포커스를 잃었을때
onchange : select태그에서 선택을 바꾸었을때
onkeydown : 키보드를 눌렀을때
onkeyup : 키보드 땠을때
onmouseover : 마우스가 진입했을때, 엘리먼트위에 올려졌을때
onmouseout : 마우스가 나갔을때
onmousedown : 마우스를 클릭했을때
14. 생성자
JTextField tf = new JTextField();
---> 데이터 얻을 때 : 변수명 = tf.getText();
---> 데이터 줄때 : tf.setText(데이터);
자바스크립트)
<input type='text' name='su1'
id='su1'
class='su1'
value='기본값'>
---> 데이터 얻을 때 : 변수명 = su1.getValue();
====> 변수명 = su1.value;
---> 데이터 줄때 : su1.setValue(데이터);
====> su1.value = 데이터;
15. <배열 Array>
자바: 자료형 [] 변수명 = new 자료형[size];
자바스크립트: 변수명 = new Array(size);
예) var myArry = new Array(5);
===> 배열의 크기(length)가 5인 배열 생성!!
===> ※ 변수선언에 자료형 뿐만 아니라 []를 명시하지 않음.
var myArry[] = new Array(5); ===> (X)
- 자바스크립트 배열은 한 변수명에 여러 자료형의 데이터를 입력할 수 있음.
- 가변길이 배열!! (정해진 범위를 넘어서는 데이터에 대해서도 입력가능)
- 데이터 집합을 표현할 때 {}를 사용하지 않고 []를 사용.
===> 자바) int [] su = {1,2,3,4};
자바스크립트) var su = {1,2,3,4}; ===> 에러발생!!
var su = [1,2,3,4]; ===> (O)
※ 참고 ★★
'{}'표기는 JSON(JavaScript Object Notation)표현!!
===> 형식) 자바의 Map 또는 Properties와 비슷. (key,value쌍으로 데이터를 저장!!)
key==>변수명 , value==>데이터!!
===> var 변수명 = {key1:value, key2:value, key3:value};
key: 데이터를 저장하기 위한 유일한 변수.
value: 저장할 데이터.
var v = {} ; ===> v는 Object다!!
===> var v = new Object(); 와 동일함!!
예)
var arr = {11,22,33}; (X)===> 에러발생: {}는 JSON
JSON은 {key:value}!!
var arr = [11,22,33]; (O)
---> 데이터 접근법) arr[0] arr[1] arr[2]
var p = {name:'홍길동', age:13, job:'학생'};
---> 데이터 접근법1) p.name p.age p.job
데이터 접근법2) p['name'] p['age'] p['job']
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] Ajax 동기식 처리 하는 법 (0) | 2022.11.17 |
|---|