240327 자바스크립트
2024. 3. 27. 10:48ㆍ2023.11.21-2024.05.31
어제 진도 나간 뷰 잠깐 보고
폴더열기 > vue > vue-app 폴더 선택
수정할 파일 temp에 있는 index.html을 vs로 열기
넘버 실행 버튼 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습1</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>연습1</h1>
<div id="app">
{{message}}
<button onclick="num()">넘버 실행</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data : {
message:'안녕 Vue'
}
});
function num(){
let num = 10;
if(num == 10){
//alert('ture');
console.log('true');
}
}
</script>
넘버 버튼을 누르면 true 숫자가 올라간다.
자바스크립트 기본 문법
변수 (오류 확인)
var n = 10;
let nn = 'A';
const nu = 100;
//const 변수는 초기값을 변경할 수 없지만 const 객체/배열은 그 요소를 변경할 수 있다.
//변수값 재할당x, 내부요소 변경 o
nu = 10;
console.log 출력
const group = {name : "홍길동" , age : 38};
group.age = 250;
console.log(group.age);
console.log(group.name);
console.log("이름 : "+group.name+", 나이 : "+group.age);
연산자
//연산자
//산술연산자
//문자 연결 연산자 +
console.log("HI" + "JS"); //HIJS
//값대입 var v = 10;
//비교연산자
// 1 > 7
//논리연산자
//true && false
//삼항연산자
//조건문 ? 참 : 거짓 ;
화살표 함수, 콜백함수
//화살표 함수 =>
//let 함수이름 = (파라미터...) => 명령문
check = () => {
console.log('check');
}
check();
//화살표 함수 : ES6때 도입, function 키워드로 만들어지는 것보다 화살표를 사용해 함수를 더 간단히 표현
//콜백 함수 : 파라미터로 함수를 전달받아 내부에서 실행하는 함수
function timeCheck(){
setTimeout(() => {
console.log('timeCheck 함수가 실행됩니다.');
}, 3000);
}
function lastCheck(){
console.log('lastCheck함수가 실행됩니다.');
}
timeCheck();
lastCheck();
//콜백 함수 : 파라미터로 함수를 전달받아 내부에서 실행하는 함수
function timeCheck(callback){
setTimeout(() => {
console.log('timeCheck 함수가 실행됩니다.');
callback();
}, 3000);
}
function lastCheck(){
console.log('lastCheck함수가 실행됩니다.');
}
timeCheck(lastCheck);
프로미스 함수
//프로미스 : 대기, 이행, 실패
let promise = new Promise(function (resolve, reject){
resolve(value);//성공
reject(err); //오류
});
promise.then(function(value){//성공
console.log(value);
});
promise.catch(function(err){//실패
});
async 함수
//콜백 함수와 프로미스의 단점을 극복하고 가독성을 높인 asyne, await
//async는 함수 앞에 붙인다.
//awit는 async 함수 내에서 작성한다. 동기식처럼 프로미스처리가 끝날때까지 기다린다.
async function print1(){
let promise2 = new Promise(function(resolve, reject){
setTimeout(() => resolve('성공'), 1000);
});
let result = await promise2;
console.log(result);
}
print1();
에러아래 성공이 print1() 했을때 나오는 성공
예외처리
//예외처리
async function 함수(){
try{
await 실행 함수();
} catch (error){
예외 발생시 처리할 내용;
}
}
배열
// 배열
// arr01 1, 2, 3, 4, 5
const arr01 = [1, 2, 3, 4, 5];
alert(arr01[0]);//5
alert(arr01.length); //5
push > 배열 뒤쪽에 추가
arr01.push(6);
console.log(arr01)
unshift > 배열 앞쪽에 추가
arr01.unshift(10);
console.log(arr01)
pop > 마지막 요소를 꺼냅니다. = 배열 요소 삭제
pop, push == 스택 == 후입선출(LIFO)
//[10, 1, 2, 3, 4, 5, 6]
//pop 마지막 요소를 꺼냅니다. = 배열 요소 삭제
console.log(arr01.pop());// 6
console.log(arr01); //[10, 1, 2, 3, 4, 5,]
shift() = 배열의 첫번째 요소를 삭제
//shift() = 배열의 첫번째 요소를 삭제합니다.
arr01.shift()
console.log(arr01); //[1, 2, 3, 4, 5]
splice() == 배열에서 특정 위치에 새로운 요소를 추가 / 특정 요소에 있는 값을 수정
배열명.splice(추가/삭제할 위치, 삭제할 수 , 추가할 요소);
//shift() = 배열의 첫번째 요소를 삭제합니다.
//splice() == 배열에서 특정 위치에 새로운 요소를 추가 / 특정 요소에 있는 값을 수정
//배열명.splice(추가/삭제할 위치, 삭제할 수 , 추가할 요소);
arr01.splice(0, 0, 100);
console.log(arr01); //[100, 1, 2, 3, 4, 5]
arr01.splice(1, 1);
console.log(arr01); //[100, 1, 2, 3,, 4, 5]
console.log('============================');
console.log('삭제 전 : ' + arr01);
arr01.splice(1,1);
console.log('삭제 후 : ' + arr01); //[100, 2, 3, 4]
'2023.11.21-2024.05.31' 카테고리의 다른 글
| 240503 SVELTE(REPL로 시작하기) (0) | 2024.05.03 |
|---|---|
| 240327 뷰 vue (1) | 2024.03.27 |
| 이클립스 파일명 검색 (0) | 2024.03.23 |
| 20240314 전자정부(JPA 정렬) (1) | 2024.03.14 |
| 20240312 전자정부(스웨거) / 못써서 삭제했음 (1) | 2024.03.12 |