day1
자바스크립트 + 제이쿼리 입문
자바스크립트는 ?
웹을 풍부하게 만들어주는 작고 가벼운 언어다.
특징)
1. 객체 기반의 언어
2. 인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행
* 여러 가지 명령들을 한 줄씩 처리함
3. HTML 문서 내에 기술되고 HTML 문서와 함께 수행됨
4. HTML에 연산 제어 등 프로그래밍적인 요소를 추가하고 클라이언트의 자원을 활용
모든 과정은 요청과 응답으로 이루어져 있다.
요청 -> 응답
HTML + CSS + JAVASCRIPT 라고 할 때 어디부터 어디까지가 script ?
그 기준 : 사용자가 요청을 했느냐 안 했느냐.
그 요청에 따라 응답하는 것들을 JavaScript가 한다.
e.g. 웹 사이트에서 마우스를 올렸을 때 색깔이 바뀌는 거 ?
-> css에서 hover로 처리가 된다.
-> css에서 할 수 있으면 script보다 css로 활용하는 것이 좋다.
e.g.
웹 페이지에서 채팅 버튼을 눌렀을 때 확대되는 느낌을 받으면서 나타나는 것들 : animation or transition
꺼질 때는 바로 사라짐
-> 이런 것들을 설정할 수 있다.
객체지향이란?
객체지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화하여 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다.
e.g) 여러 부품들 -> 다양한 자동차
여러 명령들 -> 명령들을 조합해서 여러 가지 기능을 구현함
완성된 애들을 객체라고 한다.
그렇다면 부품들은 객체가 아닐 것인가? 이거도 하나의 객체 -> 그것들도 뜯어보면 다른 더 미세한 부품들로 구성됨
큰 명령들 뿐만 아니라 작은 명령들도 객체로 취급을 한다.
브라우저가 갖고 있는 상태 값들을 가져와서 반영할 수 있다.
브라우저에는 여러 가지 기능이 있음
- 주소창
- 새로 고침
- 북마크
등등...
요런 것들을 스크립트에서 활용할 수 있음
e.g. 달력 같은 경우 form 태그에서 달력을 가져오는 경우
이러한 곳들을 이용한 최종 목표는 ?
DOM을 제어하는 것이다.
documetn = html 문서
즉 문서를 제어하게 되는 것이다.
스크립트를 사용하는 방법
인라인 방법 => 추천하지 않음
css 처럼 script도 따른 문서로 작성하고 외부 파일로 분리하여 불러오는 방식으로 하는 것이 좋다.
일반적인 언어의 값의 종류와 변수
정수, 실수, 문자, 문자열
3, 5.55 'a' "hello"
숫자 : number
문자 : string
var x = 'a';여기서 = 은 대입연산자로서 'a'를 x에 대입한다는 뜻.
x는 number 일까 string 일까?
문자를 받았으니 string이다.
자바스크립트에서는 이중 따옴표나 하나 따옴표나 모두 동일하게 취급한다.
var x = "<div></div>";변수에 담아서 사용하는 이유는 무엇일까?
여러 개를 쓴다고 하면 만약 변수를 사용하지 않고 쓰면 전부 다 수정해주어야 함.
하지만 변수를 쓰면 변수 한 번만 수정하면 되므로.
=> 사용성이 좋아진다.
var x;
-> undefined type
var x = null;
-> null type
자바 스크립트 기초 문법 실습해보기
브라우저의 최상위 객체
= window
사용할 수 있는 함수들
이와 같은 코드를 실행하면 순서대로 실행된다.
=> 이를 동기라고 함
순차적으로 시행되지 않으면 비동기.
스크립트에서 변수 사용시
var $strSelector
var str_selector
를 사용한다. 하이픈 안 됨.
var _selector앞에 오는 것도 가능.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 자바 스크립트 사용하는 기본적인 방식 -->
<!-- <script src ="file.js" type="text/javascript"></script> -->
</head>
<body>
<!-- basic.html-->
<p>
<h1>자바스크립트 문법 기초 공부하기</h1>
console.log('1000'); <br>
console.log(typeof '1000'); <br>
console.log(typeof 1000); <br><br>
console.log(1000 + 1000); // 2000 <br>
console.log('1000' + '1000'); // 10001000 <br>
console.log(1000 + '1000'); // 숫자 더하기 문자는 어떨까? 10001000 <br>
<br>
</p>
<div class="str"> document 제어는 스크립트로 !! </div>
<script>
var strSelector = document.querySelector('.str'); // 같은 표현을 변수로 치환하기
strSelector.innerHTML = '문자변경';
// document.querySelector('.str').className = 'change'; // 요소를 변경하였기 때문에 다음 문장에서 .str을 쓰고 있으므로 에러 발생
// document.querySelector('#str').className = 'change';
// document.querySelector('#str').className = 'change'; // 클래스가 아니라 id라면 #을 사용
document.querySelector('.str')
// document는 현재 html 문서를 지칭
// querySelector => div의 selector로서 선정하는 것
// 콘솔로 찍어보면 div가 나온다.
console.log(
document.querySelector('.str')
)
// 이때 .innerHtml 등의 함수를 가져오는 것을 할 수 있음
console.log(
document.querySelector('.str').innerHTML
)
// => 내용만 나온다.
console.log(
document.querySelector('.str').innerHTML,
document.querySelector('.str').className,
)
strSelector.className = 'change';
// 기본적으로 js는 순차적인 order로 읽는다. 하지만 먼저 html을 전부 다 읽고 나서 script를 실행하게 할 수도 있음
</script>
<script>
console.log('1000');
console.log(typeof '1000');
console.log(typeof 1000);
console.log(1000 + 1000); // 2000
console.log('1000' + '1000'); // 10001000
console.log('2000' * '2000'); // 4000000 => 연산이 된다.
console.log(1000 + '1000'); // 숫자 더하기 문자는 어떨까? 10001000
console.log(typeof (1000 + '1000')); // string
console.log(1000 - '1000'); // 0
console.log(1000 * '1000'); // 10000000
// => 더하기만 제외하고 문자와 숫자와 결합을 할 때 연산이 되도록 한다
// 자동 형변환이 일어남 = 브라우저가
console.log(1000 * 'abc'); // Nan
</script>
</body>
</html>'교육 > Javascript&Jquery' 카테고리의 다른 글
| 자바스크립트 + 제이쿼리 입문 day 6 (0) | 2023.01.02 |
|---|---|
| 자바스크립트 + 제이쿼리 입문 day 5 (0) | 2022.12.29 |
| 자바스크립트 + 제이쿼리 입문 day 4 (0) | 2022.12.26 |
| 자바스크립트 + 제이쿼리 입문 day 3 (0) | 2022.12.23 |
| 자바스크립트 + 제이쿼리 입문 day 2 (0) | 2022.12.21 |
