열심히 끝까지
디바이스 융합 자바(Java) day31 - JS(Java Script)(변수,타입,제어문,함수,객체,배열,수학) 본문
디바이스 융합 자바(Java) day31 - JS(Java Script)(변수,타입,제어문,함수,객체,배열,수학)
노유림 2022. 7. 25. 16:32JS(Java Script)
페이지------
구조 html
스타일 css
동작 js
>> js = 프론트엔드의 대표적
* js 코딩테스트도 준비하면 좋음!!! *
코테에서도 많이 나오고 비중이 있는 언어!
>> 기본적으로 꼭 알아야 하는 것들을 진행
>> 시간=1주일정도
Java Script
: 스크립트 언어
: 인터프리터 언어(Python, SQL, JS) : 채팅형 언어, line by line(한 줄 씩 실행 가능)
script언어를 해석하는 번역가 <= 브라우저에 포함
(각 브라우저마다 실행결과가 다를 수 있음)
기준 : chrome(크롬)
(<-> 컴파일 언어(C, JAVA) : a-z 처음부터 끝까지 실행해야 실행 가능)
: js로 수행하는 것
1. 연산, 기증 처리
ex ) 회원가입 시, 비밀번호와 비밀번호 확인 => 동일해야 넘어감
>> 둘이 같은 지 물어보는 것에서 쓰임
2. 웹 페이지에서 요소(태그)의 기능을 담당
ex ) 위젯의 움직임, 챗봇(기능, 동작에 대한 코딩)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS - 외부 Script</title>
</head>
<body>
<!-- 요소의 기능과 관련되어 있기 때문에 body에 기재 -->
<script type="text/javascript" src="js/myscript.js"></script>
</body>
</html>
- 변수를 어떻게 선언하는가?
>> 자바 스크립트에서 변수를 선언할 때, 두가지 변수 존재
: var num = 10;
var name='홍길동';
// >> 전역(Global) 변수
function func(){
var score=57;
// 지역 변수
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS - 내부 script</title>
<style type = "text/css">
#box {
width : 100px;
height : 100px;
background-color:coral;
cursor:pointer;
}
</style>
</head>
<body>
<!-- onclick = 클릭했을 때, -->
<!-- chageColor()메서드는 없는 메서드 -->
<!-- 스트립트로 세상에 changeColor라는 function을 정의! -->
<script type="text/javascript">
function changeColor(obj){
obj.style.backgroundColor="lightblue"; // 카멜표기
}
</script>
<div id="box" onclick="changeColor(this)"></div>
</body>
</html>
- 어떤 데이터 타입이 있는가?
1. 문자열
2. 숫자형(Number)
3. Boolean
4. Null = object에 포함이 되는 친구!!
5. Object << JS의 특이한 변수 / 사용자가 직접 만들어 낸 타입
6. undefined << JS의 특이한 변수 / 선언되었지만 어떤 타입인지 모를 때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수선언과 형식</title>
</head>
<body>
<script type="text/javascript">
var a = '홍길동';
var b = 12;
var c = 3.14;
var obj1 = [1, 2, 3];
var obj2 = {one:1, two:2, three:3};
console.log(a);
console.log(b);
console.log(c);
console.log(obj1);
console.log(obj2);
var x;
var y=null;
console.log(x);
console.log(y);
console.log(z);
</script>
</body>
</html>
- 어떤 연산자 타입이 있나?
1. == : 두 개의 실질 값이 같은지 물어보는 것
2. === : 두 개의 값도 같으면서 자료형(type)도 같은지 물어보는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형 확인하기</title>
</head>
<body>
<!-- 자료형 꼭 확인해 줄것! -->
<script type="text/javascript">
var a=null;
var b=[1, 2, 3];
var c = {one : 1, two : 2, three : 3};
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
var x = 12; // number 타입
var y = '12'; // string 타입
console.log(x,' ',typeof x);
console.log(x,' ',typeof y);
console.log(x==y); // '값'만 비교
console.log(x===y); // '자료형'까지 비교
</script>
</body>
</html>
- 어떤 제어문이 있나?
1. 조건문 if
2. 반복문 while, for ,switch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제어문</title>
</head>
<body>
<script type = "text/javascript">
var ans='apple';
for(var i = 0; i < 3; i++){
var input=prompt('답을 작성하세요.'); // 프롬프트 창 띄우기
if(input==ans){
console.log('정답입니다!');
break;
}
console.log('다시 시도해보세요...');
}
</script>
</body>
</html>
>> 카멜표기 방식 사용!!
- 를 연산기호로 생각하기 때문에 카멜표기를 사용해야한다!!
>> prompt창 띄우기
var input=prompt();
- 함수
function 함수명(input){
return output;
}
- 어떤 객체 존재하는가?
1. 속성(property)
2. 기능(method)
ex1 ) var person={
name='홍길동';
age=23;
act1 : function(){console.log('이름말하기');}
act2 : function(){console.log('인사하기');}
}
>> '객체를 정의했다!' 라고 함
>> 위 방법(ex1)이 잘 안쓰임, 아래 방법(ex2)이 잘 쓰임
ex2 ) // 생성자 함수를 이용한 객체 생성 방식 사용
function Car(name, speed){
this.name=name; // 속성
this.speed=speed;
this.showInfo=function(){ // 메서드
console.log(this.name + '님의 차 속도 : '+this.speed);
}
}
var car1=new Car('홍길동',120);
var car2=new Car('임꺽정',200);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:100px;
height:70px;
text-align:center;
line-height:70px;
}
</style>
</head>
<body>
<script type="text/javascript">
var colorList=['red','yellow','lightgreen','blue','pink','purple'];
for(var i=0; i<colorList.length; i++){
var box='<div style="background-color:'+colorList[i]+'">'+colorList[i]+'</div>';
document.write(box);
}
</script>
</body>
</html>
- 배열 Array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
</head>
<body>
<script type = "text/javascript">
var arr = new Array(1,2,3,4); // 이렇게 만드는 경우가 더 많음
console.log(arr);
console.log(arr[0]); // 배열의 0번 인덱스를 표현
console.log(arr.length);
arr.sort();
arr.pop();
arr.push(10);
arr.slice(1,3);
</script>
</body>
</html>- 날짜 Date
- 수학 Math