웹 프론트엔드 JS 튜토리얼 일반적인 JavaScript 방법 요약_기본 지식

일반적인 JavaScript 방법 요약_기본 지식

May 16, 2016 pm 04:29 PM
javascript 일반적인 방법

이 장에서는 이 포인터, 범위, 프로토타입과 같은 js의 일부 기본 원칙에 대해 심층적으로 설명하지 않습니다. 여기에는 일상적인 개발 중에 코드를 단순화하고 실행 효율성을 높이는 데 도움이 되는 몇 가지 사항이 포함되어 있습니다. 실증적인 방법으로 활용하면 길이도 길지 않고, 글 전체를 차근차근 읽어나가며 프로그래밍의 즐거움을 경험할 수 있습니다.

두 간격 내에서 난수 얻기

코드 복사 코드는 다음과 같습니다.

function getRandomNum(Min, Max){ // 두 간격 내에서 난수 가져오기
// @ Backfire Crazy는 첫 번째 매개변수가 두 번째 매개변수보다 클 가능성이 있으므로 판단을 조금 더 추가하는 것이 더 안정적이라고 제안했습니다
(최소 > 최대)
Max = [Min, Min = Max][0] // 두 변수 값을 빠르게 교환 ​​
 
var 범위 = 최대 - 최소 1;
var Rand = Math.random();
Min Math.floor(Rand * Range)를 반환합니다.
};

양수/음수 매개변수를 무작위로 반환

코드 복사 코드는 다음과 같습니다.

function getRandomXY(num){ // 양수/음수 매개변수를 무작위로 반환합니다
num = 새 숫자(num);
If (Math.random() <= 0.5)
         num = -num;
반환 번호;
}

setInterval() 또는 setTimeOut() 타이머 함수 전달 매개변수

코드 복사 코드는 다음과 같습니다.

var s = '나는 매개변수입니다';
함수 fn(args) {
console.log(args);
}
var a = setInterval(fn(s),100); // xxxxxx 오류 xxxxx
var b = setInterval(function(){ // 정확합니다. 익명 함수를 사용하여 시간 제한 함수를 호출하세요
fn(들);
}, 100);

setInterval() 또는 setTimeOut() 타이머가

을 재귀적으로 호출합니다.

코드 복사 코드는 다음과 같습니다.

var s = true;
함수 fn2(a, b){                // 3단계
만약 (들) {
         ClearInterval(a);
        clearInterval(b);
}
};
function fn(a){ // 2단계
var b = setInterval(함수(){
              fn2(a, b) // 타이머 2개 전달
}, 200)
};
var a = setInterval(function(){ // 1단계
fn(a); // b는 타이머 자체를 나타내며 좌석 매개변수로 전달될 수 있습니다
}, 100);

문자열을 숫자로 변환

코드 복사 코드는 다음과 같습니다.

// 새로운 Number(String)나 Number(String)가 필요하지 않습니다. 문자열
에서 0을 빼면 됩니다. var str = '100'; // 문자열: 문자열
var num = str - 0;// num: 숫자

무효값 판단

코드 복사 코드는 다음과 같습니다.

var s = ''; // 빈 문자열
if(!s) // 빈 문자열은 기본적으로 Boolean false로 변환되어 판단문에 직접 쓸 수 있습니다
if(s != null) // 그러나 빈 문자열 != null
if(s != 정의되지 않음) // 빈 문자열도 != 정의되지 않음

IE 브라우저의 ParseInt() 메소드

코드 복사 코드는 다음과 같습니다.

// 다음 변환은 IE에서는 0이고 다른 브라우저에서는 1입니다. 이는 IE 브라우저에서 숫자를 해석하는 데 사용하는 기본 시스템과 관련이 있습니다.
var iNum =parseInt(01);
// 따라서 호환되는 쓰기 방식은
var num = parsInt(new Number(01));

JS 코드를 편리하게 디버깅하는 Firebug

코드 복사 코드는 다음과 같습니다.

//Firebug에는 정보를 표시하는 내장 메소드를 제공하는 내장 콘솔 객체가 있습니다
/**
* 1: Alert() 또는 document.write()를 대체하는 데 사용할 수 있는 console.log()는 자리 표시자 출력, 문자(%s), 정수(%d 또는 %i), 부동 소수점 숫자(%f)를 지원합니다. ) 및 개체(%o). 예: console.log("%d년 %d월 %d일", 2011,3,26)
*2: 정보가 너무 많으면 그룹으로 표시될 수 있습니다. 사용되는 메소드는 console.group() 및 console.groupEnd()
*3: console.dir()은 객체의 모든 속성과 메서드를 표시할 수 있습니다
* 4: console.dirxml()은 웹 페이지의 노드에 포함된 html/xml 코드를 표시하는 데 사용됩니다.
* 5: 표현식이나 변수가 참인지 확인하는 데 사용되는 console.assert() 어설션
* 6: console.trace()는 함수 호출 추적을 추적하는 데 사용됩니다.
* 7: console.time() 및 console.timeEnd(), 코드의 실행 시간을 표시하는 데 사용
* 8: 성능 분석(Profiler)은 프로그램의 각 부분의 실행 시간을 분석하여 병목 현상이 발생한 위치를 찾는 것입니다. 사용되는 방법은 console.profile()....fn....console.profileEnd( )
​*/

현재 시간을 밀리초 단위로 빠르게 가져옵니다.

코드 복사 코드는 다음과 같습니다.

// t == 현재 시스템 밀리초 값, 이유: 부호 연산자는 Date의 valueOf() 메서드를 호출합니다.
var t = 새로운 날짜()

소수점 자리를 빠르게 가져오기

코드 복사 코드는 다음과 같습니다.

// x == 2, 다음 x 값은 모두 2, 음수도 변환 가능
변수 x = 2.00023 0;
// x = '2.00023' 0;

두 변수의 값을 교환합니다(중간수량은 사용하지 않음)

코드 복사 코드는 다음과 같습니다.

var a = 1;
var b = 2;
a = [b, b=a][0]
Alert(a '_' b) // 결과 2_1, a와 b의 값이 바뀌었습니다.

논리 OR '||' 연산자

코드 복사 코드는 다음과 같습니다.

// b는 null이 아닙니다: a=b, b는 null입니다: a=1.
var a = b || 1;
// 더 일반적인 사용법은 매개변수를 플러그인 메소드에 전달하고 이벤트 대상 요소를 얻는 것입니다. event = event || // IE에는 window.event 개체가 있지만 FF에는 없습니다.

메서드 객체에만 프로토타입 속성이 있습니다

코드 복사 코드는 다음과 같습니다.
// 메소드에는 객체 프로토타입 프로토타입 속성이 있지만 원본 데이터에는 이 속성이 없습니다. 예를 들어 var a = 1, a에는 프로토타입 속성이 없습니다.
function Person() {} // 사람 생성자
Person.prototype.run = function() { Alert('run...') } // 프로토타입 실행 방법
Person.run(); // 오류
var p1 = new Person(); // new 연산자를 사용할 때만 프로토타입 실행 메소드가 p1에 할당됩니다
p1.run(); // 실행...

요일 빠르게 확인

코드 복사 코드는 다음과 같습니다.
// 현재 시스템 시간이 요일인지 계산
var week = "오늘은: 주" "1일, 2일, 3일, 4일, 5일, 6일".charat(new date().getDay());

폐쇄편향

코드 복사 코드는 다음과 같습니다.

/**
* 클로저: 모든 js 메소드 본문을 클로저라고 부를 수 있습니다. 이는 인라인 함수가 외부 함수의 매개변수나 속성을 참조할 때만 발생하는 것이 아닙니다.
* 이 안에는 여러 하위 범위(즉, 메서드 중첩 메서드)가 있을 수 있는 독립적인 범위가 있습니다. 결국 클로저 범위는 가장 바깥쪽 메서드의 범위입니다. * 자체 메소드 매개변수와 모든 내장 함수의 메소드 매개변수를 포함하므로 내장 함수에 외부 참조가 있는 경우 참조 범위는 참조 함수가 위치한 (최상위) 메소드 범위가 됩니다
​*/
함수 a(x) {
함수 b(){
Alert(x); // 외부 함수 매개변수 참조
}
반품b;
}
var run = a('실행...')
// 범위 확장으로 인해 외부 함수 a의 변수를 참조하여 표시할 수 있게 되었습니다
실행(); // 경고(): 실행..

주소 매개변수 문자열을 가져오고 정기적으로 새로 고침

코드 복사 코드는 다음과 같습니다.
// 물음표를 얻으시겠습니까? 다음 내용에는 물음표가 포함되어 있습니다
var x = window.location.search
// #번호를 포함하여 경찰번호 #뒤의 내용을 가져옵니다
var y = window.location.hash
// 타이머를 사용하여 웹페이지를 자동으로 새로고침합니다
window.location.reload();

Null 및 정의되지 않음

코드 복사 코드는 다음과 같습니다.
/**
* 정의되지 않은 유형에는 정의되지 않은 값이 하나만 있습니다. 선언된 변수가 초기화되지 않은 경우 변수의 기본값은 정의되지 않습니다.
* Null 유형에는 null 값이 하나만 있습니다. Null은 아직 존재하지 않는 개체를 나타내는 데 사용됩니다. 함수가 존재하지 않는 개체를 반환하려고 시도함을 나타내는 데 자주 사용됩니다.
* ECMAScript는 undefound가 null에서 파생된 것으로 간주하므로 동일하게 정의됩니다.
* 그런데 어떤 경우에는 이 두 가치를 구별해야 한다면 어떻게 해야 할까요? 다음 두 가지 방법을 사용할 수 있습니다
* 판단할 때, 객체에 값이 있는지 판단할 때는 '===' 강형 판단을 활용하는 것이 가장 좋습니다.
​*/
var a;
Alert(a === null); // false, a는 빈 객체가 아니기 때문입니다
Alert(a === undefine); // true, a가 초기화되지 않았기 때문에 값이 정의되지 않았습니다
// 확장
Alert(null == undefine); // '==' 연산자가 유형 변환을 수행하므로 true입니다.
//마찬가지로
경보(1 == '1'); // 참
Alert(0 == false); // true, false는 숫자 유형 0으로 변환됩니다

메소드에 매개변수를 동적으로 추가하세요

코드 복사 코드는 다음과 같습니다.
// 메소드 a에는 매개변수 2가 하나 더 있습니다
함수 a(x){
var arg = Array.prototype.push.call(arguments,2);
경고(인수[0] '__' 인수[1]);
}

맞춤형 SELECT 테두리 스타일

코드 복사 코드는 다음과 같습니다.
<!-- 페이지에 복사하여 효과를 시험해 보세요. 스타일을 원하는 대로 맞춤 설정할 수 있습니다. -->
<span style="border:1px 단색 빨간색; 위치:절대; 오버플로:숨김;" >
<select style="margin:-2px;">
& Lt; 옵션 & gt; SELECT 테두리 스타일 사용자 정의 & lt;/option & gt; > > </선택>
</스팬>



가장 단순한 색상 팔레트

코드 복사

코드는 다음과 같습니다. <!-- JS를 사용하여 값을 추출하고 객체에 색상을 설정하세요 --> <입력 유형=색상 />


함수, 객체가 배열인가요?

코드 복사

코드는 다음과 같습니다.

var anObject = {}; //객체
anObject.aProperty = “객체의 속성”; //객체의 속성
anObject.aMethod = function(){alert(“객체의 메서드”)}; //객체의 메서드
//주로 다음 내용을 살펴보세요.
Alert(anObject[“aProperty”]); //객체를 배열로 사용할 수 있고 속성 이름을 아래 첨자로 사용하여 속성에 액세스할 수 있습니다
anObject[“aMethod”](); //객체를 배열로 사용하고 메소드 이름을 첨자로 사용하여 메소드를 호출할 수 있습니다
for( var s in anObject) //반복 처리를 위해 객체의 모든 속성과 메서드를 탐색합니다
경고(s ”는 ” typeof(anObject[s]));
// 함수 유형의 객체에도 마찬가지입니다:
var aFunction = function() {}; //함수
aFunction.aProperty = “함수 속성”; //함수 속성
aFunction.aMethod = function(){alert(“함수 메서드”)}; //함수 메서드
//주로 다음 내용을 살펴보세요.
Alert(aFunction[“aProperty”]); //함수를 배열로 사용하고 속성 이름을 아래 첨자로 사용하여 속성에 액세스할 수 있습니다
aFunction[“aMethod”](); //함수를 배열로 사용하고 메소드 이름을 첨자로 사용하여 메소드를 호출할 수 있습니다
for(var s in aFunction) //반복 처리를 위해 함수의 모든 속성과 메서드를 탐색합니다
경고(s ”는 ” typeof(aFunction[s]));

코드 복사 코드는 다음과 같습니다.

/**
* 예, 객체와 함수는 속성 이름이나 메소드 이름을 첨자로 사용하여 배열처럼 액세스하고 처리할 수 있습니다.
* 그렇다면 배열로 봐야 할까요, 아니면 객체로 봐야 할까요? 우리는 배열이 선형 데이터 구조로 간주되어야 한다는 것을 알고 있습니다. 선형 데이터 구조는 일반적으로 특정 규칙을 가지며 통합 배치 반복 작업에 적합합니다.
* 객체는 개별 데이터 구조로, 입자와 같이 분산되고 개인화된 사물을 설명하는 데 적합합니다.
* 그러므로 우리는 다음과 같이 질문할 수도 있습니다. JavaScript의 객체는 파동인가 입자인가? 물체에 대한 양자 이론이 있다면 대답은 파동-입자 이중성이어야 합니다!
* 따라서 자바스크립트의 함수와 객체는 객체와 배열의 특성을 모두 가지고 있습니다. 여기서 배열은 임의로 확장할 수 있는 이름-값 쌍의 모음인 "사전"이라고 합니다. 실제로 객체와 함수의 내부 구현은 사전 구조인데, 이 사전 구조는 엄격하고 절묘한 구문을 통해 풍부한 모습을 보여줍니다. 양자 역학이 입자를 사용하여 어떤 곳에서는 문제를 설명하고 처리하고 다른 곳에서는 파동을 사용하는 것과 같습니다. 필요할 때 문제를 설명하고 처리하기 위해 객체나 배열을 자유롭게 선택할 수도 있습니다. JavaScript의 이러한 놀라운 기능을 잘 이해하는 한 간결하고 강력한 코드를 많이 작성할 수 있습니다.
​*/

빈 공간을 클릭하면 특정 요소가 닫히거나 숨겨질 수 있습니다

코드 복사 코드는 다음과 같습니다.

/**
* 때로는 페이지에 드롭다운 메뉴나 기타 효과가 있어서 사용자가 빈 공간을 클릭하거나 다른 요소를 클릭하여 숨겨야 하는 경우도 있습니다.
* 전역 문서 클릭 이벤트에 의해 트리거될 수 있습니다
* @param {Object} "대상 객체"
​*/
$(문서).click(함수(e){
$("대상 객체").hide();
});
/**
* 하지만 한 가지 단점은 요소를 클릭하면 표시되기를 원한다는 것입니다
* 전역 시작 문서 객체까지 이벤트가 버블링되는 것을 시간 내에 막지 않으면 위 메소드가 실행됩니다
​*/
$("대상 개체").click(function(event){
이벤트 = 이벤트 || window.event;
Event.stopPropagation(); // 대상 객체를 클릭하면 시간에 따른 이벤트 버블링을 중지합니다.
$("대상 객체").toggle();
});

위 내용은 제가 직접 개발하는 동안 쉽게 사용할 수 있도록 컴파일한 몇 가지 자주 사용되는 자바스크립트 방법입니다. 또한 도움이 필요한 친구들에게도 추천합니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축

자바스크립트에서 insertBefore를 사용하는 방법 자바스크립트에서 insertBefore를 사용하는 방법 Nov 24, 2023 am 11:56 AM

자바스크립트에서 insertBefore를 사용하는 방법

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법

See all articles