함수 선언과 호출
함수
계산 또는 어떤 기능을 수행할 수 있도록 하는 도구
- 매개변수(parameter) : 입력되는 데이터
- 반환데이터(return 값) : 함수를 통해 반환되는 결과
// 함수의 선언
function SayHi(){
console.log("안녕하세요")
}
// 함수의 호출
SayHi()onclick
특정 태그가 클릭되었을 때, 할당된 함수 또는 코드를 실행
<head>
<script>
const btnFunc = function(){
console.log("버튼이 눌렸어요!")
}
</script>
</head>
<body>
<button onclick="btnFunc()" >버튼</button>
</body>
// 버튼 태그가 눌리게(onclick) 되면 콘솔창에 메시지 출력querySelector
자바스크립트 내에서 HTML 요소를 참조하는 방법
지정한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 요소를 반환
document.querySelector(tag);
document.querySelector(.class);
document.querySelector(#id);new Date
자바스크립트 내에서는 날짜 데이터(연월일 시분초)가 일종의 객체로 관리됨
해당 날짜 데이터를 new Date로 가져옴
new Date() // 현재 날짜 데이터
new Date("2024-01-01") // 특정 날짜 데이터함수의 리턴
return : 함수 내부에 존재하는 데이터 혹은 연산 결과를 외부로 반환 + 함수 종료
// 반환값을 변수에 할당
const sum = function() {
let result = 10 + 10;
return result;
}
let returnData = sum()
console.log(returnData ) => 20
// return 명령어를 만나면 함수 종료
const sum = function() {
let result = 10 + 10;
return result;
console.log(result) // 해당 코드는 실행되지 않음
}함수의 선언 종류
선언식
function 함수이름(param1, param2, ...){
// 내부 코드
return 결과값
}표현식
const 함수이름 = function(param1, param2, ...){
// 내부 코드
return 결과값
}화살표 함수 ( 실무 함수 )
const 함수이름 = (param1, param2, ...) => {
// 내부 코드
return 결과값
}내장함수 ( 타이머 )
자바스크립트가 미리 선언해놔서 호출만으로 사용할 수 있는 함수
alert( )
메시지를 지정할 수 있는 경고 대화 상자를 띄움
alert("이렇게 만드시면 경고창이 생겨요!")setTimeout( )
시간 지연함수, 입력 시간이 만료된 후 지정된 기능을 실행
setTimeout(기능, 시간) // 기능은 함수를 의미, 시간은 밀리세컨드 단위
console.log("로딩을 시작합니다.")
setTimeout(function() {
console.log("로딩 완료.") // 로딩을 시작합니다.
}, 3000) //3초 뒤 // 로딩 완료.setInterval( )
setInterval(기능, 시간) // 기능은 함수를 의미, 시간은 밀리세컨드 단위
setInterval(function(){
const now = new Date()
const min = now.getMinutes()
const sec = now.getSeconds()
console.log(min + "분" + sec + "초")
}, 1000) // 16분 11초
// 16분 12초
// 16분 13초
Keep going