Java Script 란
Java와 같은 언어가 아니며, front end를 제어하기 위한 스크립트(logic) 이다.
컴파일을 하지 않아 가볍고 속도가 빠른것이 장점이다.
화면 제어하기 위한 언어이며, Java Script 에서 JQuery로 또는 Vue, reAct 이런식으로 발전 해 나가고 있다고 한다.
Java Script (Client) |
Java (Server) |
Java Script는 head와 body 어느곳에다 작성하여도 상관없이 작동하며, .js 파일로 따로 작성하여 사용할 수도 있다.
<script type='text/javascript' src'경로/파일명.js'></script>
<script type="text/javascript" src"경로/파일명.js"></script>
// 작은 따음표 ''과 큰 따음표 ""를 구분짓지 않으며, 둘다 사용이 가능하나 '" 식의 혼용은 불가하다.
Java Script에서 id, class, name
id | 단 하나의 요소만 가능 |
class | 여러 요소에 적용가능 |
name | 여러 요소에 적용가능 |
Var 자료형
Java Script에서 var 자료형은 int, double, String, Object, Char, Array의 자료형을 전부 담을 수 있다.
var pi = 3.141592;
var name = "홍길동";
var number = 123;
var updown = true;
var per = "일지매", num = 234 + 1;
var str = "5" + 3 + 1;
alert(str);
var number = 3 + 3 + 1;
alert(number);
var cars = ["Saab", "Volvo", "BMW"];
var cars = new Array(3);
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
var obj = { firstname : "길동", lastname : "홍", age : 24, funcName : function(){ alert("funcName() 호출"); } };
var y = 123e2;
y = 123e-2;
for (i in cars){
console.log(cars[i]);
}
<script type='text/javascript'>
// getter 기본구성
var v = document.getElementById("id").innerHTML;
// setter 기본구성
document.getElementById("id").innerHTML = value;
</script>
Function
JavaScript에서는 Function을 사용할 수 있으며, 기본적인 형태는 다음과 같다.
<script> 태그 내에서 사용이 가능하다.
<script type="text/javascript">
function btnClick(){
//함수의 내용을 작성
}
</script>
"demo" 아이디로 접근하여 onclick에 대한 함수를 정의한 예시 코드 두가지.
<p id="demo">p tag</p>
<h3 id="demo">h3 tag</h3> // 아이디 중복불가능
<button type="button" onclick="btnClick()">버튼</button>
<script type="text/javascript">
function btnClick(){
document.getElementById("demo").innerHTML = "Hello world";
}
</script>
<input type="text" id="demo">
<button type="button" onclick="btnClick()">버튼</button>
<script type="text/javascript">
function btnClick(){
var = str document.getElementById("demo").value; // input에서 getter는 value로 가져와야한다.
alert("str = " + str);
}
</script>
'Language > JavaScript' 카테고리의 다른 글
JavaScript 구조 접근 방법 DOM(Document Object Model ) (0) | 2020.01.10 |
---|