Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
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 more
Archives
관리 메뉴

공부기록용

Javascript 기초 01 본문

📚강의록📚/유노코딩)Javascript

Javascript 기초 01

과부하가즈아 2023. 4. 18. 14:21

Javascript란,

  • 프로그래밍 언어이다.
  • 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있다. 

  • 웹브라우저가 가진 기능을 실행시키거나, html, css를 통해 렌더링된 화면을 조작할 수 있다.(웹브라우저를 조작함으로써 역할을 수행한다.)
  • html의 <script> </script> 내부에 작성하곤 한다.

 

웹 콘텐츠에 Javascript 코드를 더해 주는 방법

  • HTML문서 내부에 (직접)작성하기
<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Comlatitable" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-s">
  <title>HTML 문서</title>

  <style>
    *{color: red;}
  </style>

</head>

<body>

  <h1>반가워요</h1>
  <p>아무 내용이나 채워보고 있어요</p>
  <ul>
    <li>호랑이</li><li>고양이</li><li>살쾡이</li>
  </ul>

  <script>
  </script>            ---> 작성하고 싶은 Javascript내용을 직접 넣기

</body>

</html>

<body></body>태그 제일 하단에 <script></script>를 위치시키기

  • Javascript 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결하기(Javascript 파일의 확장자는 .js )
<body>

  <h1>반가워요</h1>
  <p>아무 내용이나 채워보고 있어요</p>
  <ul>
    <li>호랑이</li><li>고양이</li><li>살쾡이</li>
  </ul>

  <script src="script.js"></script>               ---> src속성을 이용해 .js파일 연결
  
</body>

</html>

이때도 <script></script>태그를 이용하며, src속성을 추가해 Javascript 파일만 연결해주면 된다.

 

객체,

실세계에 존재하는 대상 또는 생각할 수 있는 어떠한 개념을 의미하며, Javascript에 있어서 어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단을 의미한다. Javascript 코드 내에서의 객체란, '값 또는 기능을 가지고 있는 데이터'를 의미한다.(소프트웨어적 사물인 셈)

 

웹브라우저는 소프트웨어 세계에 존재하는 사물, 즉 객체이다. 자바스크립트는 웹브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어이다. 객체(object)는 고양이

 

사용자가 웹브라우저에게 명령을 내릴 수 있도록 돕기 위해, Javascript는 웹 브라우저와 관련된 다양한 객체들을 제공한다.

(window가 대표적인 객체이다. Javascript에 입력시 브라우저게 무언가를 하겠다는 의미)

 

객체.데이터 : 객체가 가지고 있는 숫자, 문자 등의 다양한 데이터를 사용할 수 있다.

프로퍼티(property)

- cat.name = "나비"

- cat.family = "코리안 숏 헤어"

- cat.age = 0.1

- cat.weight = 300

 

객체.기능( ) : 객체가 가지고 있는 다양한 기능을 수행할 수 있다.(괄호 필수) 객체가 가진 기능을 '메소드'라고 한다.

메소드(method)

- cat.mew()

- cat.eat()

- cat.sleep()

- cat.play()

 

 

 

주석

  • // 주석처리할 내용 : 주석을 한 줄 밖에 쓸 수 없음
  • /* 주석처리할 내용*/ : 주석을 여러 줄에 걸쳐 쓸 수 있음

 

▶내용실습◀

window           ---> 브라우저에 대해서 무언가를 할 것이다.

window.          ---> 윈도우가 가지고 있는 값 또는 기능을 사용하겠다.

window.alert()   ---> 경고 창을 띄워줘라

window.alert('hello!')   ---> hello!라고 쓰여진 창을 띄워줘라(따옴표 필요' ')/alert는 괄호 안에 전달된 내용을 경고창으로 출력하자는 브라우저 기능

window.alert('hello!') 
window.alert('hello!') 
window.alert('hello!')   ---> 연속으로도 가능

window.alert('hello!') 
//window.alert('hello!') 
window.alert('hello!')   ---> 한 줄만 주석처리

/*
window.alert('hello!') 
window.alert('hello!') 
window.alert('hello!')  ---> 연속으로의 주석처리
*/

window.alert()
window.alert('hello')

 

 

콘솔(Console)

브라우저의 디버깅 콘솔을 의미한다. 콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로 객체를 통해 접근할 수 있다.

 

※디버깅 콘솔

웹브라우저의 '개발자 도구'를 열면 메뉴 중 '콘솔(console)' 이라는 항목이 존재하는데, 이것을 누르면 나타나는 화면이 디버깅 콘솔이다.(디버깅 콘솔을 이용하면 자바스크립트 코드를 점검 및 테스트를 할 수 있다.)_(F12)

 

※

우리가 웹브라우저에 접근할 수 있게 해준는 객체 window는 console을 비롯한 다양한 하위 객체 및 데이너, 메소드 등을 포함하고 있는데, 사용자는 편의를 위해 window. 를 생략한 채로 코드를 작성할 수 있다.

(window.console = console)

 

코드 작성 규칙

  • 대문자와 소문자를 잘 구분해서 작성
  • 구문의 끝에는 세미콜론(;)을 입력해 '구문의 끝'을 알릴 수 있으며, 이는 선택사항이다._요즘은 안써도 무방하나 구분을 짓고 싶다면 사용할것
  • 가능하면 한 줄에는 두 개 이상의 구문을 쓰지 않는다.

 

▶내용실습◀

window.console

window.console.log(' ')                     ---> log_콘솔화면에 기록'기록하고 싶은 내용'을 남긴다는 기능
=
console.log(' ')

window.console.log(' ');                    ---> 까지가 하나의 구문

window.console.log(' '); console.log(' ');  ---> 작동
window.console.log(' ') console.log(' ');   ---> 오류

window.console.log(' ')
window.console.log(' ')                     ---> 작동


console.clear()                             ---> 콘솔의 내용을 지우라는 의미, clear은 ()안에 어떤 값을 요구하지 않는다.

console.log(' ')
console.log(' ')
console.clear()                             ---> 콘솔에 아무내용도 남지 않음

 

 

 

출처 : @https://www.youtube.com/@uknowcoding

'📚강의록📚 > 유노코딩)Javascript' 카테고리의 다른 글

Javascript 기초 05(조건문)  (0) 2023.04.21
Javascript 기초 03(연산02_비교)  (0) 2023.04.21
Javascript 기초 04(Document Object Model)  (0) 2023.04.21
Javascript 기초 03(연산01_산술, 대입, typeof)  (0) 2023.04.19
Javascript 기초 02(변수, 상수, 데이터 타입)  (0) 2023.04.19
'📚강의록📚/유노코딩)Javascript' Related Articles more
Comments