Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 자바스크립트
- 상품삭제
- 상품상세페이지
- ajax중복체크
- 쇼핑몰홈페이지만들기
- DB공유하기
- 생활코딩javascript
- jsp
- 생활코딩
- 스프링부트
- 아이디중복체크
- 쇼핑몰주문취소
- 파이널프로젝트
- 쇼핑몰프로젝트
- html
- 쇼핑몰만들기
- 상품목록보기
- 상품명중복체크
- 유저삭제
- 주문취소하기기능
- 국비프로젝트
- 주문조회페이지
- javascript
- 마이페이지만들기
- vscode삭제
- 상품수정
- 구매목록보기
- 구매목록페이지
- 권한체크
- vscode폴더삭제
Archives
- Today
- Total
INTP의 멋대로 개발 세상
[생활코딩 JavaScript] 5강. Console 본문
자바스크립트를 실행하는 또 다른 방법을 알아보고자 한다.
이전 포스팅까지는 자바스크립트를 사용하기 위해 웹 페이지를 만들었다.(HTML을 만들었으니까)
하지만, 꼭 파일이 아니더라도 그냥 단순 코드만 실행해야 되는 가벼운 상황들이 있다.
그런 경우에는 Console 을 이용한다.
웹 페이지에서 마우스 오른쪽 클릭 -> 검사를 눌러 개발자 도구를 열면,
Console 탭을 찾을 수 있다 🔎
콘솔창을 열면 창에 커서가 깜빡일텐데 저기서 바로 자바스크립트 코드를 실행할 수 있다!
🔎 예시로!! 이런 화면이 있다고 해 보자.
이 화면의 글자수를 알고 싶다면?!
(직접 셀 수 없으니까)
개발자 도구의 콘솔창을 열어서!
세고 싶은 텍스트를 작은 따옴표 (' ') 로 감싼 뒤,
length 함수를 써 주면 986자라고 계산해 준다!
사알짝 응용해서 앞에 배운 alert 함수로 감싸주면
경고창으로 결과가 뜨게 된다😊
재밌는 사실은,
이 콘솔창에서 입력된 자바스크립트는 현재 웹 페이지 안에 삽입된 자바스크립트인 것처럼 동작한다는 것!⭐
(이전 포스팅에 HTML 파일에 script 태그를 이용해 작성한 자바스크립트 코드처럼!)
이것을 이용해 아래처럼 댓글 이벤트 랜덤 추첨도 가능하다
(지금은 이런 것도 가능하다~ 정도만 알아두자!)
우리가 "자바스크립트를 이용한다." 라는 것은
웹 페이지를 만든다라는 목표도 있겠지만, 이미 만들어져 있는 웹사이트를
나의 어떤 필요에 따라 간단한 코드를 작성해서 문제를 해결할 수 있다는 것!
'JavaScript' 카테고리의 다른 글
[생활코딩 JavaScript] 7강. 변수와 대입연산자 (0) | 2023.04.09 |
---|---|
[생활코딩 JavaScript] 6강. 데이터 타입(String, Number) (0) | 2023.04.07 |
[생활코딩 JavaScript] 4강. 이벤트(Event) (0) | 2023.04.07 |
[생활코딩 JavaScript] 3강. HTML에서 자바스크립트 사용하기 (0) | 2023.04.07 |
[생활코딩 JavaScript] 시작 (0) | 2023.04.07 |
Comments