2024-01-18 (29일차) - 자바스크립트, 제이쿼리
📅 2024-01-18, 29일차
TODO
[프론트엔드]
- 자바스크립트 / 제이쿼리 관련 영상 다시보기 (100%)
- <JavaScript, DOM, JQuery>
- <자바스크립트 JQuery 관련 예제>
- <컴파일언어와 스크립트언어>
- <jQuery 기초 활용>
- 제이쿼리 문법 구글링 및 이해하기 (90%)
[추가로 한 것]
- JDBC_AM 복습 - 로직/흐름 이해하기 (90%)
- 자바스크립트 이벤트 구글링 밑 훑어보기(100%)
- 제이쿼리 메서드 구글링 밑 훑어보기 (100%)
- 벨로그 정리 (100%)
'자바스크립트'란?
- 객체기반 언어 (프로토타입 - 표준)
- 웹의 동작을 구현
- 자바와는 달리 동적이며 컴파일 작업 없이 인터프리터로 바로 해석 후 실행
- HTML의 내용/속성/스타일을 변경 할 수 있음
- 예) 버튼 클릭하면 HTML요소의 스타일이 변경 됨~ 글자가 커짐!
컴파일 언어 vs 스크립트 언어
컴파일 언어
- 소스코드를 작성하고 크 코드를 build 과정을 거쳐서 컴파일한다. 그 결과물로 실행파일을 실행하는 형태의 개발언어.
실행파일 -> 어셈블리어(거의 기계어)- 실행속도 높음
- 실행을 하고 디버깅도 하고 결과를 보려면 컴파일 과정이 필요하다
- 예) 영어원서책 번역본 읽기
스크립트 언어
- 소스코드를 작성하면 그 소스코드를 직접 실행하는 언어
- 실행속도 낮음
- 인터프리터 -> 소스코드 번역기(그때그때 번역(실행))
- 예) 번역가가 그때그때 번역해서 읽어줌
현대의 프로그래밍 소프트웨어 & 하드웨어
어제보다 오늘이 좋다.
소프트웨어와 하드웨어들도 계속 발전하고있고 발전속도가 빠르기때문에
스크립트 언어도 빠른 속도를 보장
그러나, c, c++ 같은 언어보단 절대적으로 느리다
저급언어 : 컴퓨터 하드웨어와 가까운 언어. 기계어/어셈블리어
고급언어 : 사용자와 가까운 언어. 기계어/어셈블리어 이외의 모든 언어
문법
리터럴
- 직접 표현되는 값
- 숫자 리터럴 12
- 문자열 리터럴 "바보" '똥멍청이'
- 불린 리터럴 true
키워드 / 예약어
- var 변수의 정의
- function 함수의 정의
출력
- window.alert() 메소드
- 간단한 데이터 출력 / 별도의 대화 상자를 띄워 데이터 전달
- HTML DOM 요소를 이용한 innerHTML 프로퍼티
- 가장 많이 사용되는 방법
- getElementByID()
- getElementsByTagName()
- document.write() 메소드
- 페이지 로딩될 때 실행되면, 가장 먼저 데이터 출력
- 로딩 후 실행되면, 먼저 로딩됐던 데이터는 지워지니 주의해서 사용
- 테스트나 디버깅에 주로 사용
- console.log() 메소드
- F12 눌러서 콘솔 화면에 출력
- 디버깅 할 때 도움!
자바스크립트 적용
- 내부 코드 -> html 문서 안에 삽입
- 외부 코드 -> 외부파일 생성
기본타입
- 원시타입
- 숫자(number)
- 매우큰수,작은수는 e표기법
- 문자열(string)
- 불리언(boolean)
- 심볼(symbol) : ECMAScript 6부터 제공됨
- undefined
- 객체타입
자바스크립트에서
html을 document하고 한다
자바스크립는 감독이기 때문에, 자바스크립트에서 시키는대로 나온다.
제이쿼리 사용 준비
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- J Query 사용 할 준비 : html 박스 맨 위에 적는다-->this
- 제이쿼리에서 this --> 너~ 라는 뜻! 중복되는 코드에서, this를 활용하면 하나의 로직으로 모두 적용 시킬 수 있다
자바스크립트 문법 해석1
(HTML)
<div style="color:green;">123</div>(CSS)
div {
font-size: 5rem;
color:blue;(JS)
var div = document.querySelector('div');
div.style.color = 'red';
var -> 변수타입
div -> 변수명
document -> html문서
.querySelector() -> CSS 선택자 구하는 메서드
'div' -> html에 적힌 div 엘리먼트
div. -> var div 자바스크립트 문법 해석2
(HTML)
<div></div>
<div></div>
<div></div>
<button>버튼</button>(CSS)
body {
display: flex;
body > div {
width:100px;
height:100px;
border:5px solid red;
}(JS)
console.clear(); -> 콘솔비우기
function.hello(){ <- 함수 실행 버튼
console.log('안녕'); <- 콘솔에 출력
{
function.hello(){ <- 함수 실행 버튼
alert('안녕'); <- 알림창/경고창 띄우기
{버튼 누를때마다 함수 실행 하는 방법
(HTML)
<div></div>
<div></div>
<div></div>
<button onclick="hello();">버튼</button>(CSS)
body {
display: flex;
body > div {
width:100px;
height:100px;
border:5px solid red;
}(JS)
console.clear(); -> 콘솔비우기
function.hello(){ <- 함수 실행 버튼
console.log('안녕'); <- 콘솔에 출력
{
function.hello(){ <- 함수 실행 버튼
alert('안녕'); <- 알림창/경고창 띄우기
{JQuery로 바꿔 사용하는 방법
(JS)
function.hello(){
var els = document.getElementsByTagName('div');
for(var i = 0; i < els.length; i++){
els[i].style.backgroundColor = 'green';
}
}(JQuery)
function.hello(){
var els = $('div');
els.css('background-color', 'green');
}
$ -> 검색하다라는 뜻
.css() -> css 속성 추가 또는 가져오는 메서드
hello world