Js
- 자바스크립트는 완벽한 형태의 함수형 언어다.
- Browser(Client)에서 동작하는 Client-Side Language
이벤트 기반의 동작언어
웹 페이지에서 없어서 안될 언어다.
- js는 동적인 페이지를 만들수 있도록 도와준다.
SPA를 만들떄에도 js는 필수다.
Js는 complile 언어가 아니다.
js는 interpreter 언어
변수의 선언방법
- var (문자, 숫자, 불린 등등 모든 변수는 var를 쓴다.)
- Javascript는 다른 컴파일 언어(C, Java, C++ 등)와 다르게 데이터 타입이 없다.
- Interpreter 언어의 특성상, 변수 속의 데이터를 특정할 수 없기 때문.
- 단, 정수, 실수, 문자열, 불린 등의 값 표현은 가능함.
변수 값 변경
변수의 값은 언제든지 변경될 수 있다.
var키워드는 변수의 정의를 담당한다.var키워드를 삭제한 후 값을 할당하면, 변수 값의 변경을 의미한다.var키워드를 삭제하지 않고 변수를 할당하더라도 값의 재할당이 이루어진다.
변수사용 -출력
alert(…)은 화면에 경고창을 띄어주는 역할을 함alert(…)에 변수를 사용하면 변수의 내용이 경고창으로 나타난
var helloMessage = “안녕하세요.”;
console.log(helloMessage);js의 배열
// 배열.
var array=[]
//값이 있는 배열
var array2 =[10,20,40]
// 여러형태의 값이 있는 배열
var array3 =["Text", true, false, 10, 30.6]
console.log(array)
console.log(array2)
console.log(array3)
alert(array)
alert(array2)
alert(array3)
item의 개수
console.log(0, array[0],1, array[1],2, array[2])
변수는 선언되어 있지만 값이 할당되지 않았을 경우 undefined가 나온다.
var scores =[]
console.log(scores)
console.log("score 변수에는", scores.length, "개의 아이템이 있습니다.")
// 배열에 아이템을 추가하기.
scores.push(100);
console.log(scores)
console.log("score 변수에는", scores.length, "개의 아이템이 있습니다.")
</script>
console.log(scores[7])
console.log(scores[7][0])
console.log(scores[7][1])
console.log(scores[7][2])
console.log(scores[7][3])
console.log(scores[7][4])
console.log(scores[7][5])
console.log(scores)
console.log("score 변수에는", scores.length, "개의 아이템이 있습니다.")
pop
var array =[10,20,30]
console.log(array)
//pop함수는 파라미터와 관계없이 가장 마지막 아이템만 제거한다.
array.pop()
console.log(array)
array.push(30)
//지정한 인덱스 제거하기
array=array.slice(1,3)
console.log(array)
js와 java
JS 함수형 언어
- 객체 => 함수로 바꿔줌
- 함수를 변수에 할당
- 함수를 파라미터에 전달
- 함수를 함수 반환
- 함수를 함수 생성
java 객체지향언어
- 객체 변수할당
- 객체 파라미터 전달
- 객체 객체반환
- 객체 객체생성
함수-일반함수
작업 단위를 정하고, 일부를 분리시켜 관리함
함수정의
//함수정의
function sayHello(){
console.log("안녕하세요?")
}
//함수호출
sayHello()
sayHello()
sayHello()
sayHello()
sayHello()
sayHello()
sayHello()
sayHello()
function sayWelcome(){
console.log("안녕하세요? ")
console.log("간단한 계산기 입니다.")
console.log("숫자를 더해봅니다.")
}
// 함수정의
function calcAndPrintNumbers(){
sayWelcome() // 함수안에서 다른함수 호출 가능
var numOne = 10
var numTwo = 20
var result = numOne + numTwo
console.log(numOne, "+", numTwo, "=", result)
}
//함수로출
calcAndPrintNumbers()
calcAndPrintNumbers()
calcAndPrintNumbers()
calcAndPrintNumbers()
calcAndPrintNumbers()
함수 - 리턴함수
<title>반환하는 함수</title>
<script type="text/javascript">
function getCalcNumbers(){
var numOne =10
var numTwo =20
var result = numOne+numTwo
return result
}
var result=getCalcNumbers()
console.log(result)
</script>함수 - 매개변수가 있는 함수
<title>파라미터가 있는 함수</title>
<script type="text/javascript">
function getCalcNumbers(numOne, numTwo){
var result=numOne+numTwo
return result
}
var calcResult=getCalcNumbers(1,2)
console.log(calcResult)
calcResult=getCalcNumbers(1)
console.log(calcResult)
// 하나만 파라미터 값을 주면 NaN이라는 결과가 나온다 그래서
function getCalcNumbers(numOne, numTwo){
if(numTwo==undefined){
numTwo=0
}
var result=numOne+numTwo
return result
}
var calcResult=getCalcNumbers(1,2)
console.log(calcResult)
var calcResult=getCalcNumbers(1,2,3)
console.log(calcResult)
var calcResult=getCalcNumbers(31)
console.log(calcResult)
이런식으로 해줘야 한다.
</script>
----------------------------------------------------------------
<script type="text/javascript">
function getCalcNumbers(numOne, numTwo){
// js의 parmeter가 전달되는 방식이 매우 특이
console.log(arguments) //함수 파리미터 정보
var result =0
for(var i in arguments){
result += arguments[i]
}
return result
}
var calcResult=getCalcNumbers(1,2)
console.log(calcResult)
var calcResult=getCalcNumbers(1,2,3)
console.log(calcResult)
var calcResult=getCalcNumbers(1,2,6)
console.log(calcResult)
var calcResult=getCalcNumbers(10,10,10)
console.log(calcResult)
var calcResult=getCalcNumbers(1)
console.log(calcResult)
</script>
// 파라미터의 개수가 초과했을떄 arguments를 사용하여 값을 구하면 다 나온다.