본문 바로가기
front-end/javascript

[JAVASCRIPT] 자바스크립트 개념알기!

by CodeMango 2023. 1. 30.

 

자바스크립트란?

* Client(Web) 처리언어

* 자바스크립트는 "처리"를 해주는 것이다.

* 버튼이나 입력창을 주었을 때 "처리"를 해준다.

* 주로 front-end 처리를 한다. 로그인 했을 때 back-end로 가기 전에 검사를 먼저 해줘야한다.

예를 들어 아이디, 비밀번호가 몇글자 이상 이하인지 등을 검사해주는게 자바스크립트가 하는일이다.

* 자바스크립트는 서버와 관련이 없다.

 

자바스크립트의 목적

* web resource에 접근하고 처리하기 위한 스크립트이다.

* tag들에 접근해서 데이터를 취득, 수정, 검색한다.

* 컴파일을 하지 않는다. --> 처리속도가 빠르다 --> 가볍다

예) 회원가입 창 -> 검사 : 빈칸 검사, id의 글자나 종류 검사, pssword 검사

* CSS 제어

* Timer 를 설정하고 특수효과도 구현할 수 있다

 

Java Script -> Jquery -> angular.js

ajax react.js / axios

vue.js

 

(앞으로 진도 - Jquery 하루 나감, 일반 회사에서는 리액트를 많이 쓴다. angular는 문제가 많아서 많이 쓰지 않는다. )

html의 id가 여기서 쓰인다.

tag의 접근자 : Attribute(속성) , Property(특성)

 

<p id = "pid"> Hello</p>

<h2 class = "hcls"> </h2>

<input type = "text" name = "food">

 

id : Java Script에서 접근하기 위해 사용 / 1개만 적용 가능

class : CSS를 적용하는 경우 사용 / 다수 사용 가능

name : 값을 넘겨줄 경우에 사용 / 다수 사용 가능

 

variable

function

class

 

기본 문법

head 에 넣으면 한번만 실행되고

body에 넣으면 값이 계속 변경될 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id = "demo"> 안녕하세요 JavaScript </p>

<script type="text/javascript">   // java script의 영역

console.log("Java Script가 실행되었음");
 
// alert("Java Script 실행")

// getter : document 안에서 getElementById를 얻어와라, id값은 demo이고, 그 안에 있는 html 코드를 가져와라 
// = 안녕하세요 JavaScript 를 demo 에 넣음.
var demo = document.getElementById("demo").innerHTML;
// 변수값을 alert 창에 표현
alert(demo);

// setter 
document.getElementById("demo").innerHTML = "hi 자바스크립트";

</script>
</body>
</html>

 

internal, external 방식

  1. internal : 내장 -> head 에 입력
  2. external : 외부파일 -> 외부파일에 입력하고 불러오는 방식 (코드가 길 때)

 

 

head에 입력 - internal 방식

external 외부파일 방식

1)index1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!--  external 방식 : 이 화면에 코드를 안 쓰고 외부파일로 빼고, 외부파일에서 불러옴 -->
<script type="text/javascript" src = "myjs.js"> </script>

</head>
<body>
 
<h3 id="demo"> Hello 자바 스크립트 </h3>
	
<!--  2. onclick 써주고 거기에 함수명 "따옴표" 안에 입력 -->
<button type = "button" onclick = "btnFunc()" > 클릭 클릭 </button>
<br>

<p id = "data"> </p>


</body>
</html>

2)javascript file - myjs.js

// <script type ="text/javascript">  빼고 그 밑의 코드만 옮기기


// 1. button 클릭했을 때 아래 함수 호출하고 싶다면? button type에 onclick 추가
function btnFunc() {
	alert("btnFunc() 호출");
	
	var demo= document.getElementById("demo").innerHTML;
//p 태그에 값이 옮겨짐.
	document.getElementById("data").innerHTML = demo;
}

 

변수

1. let : 최신 방식 (권장)

- 위치 상관 있음. 선언을 반드시 먼저 해야한다.

- 문자, 숫자 상관없이 출력된다.

- 문자열 + 숫자 == 문자열

- false는 0으로 true는 1로 계산된다.

2. var (variable) : 예전 방식 - 어느 위치에 있어도 상관 없다 ( 선언을 나중에 해도됨) / 변수명 충돌되도 동작함

var : 변수명 충돌 (오류x)
let의 특징

l = 234;
let l;
alert(l);

-> 선언을 중간에 해서 오류남
-> let은 반드시 위에 선언해야함.

let l = 345;
-> 변수명 충돌로 오류남
 

배열

* 자바 문법과 차이점이 있다.

* 배열은 객체로 취급한다. Array == object (객체)

 

자바와의 차이점 

<자바>
int array[] = new int[5];
int array[] = { 1, 2, 3, 4, 5 } ;

<자바스크립트>
let cars = [];
let cars = [ " benz", 'bmw', 'saab' ] ;   // 초기화
console.log(cars[1]);

배열 5개 잡고싶을 때
let arrNum = new Array(5);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript"> 

// variable 은 어느 위치에 있어도 상관 없다 ( 제약 x )
/* var v;
v = 123;

l = 234;
let l;
alert(l); */

/* 	let number = 123;
	let pi = 3.141592;
	let name = "홍길동";  // '홍길동' 짝은따옴표 가능
	let answer = true;  // 논리형 가능
	
	number = 234 + 345;
	alert(number);
	number = name + pi;  // 문자열 + 숫자 = 문자열 (자바에선 에러남) ==홍길동3.141592
	alert(number); */
	
// 배열
	
// 	let cars = [];
	let cars = [ " benz", 'bmw', 'saab' ] ;   // 초기화
	console.log(cars[1]); 
	
	let arrNum = new Array(5);
	arrNum[0] = 11;
	arrNum[1] = 22;
	arrNum[2] = 33;
	arrNum[3] = 44;
	arrNum[4] = 55;
	console.log(arrNum[2]);
	console.log(arrNum);
	
// 반복문에서 let은 생략 가능
	for(let i=0; i<arrNum.length; i++) {
		console.log(arrNum[i]);
	}
	
// for each문  : in을 쓴다
	for( i in cars){
		console.log(i);
		
	}
	
// 람다식 : 한줄로 줄여서 쓰는것 (찾아보면서 하기)
	cars.forEach(element=>console.log());
	
	let myobj = {
			firstname:"길동",   //firstname: 키값 / "길동" : value
			lastname:"홍",	   //lastname: 키값 	/ "홍" : value
			age:24,	   		   //age: 키값 		/ "24" : value
			print:function(){
				console.log('print() 호출');
				
			}
	}
	console.log(myobj.firstname);
	console.log(myobj.age);
	
//함수 호출
	myobj.print();
	
//클래스도 사용 가능하다, 자바에서 클래스는 constructor생성자가 기본적으로 따라붙는데 
// 자바스크립트에서는 constructor라고 직접 쓰고 따로 선언 필요 없이 this쓴다.
	class Person {
		constructor(name, age) {
			this.name = name;		// this.name = Person의 멤버변수
			this.age = age;
		}
		print(){
			console.log(this.name + " " + this.age);
		}
	}
	
	let p = new Person("성춘향", 16);
	console.log(p.name);
	p.print();		// print 함수 호출 
	
	document.getElementById("demo").innerHTML = "홍길동 "    + typeof "홍길동" + "<br>" 
											+	"325 " 	  + typeof 325 + "<br>"
											+	"3.14 "	  + typeof 3.14 + "<br>"
											+	"true "	  + typeof true + "<br>"
											+	"array "  + typeof cars + "<br>"
											+	"object " + typeof {num:1, name:"abc"};
																				
	//Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')	
	
	

</script>

</body>
</html>

 

class

자바스크립트에서도 클래스를 사용할 수 있다.

자바에서 클래스는 생성자가 기본적으로 따라붙는데

자바스크립트에서는 constructor를 직접 써서 생성자를 만들고, 따로 변수를 선언하지 않고 this를 쓸 수 있다.

 

class Person {
		constructor(name, age) {    // 생성자
			this.name = name;		// this.name = Person의 멤버변수
			this.age = age;
		}
		print(){
			console.log(this.name + " " + this.age);
		}
	}
	
	let p = new Person("성춘향", 16);
	console.log(p.name);
	p.print();		// print 함수 호출

typeof (variable)

 

반환값

  • undefined : 변수가 정의되지 않거나 값이 없을 때
  • number : 데이터 타입이 수일 때
  • string : 데이터 타입이 문자열일 때
  • boolean : 데이터 타입이 불리언일 때
  • object : 데이터 타입이 함수, 배열 등 객체일 때
  • function : 변수의 값이 함수일 때
  • symbol : 데이터 타입이 심볼일 때

 

접근 (태그)

1. 일반태그 (출력만 가능)

-> h, a, pre, p , span

- innerHTML로 접근

 

2. 입력태그 (입출력)               -> 참조 : https://wikidocs.net/164305

-> input type = "text, radio, checkbox"      /  textarea  등

- value로 접근

 

3. event 태그

-> button, input type="button"

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!--  접근? -->

<!--  일반태그 
id가 충돌되면 맨 위에것만 적용됨 (demo 2개) -->
<h3 id = "demo" >Hello JS</h3>
<p = id = "demo">p tag</p>


<!--  입력태그 
input 에 값 넣을 때는 value로 넣는다.-->
<input type = "text" id = "text" size="20" value = "초기값이당" placeholder = "입력" >
<br><br>

<button type = "button" onclick = "buttonClick()"> 클릭 </button>
<!-- input으로 써도되긴 함 <input type = "button" value = "클릭" onclick= "buttonClick()"> -->

<script type ="text/javascript">

function buttonClick() {

	//demo 값 "Hello JS"가 "버튼 클릭"으로 바뀜/ innerHTML은 <>과 </>의 사이값이라는 것
//	document.getElementById("demo").innerHTML = "버튼 클릭"
	document.getElementById("demo").innerText = "버튼 클릭"  // innerHTML과 같은 결과 나옴
	//input은 inner가 없으니까 value로 접근
	document.getElementById("text").value = "안녕하쎄용"; // '초기값이당' 을 '안녕하쎄용'으로 변경	
}
</script>
</body>
</html>

 

함수

자바에서는 funtion(함수) 는 독립적인것/ method는 클래스에 소속된 함수 라고 하고

자바스크립트에서는 모든걸 function(함수)라고 한다.

 

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

function(함수)
<br><br>

<button type="button" onclick="func()">함수호출</button>

<script type="text/javascript">
function func() {
	console.log('func() 호출');
}

// func();

let num1 = 10;
let num2 = 3;

function multi(n1, n2) {
	return n1 * n2;
}

let r = multi(num1, num2);
console.log(r);

</script>

<br><br>

<button type="button" onclick="btnclick( 'one' )">버튼 one</button>
<button type="button" onclick="btnclick( 'two' )">버튼 two</button>
<button type="button" onclick="btnclick( 'three' )" )"="">버튼 three</button>

<script type="text/javascript">
function btnclick( n ) {
	if(n == "one"){
		console.log("버튼 one 을 클릭했습니다");
	}else if(n == "two"){
		console.log("버튼 two 을 클릭했습니다");
	}else if(n == "three"){
		console.log("버튼 three 을 클릭했습니다");
	} 
}

</script>

</body></html>

함수-date

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id = "demo"> </p>
<br>

<script type="text/javascript">
function displayDate(){
	document.getElementByID("demo").innerHTML = Date(); // Date라는 클래스가 있음
}
 
//displayDate();
	setInterval("displayDate()", 1000);
	
</script>

<br><br>

<h3 id= "date"> </h3>

<script type ="text/javascript" > 
//시간 얻어오기
	let d = new Date();
	
// setter : 원하는 시간으로 설정 (java calendar문법과 비슷)

// 방법1 (더 많이 사용)
//	d = new  Date(2023, 2 -1, 28, 12, 36, 0, 0 );  // 월 계산시 -1 해줘야함 : Tue Feb 28 2023 12:36:00 GMT+0900
// 방법2 
//	d = new Date("October 12, 2023 14:45:12"); // Thu Oct 12 2023 14:45:12 GMT+0900
	
	document.getElementById("date").innerHTML = d;
	
// 잘라서 출력하기
	document.getElementById("date").innerHTML = d.getFullYear();	
	document.getElementById("date").innerHTML = d.getMonth(); +1; 	//월 계산시 1 더해줘야함
	document.getElementById("date").innerHTML = d.getDate();
	document.getElementById("date").innerHTML = d.getDay(); 		//요일
	document.getElementById("date").innerHTML = d.getHours(); 
	document.getElementById("date").innerHTML = d.getMinutes();  	// 분
	document.getElementById("date").innerHTML = d.getSeconds(); 	// 초
	
</script>
</body>
</html>

 

형변환

자바에서는

문자열 -> 숫자(10진수) 변환시 Integer.parseInt() 사용했다.

자바스크립트에서는 변환시 parseInt 만 입력한다.

 

주의사항은 함수 명칭에 click 쓰면 안된다는 것!

<button type = "button" onclick = "cast()"> 변환 </button>  

-> "cast()" 같은건 되는데 click은 쓸 수 없음

형변환 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!--  형변환-->

입력:<input type = "text" id="num" size="20">
	<button type = "button" onclick = "cast()"> 변환 </button>  
<br><br>
결과:<input type = "text" id="result">

	<script type="text/javascript">
	function cast(){
		let strNum = document.getElementById("num").value;
			
		//문자열 -> 숫자
		let num = parseInt(strNum);	
		num = num * 10;
		
		document.getElementById("result").value = num;
		
		//숫자 -> 문자열
//		let numStr = num + "";
		let numStr = num.toString();		//정석대로 쓰기
		alert(numStr + 12);

}
</script>

</body>
</html>

 

Access Attribute

 

id : 주로 자바스크립트에서 접근

class : CSS

name : 데이터 전송용

 

자바스크립트에서 이 세개 다 접근 가능하긴 한다. 알아야 하는 이유는 부트스트랩에서 class로 접근 못하는 경우가 생기는 등 예외사항이 있으므로 알고 있어야 한다.

<p id = "demo" class = "demo"></p>

-> 이렇게 각각 접근해서 사용할 수도 있음!

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<!-- 1.id -->
<p id = "pid"> p tag 입니다</p> <br>

<!-- 2. class   //  p : [0]번지, h3: [1]번지 -->
<p class = "cls"> p tag class</p>  
<h3 class= "cls"> h3 tag class </h3>
<br>

<!-- 3. name  -->
<input type = "text" name="name" value = "hello"><br>
<input type = "text" name="name" value = "world"><br> 

<button type = "button" onclick = "btnClick()"> 버튼 </button>



<script type="text/javascript"> 

function btnClick() {
	
//1. id로 접근했을 때
	document.getElementById('pid').innerHTML = 'p태그 값을 출력';
	
// 복수형 : 엘리먼트들 - getElementsByClassName/ 여러개니까 번지수 써줘야함 [0]번지
//	document.getElementsByClassName("cls")[0].innerHTML = "class에 값을 대입";
	
// 2. class 로 접근했을 때
// for문으로 다 입력하기
	let arrClass = document.getElementsByClassName("cls");  // 배열이 넘어옴
//	alert(arrClass[0].innerHTML); // inner에 접근하는방법
 
	for ( i = 0 ; i< arrClass.length; i++) {
		console.log(arrClass[i].innerHTML);
		
	}
// 3. name으로 접근했을 때
// name이고 배열이니까 ByName + 번지수
	document.getElementsByName("name")[0].value = "hihi"; //hello -> hihi
	
// 4. tag로 접근했을 때
	document.getElementsByTagName("p")[0].innerHTML = "i can do it";
}
</script>

자바스크립트에서 CSS에 접근하는법

<body>

<!-- CSS접근하는법  -->

<div id="demo" style="background-color: #ffffff">Hello JavaScript CSS</div>
<button type="button" onclick="proc()">적용</button>


<script type="text/javascript">
function proc() {
	let obj = document.getElementById('demo');
	
	obj.style.color = 'white';
	obj.style.backgroundColor = "#0000ff";
	obj.style.textAlign = "center";
	obj.style.borderStyle = 'double';
	obj.style.fontFamily = "MS PGothic";
	obj.style.fontSize = "24pt";
}
</script>

</body>

'front-end > javascript' 카테고리의 다른 글

[JSP] EL 표현식  (0) 2023.03.16
[JAVASCRIPT] 자바스크립트 과제 - 계산기만들기, 체크박스, 주사위랜덤게임  (0) 2023.01.31

관련글

댓글

티스토리툴바