몰입하며 나아가는 개발이란

Language/JavaScript

Java Script 란?

류하을 2020. 1. 6. 18:32

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