JavaScript
for문
for (let i = 0; i < 10; i++) {
console.log(i);
} // 0,1,2,3,4,5,6,7,8,9for문을 이용한 * 찍기
for(let i = 0; i < 10; i++;) {
let star="";
for(let j =0; j < 10 j++;) {
if(j < i {
star += "*";
}
}
console.log(star)
}if문
let aScore = 20;
let bScore = 10;
let totalScore = aScore + bScore;
if (totalScore > 78) {
console.log("great");
} else if (totalScore > 50) {
console.log("good");
} else if (totalScore > 30) {
console.log("try harder");
} else {
console.log("sad");
}querySelector
- js에서자주쓰이는 명령어
- js에서 html로 접근을 하는 것(js에서 html을 편집할 수 있음)
*html
<body>
<div class="comments"> html text is here </div>
</body>*javascript
const comments = document.querySelector(".comments");
console.log(comments); // <div class="comments"> html text is here </div>시계 만들기
*js
function getTime() {
const time = document.querySelector(".time");
const newDate = new Date();
const hours = String(newDate.getHours()).padStart(2, "0");
const minutes = String(newDate.getMinutes()).padStart(2, "0");
const seconds = String(newDate.getSeconds()).padStart(2, "0");
}
getTime();
setInterval(getTime, 1000);
- 함수 선언 :
function getTime() {}querySelector사용new연산자로Date객체생성String()= 숫자열을 문자열로 형변환padStart메서드(methods)사용 // 2글자가 아니면 0을 붙여라getTime()함수호출setInterval(getTime,1000)// 1초마다 getTime 갱신
SCSS
비디오 삽입
- 홈페이지 전체에 비디오를 배경화면으로 설정하는법
* html
<body>
<video>
class = "bgVideo" //클래스 선언
autoplay // 자동재생
muted // 음소거
loop // 반복재생
src = "images/{videoname}.MOV" // 동영상 삽입
</video>
</body>*scss
.bgVideo {
position : fixed; // 절댓값지정(고정)
top: 0; // top 0으로 이동
left: 0; // 왼쪽으로 0이동
width: 100vw; //사용자 화면에 따라서 가로 비율 조정
height : 100vh; // 사용자 화면에 따라서 세로 비율 조정
object-fit:cover; // 동영상(사진)의 화질이 깨지지 않게끔
}AXIOS
-
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
즉, 백엔드랑 프론트엔드랑 통신을 쉽게 해줌
javascript에서 AXiOS사용
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
*html
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"> </script>
<script src="main.js"></script>
</body>- js 위에 복붙해주기
hunting season