<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>어제 공부한거 총 복습하기</title>
</head>
<style>
body {
width: 800px;
height: 10000px;
}
.btn1{
position: fixed;
color: white;
background-color: palevioletred;
border: none;
cursor: pointer;
margin-left: 10px;
border-radius: 5px;
}
</style>
<body>
<button onclick="btn()">Click!!!!</button>
<button onclick="btn_btn()">크기 버튼</button>
<button onclick="window_button()">윈도우 버튼 입니다</button>
<button class="btn1" onclick="scroll_button()">이걸 누르면 스크롤이 이동 합니다.</button>
</body>
<script>
// <!-- <css셀렉트 쿼리 사용 해보기></css> -->
let buttons = document.querySelectorAll("button")
function scroll_button() {
window.scrollBy({ top: 1000, behavior: 'smooth' });
}
// <클릭이벤트 꾸미기>
function btn(){
alert("클릭되었습니다.")
}
// <클릭하여서 넓이,높이 구하기>
function btn_btn(){
console.log(`이것의 넓이는: ${window.innerWidth}`)
console.log(`이것의 높이는: ${window.innerHeight}`)
}
// <새로운 윈도우 창 띄우기>
function window_button(){
window.open("url","연습용","width=300, height=500")
}
// 일반 객체 리터럴 만들기
let myInfo = {
name:"장윤경",
hobby:"dance",
age:"26"
}
console.log(myInfo.name)
myInfo.like = "만두"
console.log(myInfo)
myInfo.name = "윤둥"
console.log(myInfo)
//객체리터럴 반복하기
for(let key in myInfo){
console.log(myInfo[key])
}
for (let item of myInfo) [
console.log(item)
]
// 함수로 객체 리터럴 만들기
function myName(){
return {
name : "장윤깅",
hobby : "tennis",
age : 15
}
}
// 여러개 찍어낼수있다
const aboutMe = myName()
console.log(aboutMe.name)
console.log(aboutMe)
// 함수 for문 사용하기
for(let key in aboutMe){
console.log(aboutMe)
}
// 일반 배열 만들기
let fruite = ["사과","딸기","참외","바나나"]
// 배열로 for문으로 길이만큼 반복하기
for(let i = 0; i < fruite.length ;i++){
console.log(fruite)
}
console.log(fruite[0])
//for문으로 반복하기
for(let index in fruite){
console.log(fruite[index])
}
fruite.push("배")
console.log(fruite)
fruite.pop()
console.log(fruite)
// 주의 splice 사용할때 대괄호 말고 소괄호를 사용하기
fruite.splice(0,1)
console.log(fruite)
// 함수로 배열 만들기
function nationailty(){
return{
country : ["한국","일본","중국","영국"]
}
}
const country = nationailty()
console.log(country)
// 문자열 객체 사용하기.
const pw = "123"
if(pw.length < 4){
console.log("더 길게 입력해주세요")
}
const email = "taez.naver.com"
if(email.includes("@") == false){
console.log("@를 포함해주세요")
}
const abc = "abc"
console.log(abc.toUpperCase())
// 함수를 사용해서 구구단 출력하기
function gugudan(dan){
for(let i = 1; i < 9 ; i++){
console.log(`${dan} * ${i} = ${dan * i} 입니다`)
}
}
gugudan(2)
gugudan(3)
gugudan(4)
// for문, if문을 사용해서 2의 배수만 출력하기
for(let i = 0; i<=100; i++){
if(i % 2 == 0){
console.log(`배수의 출력 값은 : ${i}`)
}
}
// 자바스크립트의 특징
// 자바스크립트는 인터프리티 기반의 언어이며 위에서 아래로 코드를읽는다. html,css로 구성된 구조를 정적 페이지를 동적페이지로 만들기 위하여
// 사용된다.
// 함수를 선언할때는 스코프가 있어 var는 {}를 벗어나도 인식 되지만 let과 const는 {}지역스코프 안에서 사용 해야한다.선언자가 위로 끌어 올려지는
// 행위이다.
// 호이스팅 특징이 있어서 var를 이용한 변수나 함수를 선언 할 때 주의 하면서 선언해야한다.
// html구조를 dom형식으로 만들어서 메소드,css선택자 등으로 지정하여 이벤트를 줄 수있다.
function hoistingTest(value) {
if (value == 9) {
var isNine = true;
}
console.log(isNine);
}
hoistingTest(0); // undefined
hoistingTest(9); // undefined
</script>
</html>
개발운영팀
안녕하세요 :) 국비지원 부트캠프 엘리스트랙입니다! 오늘도 개발 공부 열심히 하고 계시군요! 멋지십니다 :)
혹시 신입으로 개발 공부하면서 기술면접에 대한 대비가 막막하시다면, 이번 기술면접 특강도 관심 가져보시면 좋을 것 같아 댓글로 행사 안내드려요~
프론트/ 백엔드 모두 실력있고, 실제 면접관으로 활동하고 계신 개발자 코치님께서 진행하시니 참여해 보세요> https://festa.io/events/4389
그럼 오늘도 화이팅입니다!🙇🏻♀️💪🏻