▷ 자바스크립트란?
- 프로그래밍 언어 중 하나로 브라우저가 이해하는 언어입니다.
- (상식을 기다려!
)
Q. 브라우저가 Javascript만 인식하는 이유는 무엇입니까? HTML에서 Python이나 Java와 같은 언어를 사용할 수 없습니까?
A. 불가능한 이야기는 아닙니다.
그러나 이러한 “이미 만들어진 역사적 이유 및 표준”으로 인해 모든 브라우저는 기본적으로 Javascript를 이해하도록 설계되었으며 모든 웹 서버는 HTML+CSS+Javascript를 제공하도록 되어 있습니다.
▷ Javascript의 기본 구문 배우기
- console.log()는 화면의 미리보기를 캡처합니다.
- Console.log는 개발자가 우리가 코딩한 내용이 제대로 출력되는지 미리 확인하는 도구입니다.
.?
- Console.log는 개발자가 우리가 코딩한 내용이 제대로 출력되는지 미리 확인하는 도구입니다.
console.log(‘안녕하세요’)
- 변수 및 기본 연산
- let으로 변수를 선언합니다.
- 허용하다 ㅏ = 2
ㅏ = ‘단발’ // 문자열을 작은따옴표로 묶습니다!
// 변수는 값을 저장하는 상자입니다.
// 처음으로 변수를 저장하려면 let!
// 다시 선언하지 않고 선언 후 값을 입력합니다.
- 허용하다 ㅏ = 2
- 사칙연산과 문자열 덧셈은 기본적으로 가능하다.
- 허용하다 ㅏ = 2
허용하다 비 = 삼console.log(a+비) // 5
허용하다 씨 = ‘약’
허용하다 디 = ‘민국’콘솔.로그(c+디) // 한국
- 허용하다 ㅏ = 2
- let으로 변수를 선언합니다.
- 목록 및 사전
- 목록: 이것은 물건을 순서대로 유지하는 한 형태입니다.
!
컴퓨터 0부터 세다!
목록에서 첫 번째 값은 (0)으로 로드됩니다!
- 허용하다 목록 = () // 목록을 선언합니다.
변수 이름은 무엇이든 될 수 있습니다!
// 또는,
허용하다 ㅏ = (‘사과’, ‘수박’, ‘딸기’, ‘감’) //로 선언할 수 있습니다.
콘솔.로그(a(1)) // 수박
console.log(a(0)) // 죄송합니다// 목록 길이 가져오기
console.log(a.길이) //4
- 허용하다 목록 = () // 목록을 선언합니다.
- 사전: 키-값 값 세트
- 허용하다 a_dict = {} // 사전 선언. 변수 이름은 무엇이든 될 수 있습니다!
// 또는,
허용하다 ㅏ = {‘성’:‘영수’,‘나이’:27} //로 선언할 수 있습니다.
콘솔.로그(a)
콘솔.로그(a(‘성’)) // 영수
콘솔.로그(b_dict(‘나이’)) // 27
- 허용하다 a_dict = {} // 사전 선언. 변수 이름은 무엇이든 될 수 있습니다!
- 목록과 사전의 조합
- 괄호와 키 값 형태로 많은 데이터를 쓰고 있어요!
기본 문법입니다! - 허용하다 ㅏ = (
{‘성’:‘영수’,‘나이’:27},
{‘성’:‘후퇴’,‘나이’:15},
{‘성’:‘영희’,‘나이’:20}
)
console.log(a(0)(‘성’)) //영수
console.log(a(1)(‘나이’)) //15
- 괄호와 키 값 형태로 많은 데이터를 쓰고 있어요!
- 왜 필요할까요
- 주문 및 그룹 정보를 볼 수 있습니다.
위에서 언급한정말 잘나가고 전국에서 손님들이 찾아오십니다.
대기자 명단을 작성하기 위해 도착한 순서대로 이름과 휴대폰 번호를 적으라는 요청을 받았습니다.
변수만 사용하면 다음과 같습니다.
let customer_1_name=”스파킴”;
남겨 customer_1_phone=”010-1234-1234″;
let customer_2_name=”바클레탄”;
남겨 customer_2_phone=”010-4321-4321″;
…(보기 어렵습니다.
)사전을 사용하여 다음과 같이 고객별로 정보를 그룹화할 수 있습니다.
let customer_1 = {‘이름’: ‘김스파’, ‘전화’: ‘010-1234-1234’};
let customer_2 = {‘이름’: ‘바클레탄’, ‘전화’: ‘010-4321-4321’};목록을 사용하여 순서를 나타내면 상황이 정말 좋아집니다.
고객 떠나기 = (
{‘이름’: ‘김스파’, ‘전화’: ‘010-1234-1234’},
{‘이름’: ‘바클레탄’, ‘전화’: ‘010-4321-4321’}
)깔끔해 보이고 사용하기 쉬우며 새로운 고객이 오더라도 .push 기능을 사용하여 응답할 수 있습니다.
- 주문 및 그룹 정보를 볼 수 있습니다.
- 추가 리소스 – 필수 기능
- 네 가지 산술 연산 외에도 기본적으로 제공되는 몇 가지 기능이 있습니다.
왠지 이게 존재하는 것 같죠? (예: 특정 캐릭터를 변경하고 싶다 등) 구글에 먼저 검색해보세요! - 예를 들어, ‘나머지 부서’얻고 싶다면
a = 20으로 하자
b = 7로 하자a % b = 6
- 또한 특정 문자 뒤에 문자열을 분할하려는 경우
허용하다 내 이메일 = ‘[email protected]’허용하다 결과 = myemail.split(‘@’) // (‘스파르타’,’googlemail.com’)
결과(0) //스파르타
결과(1) // gmail.com허용하다 결과2 = 결과(1).분할(‘.’) // (‘gmail’,’com’)
결과2(0) // gmail -> 우리가 알고 싶었던 것!
결과2(1) // commyemail.split(‘@’)(1).분할(‘.’)(0) // gmail -> 그냥 쓰시면 됩니다!
- 네 가지 산술 연산 외에도 기본적으로 제공되는 몇 가지 기능이 있습니다.
- 목록: 이것은 물건을 순서대로 유지하는 한 형태입니다.
▷ Javascript 및 JQuery 연습 (1)
- JQuery 란 무엇입니까?
jQuery를 사용하는 이유는 무엇입니까? 인터넷 조작 시도!
왜 조작? 이동하려면!
하지만 javascript만 사용하는 것은 복잡해서 jQuery도 사용합니다!
- HTML 요소를 조작하는 기성품 편리한 자바 스크립트. 도서관!
그러나 모든 기능(예: 버튼 텍스트 변경)은 Javascript로 구현할 수 있습니다.
1) 코드가 복잡하고 2) 브라우저 간 호환성 문제도 해결됩니다.
제이Query라는 라이브러리가 등장했습니다. - jQuery와 Javascript – 코드 비교
jQuery는 자바스크립트와 다른 특별한 소프트웨어가 아니라 미리 만들어진 자바스크립트 코드입니다.
전문 개발자가 작성한 코드를 사용하고 있음을 기억하십시오!
(그래서 작성하기 전에 “가져와야” 합니다!
)
- HTML 요소를 조작하는 기성품 편리한 자바 스크립트. 도서관!
- jQuery 사용
- 미리 빌드된 Javascript 코드를 가져오는 것을 “가져오기”라고 합니다.
https://www.w3schools.com/jquery/jquery_get_started.asp
- 미리 빌드된 Javascript 코드를 가져오는 것을 “가져오기”라고 합니다.
- 사이에 다음을 추가하십시오. 그리고 하나 그리고 당신은 끝났습니다!
- jQuery를 사용하는 방법
CSS와 마찬가지로 jQuery를 사용할 때도 “표시” → 조작이 가능합니다.
예) → 특정 입력란의 값을 가져와!
예) 특정 div → 투명화!
CSS에서 클래스를 선택자로 사용해 보셨습니까?
jQuery에서는 id 값으로 특정 버튼/입력 필드/div/.. 등을 가리킵니다.
백 마디 말보다 더 많은 것을 보십시오!
많이 사용하는 jQuery와 연동하여 배워봅시다! - 제이쿼리 연습하기
- 스켈레톤을 prac.html에 삽입합시다!
- 스켈레톤을 prac.html에 삽입합시다!
DOCTYPE html> 하자 = “사과” $(‘#q1’).텍스트(아) }
.버튼 부분 {
디스플레이: 플렉스;
높이: 50px;
}
함수 체크결과() {
1. 기능
두 번째 목록
3. 사전
4. 리스트 사전