드디어 JS 문을 열어버렸다!! 😨
근데 아직 처음이라 그런가!! 아직 어려운 느낌은 안든다..! 이랬는데 또 담날 되면 울고 있을 나의 모습이 보인다 하핫
그래! 처음부터 힘들면 누가 하겠나 싶다!!
오늘은 JS 변수 선언하는 방법에 대해 배웠다
js는 코드에 따라 다르지만 통상적으로 제일 밑에 자리를 차지하고 있다. 왜냐?! css 또는 html 문서가 다 읽히고 난 후에 적용 되는 부분이 많기 때문에 제일 밑에 자리하는 경우가 많다고 한다. 그 이야기를 역으로 해보면 js가 먼저 결과가 나와야할 경우엔 위에 위치해야한다는 말이 된다! 이 부분을 잘 기억해둬야할 거 같다!!😏
1. JavaScript
- netscape사에서 개발(브랜든)
- 동적인 웹사이트를 만들기 위해 개발됨
- 개발 언어는 누군가 만든 약속된 문법들의 집합
- 사용 순위 1위!!
<다크모드 만들기>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 첫 걸음</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.container {
width: 500px;
border: 1px solid #000;
text-align: center;
margin-top: 1rem;
}
.dark-mode {
background: #111;
color: #999;
border: 1px solid #999;
}
</style>
</head>
<body>
<!--
js 해석해보기 !
-->
<button onclick="document.body.classList.toggle('dark-mode')">mode 전환</button>
<div class="container">
<h1>자바스크립트 다크 모드 테스트</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur animi, qui perferendis expedita iure nulla numquam consequatur itaque fugiat ut, earum voluptatem inventore quam. Expedita eum dignissimos soluta corporis corrupti!
</p>
</div>
</body>
</html>
<declare.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js</title>
</head>
<body>
<!--
style은 오직 css
인라인 방식 js 선업하기
-->
<button onclick="alert('그럼안녕');">안녕</button>
<!-- <script>
alert("hello wrold")
</script> -->
<!-- 그때그떄 다르지만 밑에다가 쓰는 것이 일반적 ! -->
<script src="./js/js-declare.js"></script>
</body>
</html>
<prac.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js pracitce</title>
<script>
console.log("1. Life Goes On - 방탄소년단");
console.log("");
alert("1절");
console.log("어느 날 세상이 멈췄어");
console.log("");
alert("2절");
console.log("오늘도 비가 내릴 것 같아");
</script>
</head>
<body>
<script>
console.log("애국가 4절")
console.log("")
console.log("1절")
console.log("동해 물과 백두산이 마르고 닳도록")
console.log("하느님이 보우하사 우리나라 만세.")
console.log("무궁화 삼천리 화려 강산")
console.log("대한 사람, 대한으로 길이 보전하세.")
console.log("2절")
console.log("남산 위에 저 소나무, 철갑을 두른 듯")
console.log("바람 서리 불변함을 우리 기상일세.")
console.log("무궁화 삼천리 화려 강산")
console.log("대한 사람, 대한으로 길이 보전하세.")
console.log("3절")
console.log("가을 하늘 공활한데 높고 구름 없이")
console.log("밝은 달은 우리 가슴 일편단심일세.")
console.log("무궁화 삼천리 화려 강산")
console.log("대한 사람, 대한으로 길이 보전하세.")
console.log("4절")
console.log("이 기상과 이 맘으로 충성을 다하여")
console.log("괴로우나 즐거우나 나라 사랑하세.")
console.log("무궁화 삼천리 화려 강산")
console.log("대한 사람, 대한으로 길이 보전하세.")
</script>
</body>
</html>
<abstract.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
abstract 추상화
</title>
</head>
<body>
<script>
// 추상화라는 개념(목적, 의미 전달하기) - 단순의도를 명확히 하기 위함
// (alpaca 이런거 안됨 차라리 var animalName = "alpaca")
// 예약어 -> var console = ~~, var if = ~~~ 이런거 쓰지말깅! css에서 class="class"라 쓴 거나 다름없다!
// var americano = 4500;
// 변수 선언
// = 할당 연산자
// variable(변수)
// ECMA5 var
var americano = 4100;
var latte = 5100;
var sandwich = 11000;
console.log(4100);
console.log(americano);
console.log(americano + americano);
console.log(americano * snad)
// 콜드브루 1잔
// 아메리카노 2, 카페라떼 1
// 치즈케익 1, 오렌지 주스 1
// 근데 이렇게 쓰면 뭐가 4500원이구 뭐가 4100원이죠??(이렇게만 쓰면 무시당함)
// console.log(4500);
// console.log(4100 * 2 + 5500 * 1);
// console.log(11000 * 1 + 6100 * 1);
// 0은 휴지꼭다리까지 있는 상태
// null 휴지꼭다리도 없는 상태(정의는 있음)
// undefind 아무것도 없는 상태(정의 조차 없음)
// camel case 사용하기
// 숫자로는 시작하면 안됨(오류), 언더바 또는 달러표시는 가능
var cold_brew = 100;
var coldBrew = 100;
var _coldBrew;
var $coldbrew;
</script>
</body>
</html>
<chapter.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>chapter</title>
</head>
<body>
<script>
var milkProtein= "1000"
var sweetPotatoProtein = "1500"
var chikenProtein = "3000"
// question.1
console.log (milkProtein * 1);
console.log (milkProtein * 2 + sweetPotatoProtein * 3);
console.log (milkProtein * 3 + sweetPotatoProtein * 3 + chikenProtein * 4);
// qusetion.2
console.log (milkProtein * 2);
console.log (milkProtein * 3 + sweetPotatoProtein * 5);
console.log (milkProtein * 5 + sweetPotatoProtein * 10 + chikenProtein * 10);
</script>
</body>
</html>
<daiso.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>daiso</title>
</head>
<body>
<script>
var mousePrice=15000;
var whatchPrice=5000;
var pencilPrice=1200;
// qustion.1
console.log(mousePrice);
console.log(mousePrice + pencilPrice * 5);
console.log(mousePrice * 2 + pencilPrice * 10 + whatchPrice * 3);
</script>
</body>
</html>
<coffee.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<script>
var americanoRegular = 3000;
var latteLarge = 3500;
var espressoLarge = 3500;
var mochaRegular = 3000;
console.log(americanoRegular * 1 + latteLarge * 2 + espressoLarge * 3 + mochaRegular * 2);
</script>
</body>
</html>'웹 > JAVA SCRIPT' 카테고리의 다른 글
| [코딩 공부_88] 객체(object), 프로퍼티(property), 메소드(method) (0) | 2021.06.03 |
|---|---|
| [코딩 공부_87] for문, switch문 (0) | 2021.06.03 |
| [코딩 공부_86] scope, const, 연산자, if문(조건문) (0) | 2021.06.01 |
| [코딩 공부_85] Return에 대하여 (0) | 2021.05.30 |
| [코딩 공부_84] function과 parameter (0) | 2021.05.27 |
댓글