JavaScript [컴퓨터 언어] by 바죠

자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.
이 언어는 웹브라우저 내에서 사용된다. 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
또한 Node.js와 같은 런 타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용된다.

라이브스크립트(LiveScript)라는 이름으로 개발되었다. 최종적으로 자바스크립트가 되었다.
자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있다. 
하지만, 자바와 자바스크립트는 직접적인 관련성이 없다.

jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.
jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.
jQuery는 한 개의 JavaScript 파일로 존재한다.

웹브라우저를 프로그램밍적으로 제어하려면 JavaScript 언어를 사용해야한다. 
브라우저를 프로그래밍적으로 제어하는 것이 목적인 언어가 JavaScript 언어이다.
이 목적을 정확하게 수행하는 사실상 유일한 언어이다.
그런데, 현재, JavaScript 언어는 그 용도로만으로 사용되지 않는다. 좀 더 확장된 개념이다.
웹서버를 동작하시키는 도구
웹서버에서 사용되도록 하는 기술, java, php, python, ruby


웹브라우저, 노드, 구글 애플리케이션

ECMA 국제기구
ECMAScript <==  JavaScript <== LiveScript


웹서버 -----------  웹브라우저
웹서버를 JavaScript로 만들 수 있다. 
Google Apps Script

기본적으로 html 파일 양식에 script를 넣는 형식으로 JavaScript 프로그램을 만든다.

브라우저를 실행하고 function F12키를 치면 콘솔이 나타난다.

\'s
backslash 를 사용하면 escape
문자와 문자 구획을 정의하지 않고 그기능을 해지함: escape 기능

1
"1"
다른 데이터 형식.
typeof 1
"number"
typeof "1"
"string"

var 를 한 번만 사용하여 변수임을 선언한다.
//  주석, comment

/*
구간 주석, comment area
*/

var a ;
alert(a);

세미콜론 ; 이 반드시 필요한 경우--> 한 줄에 여러 명령어가 들어 갈 경우
한 줄에 한 명령어를 사용할 경우, ; 이 필요없을 수도 있다.

대입, 비교 연산은 사실상 다른 언어들과 유사하다.
특별히 다른점이 없다.

조건문

반복문
for(var i=0 ; i < 1000; i++){

}

함수
function(arg1,arg2) {

return  zz;
}

function numbering(){
var i=0;
while (i < 10){
document.write(i);
i+=1;
}
}

numbering = function (){}

(function(){})();  
익명함수
일회성으로 사용할 때 사용함. 이름이 필요없고, 바로 실행할 때 사용함. 

배열
var members =[1,2,3,4];
배열 생성시킴.
members[0]
members[1]
for(i=0 ; i <members.length ; i++){}


var li=['a', 'b'];
li.push('c');
뒷쪽에 추가할 경우, push

li=li.concat(['d','e']);
두 개 이상 추가할 경우, 뒷쪽에 추가할 경우.
li.unshift('z');
제일 앞쪽에 추가할 경우, unshift

splice 명령어을 이용하면 특정구간에 추가할 경우에 사용한다.
array.splice(1,0,'d');
한 개를 1번 위치 앞에 추가할 경우.
즉, 0, 1번 사이에 추가할 경우.

array.splice(1,1,'x','y');
1번 위치에서 1개를 삭제한 후 'x', 'y'를  추가함.

shift   첫번째 원소 제거
pop   마지막 원소 제거
sort 정렬
reverse 역순 정렬

데이터를 담아 내는 그릇: 객체, object

모듈화 개념.
<script src="aaa.js"></script>
속성 src 가 있으면 해당 파일을 읽어 온다. 
.js 라는 파일을 만들고 이것을 읽어 올 수 있다.
예를 들어 함수를 불러올 수 있게 된다.
head 영역에 위치시킨다.

윈도우 커맨드 창에서 아래와 같이 실행함.
node node.demo.js

jQuery
명령어들의 리스트, 사용설명서 API documentation을 파악해야한다. 라이버러리 사용의 핵심.
다운로드 받은 파일을 읽어온다.
src="jquery.js" 헤더 부분에서 읽어 드림.



-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------


JavaScript examples
<!DOCTYPE html>
<html>
<head>
<title> get values and print result </title>
</head>
<body>
<h1> get values and print result </h1>
Enter val1: <input type='number' id="v1" value="" /> <br/>
Enter val2: <input type='number' id="v2" value="" /> <br/>
Enter val3: <input type='number' id="v3" value="" /> <br/>
Enter val4: <input type='number' id="v4" value="" /> <br/>
<button onclick="getValues()">Get Values</button>
<p id="boo"></p>
<script>
function getValues(){
var y = document.getElementById('boo');
var v01 = document.getElementById('v1').value;
var v02 = document.getElementById('v2').value;
var v03 = document.getElementById('v3').value;
var v04 = document.getElementById('v4').value;
var vv1=Number(v01);
var vv2=Number(v02);
var vv3=Number(v03);
var vv4=Number(v04);
var a = vv1*vv1 + vv2*vv2 + vv3*vv4;
y.innerHTML=a;
}
</script>
</body>
</html>
 
-------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<script>
function myfunct(){
var num1= parseInt(document.getElementById("num1").value);
var num2= parseInt(document.getElementById("num2").value);
document.getElementById("output").innerHTML=num1 + num2;
}
</script>
number 1 : <input type="text" id="num1">
+
number 2:  <input type="text" id="num2">
<button onclick="myfunct()">=</button>
<p id="output"> </p>
</body>
</html>


-------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
   function validator(){
     if(document.aform.thebox.checked)
 alert("Yes, it is checked!");
     else
 alert("No, it is not checked!");
}
</script>
</head>
<body>
<form name="aform">
 <input type="checkbox" name="thebox" />
 <input type="button" value="Press me!" onClick="validator()" />
</form>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<script>
function myfunct(){
var num1= parseInt(document.getElementById("num1").value);
var num2= parseInt(document.getElementById("num2").value);
document.getElementById("output").innerHTML=num1 + num2;
}
</script>
number 1 : <input type="text" id="num1">
+
number 2:  <input type="text" id="num2">
<button onclick="myfunct()">=</button>
<p id="output"> </p>
</body>
</html>


-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------





덧글

댓글 입력 영역

최근 포토로그



MathJax