1. [파트19] Javascript의 이해 배운내용 요약
JavaScript에 대한 기초문법 설명중 중요하다고 판단되는 부분만 정리
1-1. 인라인 자바스크립트
태그의 속성으로 직접 자바스크립트 코드를 작성하는 방식
<button onclick="alert('Hello World!')">클릭</button>이 방법은 HTML과 자바스크립트 코드가 섞여 있어 유지보수가 어려울 수 있으므로, 일반적으로 권장하지 않는다고 한다.
1-2. 내부 스크립트
HTML 문서 내에 <script> 태그를 사용하여 자바스크립트 코드를 작성하는 방식
<body>
<h1>인라인 방식 자바스크립트</h1>
<h1 id="internal">내부 자바스크립트</h1>
<script>
var internal = document.getElementById('internal');
internal.onclick = function(){
alert("Test");
}
</script>
</body>
1-3. 외부 스크립트
자바스크립트 코드를 별도의 파일로 작성하고 HTML 문서에서 <script src="경로/파일명.js"></script>를 통해 불러오는 방식
코드 관리가 용이하며 재사용성이 높아 일반적으로 가장 많이 사용되는 방식
<head>
<script src="external.js"></script>
</head>
<body>
<h1>외부 자바스크립트</h1>
</body>
1-4. 논리 NOT 연산자 (!)
!는 조건의 논리값을 반전시키는 역할을 합니다. 예를 들어, !true는 false가 된다.
JavaScript에서 null, undefined, 0, "", NaN, false는 모두 "falsy" 값으로 간주되어, 이들을 부정하는 ! 연산자를 사용하면 true가 된다.
<script>
function test() {
//null falsy값으로 취급되어 비교시 False를 반환 한다고 한다
let user = null;
if (!user) { // ! 부정연산자로 인하여 False 에서 True
console.log("사용자가 로그인하지 않았습니다.");
}
}
</script>* 자바스크립트에서 "falsy" 값이란 조건문에서 false로 평가되는 값을 뜻한다고 한다.
1-5. 변수 선언
var: 구식 선언 방식으로, 현재는 사용을 지양하고 있습니다.
let: 블록 스코프를 가지는 변수 선언, 재할당이 가능합니다.
const: 초기화가 필수적이며, 한 번 할당된 값은 변경할 수 없습니다(상수).
2. 느낀점
부정 연산자를 사용할 때 종종 헷갈렸는데 falsy 값에 대해 알고 나니, 조건문의 동작이 훨씬 더 명확해지고 이해도 깊어졌다.
그럼에도 불구하고, 아직까진 부정 연산자를 사용하는 것보다는 좀 더 직관적인 코드 스타일을 좋다
인라인 자바스크립트도 처음 보았으나 왠만하면 쓰지 않는것이 좋을것 같다
3. 출처
- GPT 검색
- https://developsd.tistory.com/103 (인라인,외부,내부 스크립트)
- https://developer.mozilla.org/ko/docs/Glossary/Falsy (falsey값)
'클라우딩 어플리케이션 엔지니어링 TIL > 2주차' 카테고리의 다른 글
| [파트20]프론트엔드(Javascript)실습 (0) | 2024.04.19 |
|---|---|
| [파트18]HTML/CSS 실습 (0) | 2024.04.18 |
