22.09.30.금
함수 =/= 메서드
함수
클래스 안에 포함된 것을 메서드라고 부른다
함수(Function) =/= 메서드(Method)
함수는 여러 문장들이 하나의 기능을 구현하도록 구성, 독립적으로 존재
그 함수 중에서 클래스 내부에 정의한 함수를 메서드(클래스 안에 포함, 종속된 것을 메서드라고 부른다)
웹페이지를 구성하는 요소 : html, css, 자바스크립트, 웹 어셈블리
(웹을 구성하는 요소 http, https, url ....)
출력 방법
<body>
<p id="one"></p>
<!--대부분 스트립트는 뒤에 있다-->
<script>
// 출력하는 방법
// about:blank에서 개발자 도구를 열고, colsole에서 document. 라고 치면 여러가지 document 메서드를 볼 수 있다.
document.getElementById("one").innerHTML =
"hello <strong>world</strong>";
//document.getElementById("one").라는 요소의 메서드가 innerHTML
console.log("hello world 2");
//콘솔은 꼭 브라우저에 있는 것은 아니며 테스트를 하기 위해 많이 사용한다
window.alert("hello world 3");
//alert가 윈도우 안에 있고 윈도우를 적어주는 것이 보통
document.write("hello world 4");
</script>
</body>이때 .으로 연결된 것들 메서드체이닝
Q.document는 html 파일같은 느낌이고 window는 브라우저 같은 건가요?
A.네
004_인라인.html
<button onclick="document.write('hello world')">눌러</button>
// 눌러 라는 버튼을 누르면 버튼이 사라지고 hello world가 찍힌다
document.write() 메소드 자체가 기존 페이지에 덮어씌워지거나, 또는 새로운 페이지로써 write 하기 때문에 먼저 로딩된 데이터를 지우고 본인을 출력외부에 있는 자스 코드 불러오기
002_외부js.html
<body>
<p id="one"></p>
<script src="002.js"></script>
</body>002.js
document.getElementById("one").innerHTML = "hello world";콘솔
- 브라우저에서는 브라우저 개발자 도구
- node 환경에서는 터미널
console.log(;
console.dir();
console.info();
console.group();
console.groupEnd();
console.table();
console.warn();
console.error();
console.log("hello");
// 그냥 출력했을 때에는 알파벳순
let data = {
'one' : 1,
'two' : 2,
'three' : 3,
}
console.dir(data);
let data2 = [10, 20, 30];
console.dir(data2); 
console.info("hello world");
// 계층 구조
console.group("one");
console.log("a/팀원");
console.log("b/팀원");
console.log("c/팀원");
console.group("two");
console.log("d/팀장");
console.log("e/팀장");
console.groupEnd();
console.log("end");
console.log("end");
console.table(data);
console.error("error");
console.warn("실행은 해줄게 다만 경고문구는 읽어봐");
주니어 프론트엔드 웹 개발자 🐛