자바웹을 배우는 것이기 때문에 이미 자바를 배운 기초 위에 구축되어 있습니다. 그래서 Java와 비교할 곳이 많아서 중복되는 부분을 자세히 쓰지 않았습니다.

JS자바스크립트에서

인라인

한 쌍의 스크립트 태그를 사용하여 헤드에 스크립트 코드를 정의합니다.

예시:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .btn1{
 width: 150px;
 height: 40px;
 font: 24px;
 font-family: ' ;
 background-color: antiquewhite;
 color: brown;
 border: 3px solid yellow;
 border-radius: 5px;
 }
 </style>
 <script>
 function suprise(){
 alert("hello")
 }
 </script>
</head>
<body>
 <button class="btn1" onclick="suprise()"> </button>
</body>
</html>

내부 스크립팅을 통한 도입

페이지에서 JS 코드는 한 쌍의 스크립트 태그를 통해 도입됩니다.

스크립트 코드의 위치는 어느 정도의 임의성을 가지며, 일반적으로 주로 헤드 태그에 배치됩니다.

스크립트 태그에 도입할 js 파일의 경로를 나타내는 src 속성을 추가하고, 도입할 파일의 유형을 나타내는 type 속성을 추가합니다(여기서 유형은 텍스트/자바스크립트입니다).

예시:

js 파일: '

function suprise(){
 alert("hello")
}

HTML 파일입니다:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .btn1{
 width: 150px;
 height: 40px;
 font: 24px;
 font-family: ' ;
 background-color: antiquewhite;
 color: brown;
 border: 3px solid yellow;
 border-radius: 5px;
 }
 </style>
 <script src="js/button.js" type="text/javascript"></script>
</head>
<body>
 <button class="btn1" onclick="suprise()"> </button>
</body>
</html>

참고:

HTML 파일에는 스크립트 태그가 두 개 이상 있을 수 있습니다.
한 쌍의 스크립트 태그는 외부 js 파일을 도입하면서 내부 스크립트를 정의할 수 없습니다.
스크립트 태그를 사용하여 외부 js 파일을 가져오는 경우 그 사이에 문자가 없는 것이 좋습니다.

JS 데이터 유형 및 연산자

JS의 변수 선언은

변수를 선언할 때 사용되는 데이터 유형은 항상 var입니다(예: var num = 10 var str = "abc").

JS는 유형이 없는 것이 아니라 약한 유형이며, 변수는 선언될 때는 불확정 유형이고 할당될 때는 확정 유형입니다.

JS 데이터 유형

숫자 유형: 숫자 소수 정수에 관계없이 숫자를 사용합니다.

문자열 유형: 문자열

부울 유형: 부울

참조 유형: 개체

기능 유형: 기능

이름이 할당되지 않은 경우 유형과 값이 정의되지 않은 것입니다. 변수에 null 값을 할당할 때 변수의 유형은 객체 유형 0입니다.

JS 문은 세미콜론으로 끝날 수도 있고 세미콜론 없이 끝날 수도 있습니다.

var로 선언된 변수는 여러 번 선언하고 다른 데이터 유형으로 여러 번 할당할 수 있습니다.

JS연산자

산술 연산자: + - * / %

숫자를 0으로 나누면 무한대가 되고 모듈로 0을 곱하면 NaN이 됩니다.

JS의 +는 Java와 마찬가지로 문자열을 연결하는 데 사용되는 연결자로도 작동합니다.

복합 연산자: ++ -- += -= *= /= %=

관계 연산자: < >= <= ! = == ===

저장된 콘텐츠를 비교하는 === 연산자는 데이터 유형도 비교합니다.

논리 연산자: || &&

조건 연산자: 조건식? 값 1:값 2

비트 연산자: | & ^ << >> >>>

기타 지정되지 않은 연산자는 Java에서와 동일합니다.

JS 흐름 제어 및 함수

분기 구조

if

JS의 if는 Java의 if와 거의 동일하지만 동일하지는 않습니다:

if()의 비어 있지 않은 문자열은 참으로 간주됩니다.

만약에 0이 아닌 숫자는 참으로 간주하고, 그렇지 않으면 거짓으로 간주합니다.

널이 아닌 객체도 판단 조건에 넣으면 참이 되고, 널에 넣으면 거짓이 됩니다.

형식:

if(){
}
else if(){
}
else{
}

switch

Java에서와 동일합니다.

형식:

switch(){
case  :
break;
case  :
break;
default:
break;
}

루프 구조

동안은 for 및 Java

형식:

while(){
}

for( ; ; ){
}

포리치 정보

JS의 배열은 var arr = ["abc", "def", "ghi"]로 정의됩니다.

foreach의 형식은 다음과 같습니다:

for(var index in arr){
}

JS에서 변경하려면 : 에서 Java를 사용하면 배열을 대신하여 인덱스가 요소가 아니라 아래 첨자의 요소 배열과 다릅니다. 사용할 때 작업 객체에주의를 기울여야 할 때 요소 아래 첨자가 있습니다.

함수

함수는 두 가지 방식으로 선언됩니다:

function 함수 이름{ }
var 함수 이름= function( ){ }

참고: JS 함수의 매개변수는 약한 타입이므로 데이터 유형을 선언할 필요가 없습니다.

Java와 비교하면 다음과 같은 특징이 있습니다:

액세스 수정자 없음
반환 값 유형과 무효 유형이 없으며, 반환할 값이 있는 경우 직접 반환하면 됩니다.
예외 목록 없음
함수를 호출할 때 실제 매개변수와 형식 매개변수의 개수가 일치하지 않을 수 있으며 순차적으로 값이 전달되고 실제 매개변수가 많을수록 작동하지 않을 수 있습니다.
함수는 다른 메서드에 인자로 전달할 수도 있습니다.

예를 들어 덧셈을 구현하는 함수를 정의합니다.

function sum(a,b){
 return a+b
 }

객체 생성

객체를 만들기 위한 구문입니다:

방법 1: var 객체 이름 = new 객체()

방법 2: var object name = {property name:속성 값,속성 이름:속성 값,함수 이름:함수(){ }......}

객체의 속성 및 기능에 대해 설명합니다:

모드 2는 {}에서 속성과 함수를 직접 정의하는 반면, 모드 1에서는 속성을 추가하는 것이 개체 이름입니다. 속성 = 속성 값

속성이 이미 존재하는 경우 속성에 값을 할당합니다.

예시:


function sum(a,b){
 return a+b
 }
 var person1 = new Object()
 person1.name=" 
 person1.age=19;
 person1.eat=function(food){
 console.log(this.age + "나이"+ this.name + "사랑해 "+ food)
 }
 person1.eat("번")
 var person2 = {
 name:" ,
 age:10,
 eat:function(food){
 console.log(this.age + "나이"+ this.name + "사랑해 "+ food)
 }
 }
 person2.eat("Bun")

참고: JS의 console.log()는 Java의 System.out.print()와 유사합니다.

JSON

JSON 형식은 특정 문자열 구문 구조로, 프론트 엔드와 백엔드에서 JSON 형식의 문자열을 매우 쉽게 변환할 수 있습니다.

JSON 구문 형식: var str = '{"속성 이름":속성 값,"객체 속성 이름":{"속성 이름":속성 값 ,......}, "배열 속성 이름":["element_value","element_value", ......],......}'

속성 이름은 큰따옴표로 묶어야 하며, 문자열 유형인 속성 값은 큰따옴표로 묶어야 하며 숫자 유형은 처리되지 않습니다. 안에는 큰따옴표가 필요하므로 충돌을 방지하기 위해 {} 바깥에는 작은따옴표를 사용해야 합니다.

프런트엔드에서:

JSON 문자열은 JSON.parse()를 통해 객체로 변환할 수 있고, 객체는 JSON.stringify()를 통해 JSON 문자열로 변환할 수 있습니다.

예시:

var personstr = '{"name":" ,"age":19,"dog":{"dname":" ,"dage":4}}'
var person = JSON.parse(personstr) //JSON을 통해.parse()JSON 문자열을 객체로
var jsonstr = JSON.stringify(person) //JSON을 통해.stringify()객체를 JSON 문자열로 변환하기

백엔드에서:

package JSON_test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import static org.junit.jupiter.api.Assertions.*;
class TestJSONTest {
 @org.junit.jupiter.api.Test
 void test1() throws JsonProcessingException {
 Dog dog = new Dog(" ,4);
 Person person = new Person(" ,19,dog);
 //사람 객체를 JSON 문자열로 변환하기.
// 잭슨의 ObjectMapper 객체의 writeValueAsString 메서드를 사용하세요.
 ObjectMapper oo = new ObjectMapper();
 String personstr = oo.writeValueAsString(person);
 System.out.println(personstr);
 }
 void test2() throws JsonProcessingException {
 String personstr2 = "{"name":" ,"age":19,"dog":{"name":" ,"age":4}}";
 ObjectMapper objectMapper = new ObjectMapper();
 Person person = objectMapper.readValue(personstr2, Person.class);
 System.out.println(person);
 }
}

JSON과 컬렉션 간의 변환 정보

Map은 {"key":"value","key":"value ",......} 형식으로 변환되고, List는 {"a", "b", "c ",......} 형식으로 변환됩니다.

JS기본 객체

배열

배열을 만드는 네 가지 방법

new Array(): 빈 배열 생성

new Array(5): 지정된 크기의 배열을 생성합니다.

new Array(ele1,ele2,ele3,......,elen): 배열을 생성하고 엘리먼트 값을 지정합니다.

[ele1,ele2,ele3,......,elen]: 세 번째 구문에 해당하는 속기법

배열 API

toString( ): 배열을 문자열로 변환합니다.

join( ): 배열을 문자로 변환, 기본 쉼표로 분할, 구분 기호 지정 가능

concat(arr2,arr3...): 여러 배열을 연결하고, 연결 후 결과를 반환하며, 원래 배열은 변경되지 않은 상태로 유지합니다.

reverse( ): 배열의 요소를 뒤집고, 뒤집힌 배열을 반환하고, 원래 배열이 변경되고 또한 뒤집혔습니다.

슬라이스(시작,[끝]): 배열 인터셉트

시작은 시작 첨자 끝은 끝 자체가 없는 끝 첨자 끝이 널이면 끝으로 가로채고, 첨자가 음수이면 가로챈 배열로 역귀환하며, 원래 배열은 변경되지 않습니다.

splice(start,[count],[v1],...): 배열 요소 삭제

아래 첨자 삭제의 시작을 시작하십시오 카운트 카운트의 삭제의 길이가 비어있는 경우 아래 첨자 끝에 대한 삭제가 음수이면 카운트 다운 v1과 매개 변수가 삭제 된 요소의 반환에 추가 될 요소의 삭제를 나타내는 경우 원래 배열이이 요소의 삭제에서 변경됨을 나타내는 경우 원래 배열이 변경됨을 나타냅니다.

sort( ): 배열을 정렬하며, 기본값은 유니코드 코드의 첫 글자를 기준으로 정렬합니다.

push( ): 배열의 끝에 요소를 추가하고 배열의 길이를 반환하면 원래 배열이 변경됩니다.

pop( ): 배열의 끝에 있는 요소를 삭제하고 삭제된 요소를 반환하면 원래 배열이 변경됩니다.

unshift( ): 배열의 시작 부분에 요소를 추가하고 배열의 길이를 반환하면 원래 배열이 변경됩니다.

shift( ): 배열의 시작 부분에 있는 요소를 삭제하고 삭제된 요소를 반환하면 원래 배열이 변경됩니다.

indexOf( ): 배열에 요소가 있는지 감지하고, 요소가 있으면 아래 첨자를 반환하고, 없으면 -1을 반환합니다.

Boolean객체

API

toString(): 부울 값을 문자열로 변환하고 결과를 반환합니다.

valueOf(): 부울 객체의 원래 값을 반환합니다.

문자열 객체(컴퓨팅)

API

길이: 문자열의 길이를 가져옵니다.

charAt( ): 아래 첨자에 해당하는 문자를 가져옵니다.

indexOf( ): 문자열에 특정 문자열이 포함되어 있는지 확인하고, 발견한 첫 번째 첨자를 반환하고, 그렇지 않은 경우 -1을 반환합니다.

lastIndexOf( ): 문자열에 특정 문자열이 포함되어 있는지 확인하고, 반환은 마지막으로 찾은 첨자이며, 반환 -1을 찾을 수 없습니다.

슬라이스(시작,[끝]): 인터셉트 문자열

start아래 첨자 시작

end아래 첨자 끝내기

끝 항목은 포함되지 않으며, 끝이 널이면 끝에서 가로채게 됩니다.

음수 부호는 반전된 숫자를 나타냅니다.

toUpperCase( ): 영문자를 대문자로 변환합니다.

toLowerCase( ): 영문자를 소문자로 변환합니다.

split( ): 문자열을 지정된 문자의 배열로 분할합니다.

수학 객체, 날짜 객체, 숫자 객체에서 자바웹 노트에 액세스할 수 있는 시간을 사용하기 위해 쓰지 않습니다!

자바 웹, 자바 script 학습