>웹 프론트엔드 >JS 튜토리얼 >JavaScript 사용 공유

JavaScript 사용 공유

巴扎黑
巴扎黑원래의
2017-07-18 15:51:25950검색

1 개요

1. JavaScript란 무엇입니까?

객체 기반, 이벤트 중심 해석 스크립트 언어입니다.

2. JavaScript 구문 기능

  • 대소문자를 구분하며 이는 HTML과 다릅니다.

  • 끝의 세미콜론은 선택사항입니다.

  • 변수는 약한 유형입니다. 변수는 정의할 때 균일하게 var이고 할당할 때 유형이 결정됩니다.

3. UI 스레드

브라우저에는 UI 스레드라는 페이지 표시용 스레드가 있습니다. UI 스레드는 서버에 제출한 후 페이지를 지우고 로딩 서버의 피드백을 기다립니다. 너무 오래 기다리면 페이지가 공백으로 나타납니다.

4.this

는 메소드에서 주로 사용되며, 현재 객체, 즉 메소드의 직접 호출자를 나타냅니다.

II 데이터 유형

1. JavaScript 데이터 유형

문자열, 숫자, 수학, 배열, 부울, 날짜, 개체, RegExp, null.

2. 변수 정의

  • 전역 변수: 함수 외부에서 선언된 변수는 전역 변수이며 페이지 전체에서 유효합니다. 선언되지 않은 변수에 값을 할당하면 전역 변수로 변환됩니다.

  • 지역 변수: 함수 내부에 선언된 변수는 지역 변수이며 함수 내부에서만 유효합니다.

  • 이: 함수 내부에서 변수를 선언할 때 이 참조를 사용하면 함수 외부의 객체를 통해 변수를 참조할 수 있습니다.

3.String

일반적인 방법:

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

  • ==: JS에서 두 문자열이 같은지 비교하려면 "=="를 사용하세요.

  • indexOf(subStr): 지정된 문자가 처음 나타나는 인덱스 값입니다.

  • lastIndexOf(subStr): 문자가 마지막으로 나타나는 인덱스 값을 지정합니다.

  • substr(begin[len]): 지정된 위치에서 시작하여 지정된 길이의 문자를 가져옵니다.

  • substring(begin[end]): 지정된 인덱스 범위의 문자를 가져옵니다.

  • replacement(regExp,substr): 형식을 충족하는 문자를 지정된 문자로 바꿉니다.

  • concat(str01...): 여러 문자열을 연결하고 새 문자열을 반환합니다.

  • 분할(delim[limit]): 지정된 구분 기호를 사용하여 문자를 분할하고 분할 결과를 배열 형식으로 반환합니다. 제한은 분할 수이며 선택 사항입니다.

4.Number

  • toFixed(n): 소수점 n자리를 유지합니다.

5.Math

  • random(): 0~1 사이의 숫자를 무작위로 반환합니다.

  • 라운드(x): 라운드.

  • max(x...): 최대값을 구합니다.

  • min(x...): 최소값을 구합니다.

6.Date

  • getTime(): 1970-01-01부터 현재까지의 밀리초 수를 가져옵니다.

  • getFullYear(): 이때 4자리 연도를 가져옵니다.

  • getMonth(): 이때 달을 구합니다.

  • getDate(): 해당 월의 날짜를 가져옵니다.

  • getDay(): 요일을 가져옵니다(범위 0-6).

  • getHours(): 현재 시간을 가져옵니다.

  • getMinutes(): 현재 시간(분)을 가져옵니다.

  • getSeconds(): 현재 시간(초)을 가져옵니다.

7.RegExp

작성자:

var reg=/xxxx/;
var ret=new RegExp("");

常用方法:
  test(str):判断字符串是否满足指定的格式。

8.Array

⑴数据类型

   不同与java语言,JS中的数组在创建时不需要指定长度与数据类型,可以存储多种类型数据。

⑵创建(3种方式)

var arr01=[数组中的值];//创建时赋值
var arr01=new Array(数组中的值);//创建时赋值
//先声明,后赋值
var arr01=new Array();
arr01[0]=1;
arr01[1]=2;
var arr01=new Array(6);//创建时指定数组长度

⑶常用操作

  • arr[0]:获取指定索引位置的元素,也可以为指定索引位置赋值。

  • arr.length:获取数组长度。

  • push(data):向数组尾部添加元素并返回操作完成后的数组长度。

  • unshift(data):向数组头部添加一个元素并返回数组长度。

  • pop():删除数组的最后一个元素并返回删除的元素。

  • shift():删除并返回数组的第一个元素。

  • for(index in arr):遍历数组,arr[index]获取数组中的元素。

  • sort(function(a,b){return a-b;}):如果数组中存储的是字符,不需要指定函数,按照字母升序排序;如果数组中存储的是数字,需要设定排序函数,a-b升序排列,b-a降序排列。

  • reverse():反转排序。

  • join(connector):使用指定的连接符将数组连接成字符串,未指定连接符时默认采用","作为连接符。

  • toString():等效于join(),将数组转化为一个由","连接的字符串。

  • slice(begin,end):获取指定索引范围的元素,包含begin,不包含end。

  • splice(begin,howmany,newValue...):从指定索引位置(包含该位置)开始删除howwmany个元素,插入新的元素。

  • concat(anotherArr...):将参数数组的元素依次追加到该数组中并返回一个新的数组,原数组不变。

9.Object

⑴用于自定义对象,对象的创建方式:

//第一种方式,对象的声明与实例化一体
var obj={name:"张三",age:20,myFunction:function(){}};
//第二种方式,将函数当做构造方法
function person(name,age){
this.name=name;
this.age=age;
this.myfunction=function(){
alert(this.name);
     }
}
var tom=new function("tom",20);
//第三种方式
person=function(){
this.name=name;
this.age=age;
this.myfunction:function(){
      }
}
var tom=new function("tom",20);

⑵fn01: fn02의 의미

fn02를 fn01에 할당하면 fn01은 fn02와 완전히 동일한 내용을 갖습니다.

세 가지 속성

사용자는 객체의 특성을 설명하고 객체를 인스턴스화합니다.
공통 속성:

  • href="#": 페이지 시작 부분으로 이동합니다.

  • 제목은 요소의 텍스트로 직접 표시됩니다. 요소가 텍스트를 직접 표시할 수 없는 경우 해당 요소 위에 마우스를 놓으면 프롬프트 메시지로 표시됩니다.

4개의 창

브라우저 창 개체는 전역 개체이며 모든 개체의 최상위 개체로 속성이나 함수를 참조할 때 생략할 수 있습니다.

1. 공통 속성

  • 문서: 창의 모든 HTML 요소를 나타내는 개체입니다.

  • 닫힘: 부울 유형, 현재 창이 닫혔는지 확인하는 데 사용됩니다.

  • 위치: 현재 페이지의 URL을 가져오고 HTML, 서블릿 또는 기타 서버 리소스일 수 있는 지정된 리소스에 액세스하여 현재 페이지에서 엽니다. location=url은 location.href=url과 동일한 기능을 갖습니다.

  • 기록: 현재 창의 탐색 기록을 나타내는 개체입니다. 검색 기록 형성을 전제로 이전 페이지와 다음 페이지로 점프할 수 있고, History.go(-1)는

    이전 페이지로 점프하고, History.go(1)은 다음 페이지로 점프합니다.

  • parent: 현재 창이 포함된 상위 창을 나타냅니다.

  • 오프너: 현재 창의 상위 창을 여는 것을 의미하며, 일반적으로 부모-자식 창 통신에 사용됩니다.

2. 일반적으로 사용되는 방법:

  • 경고(콘텐츠): 경고 대화 상자를 표시합니다.

  • confirm(content): 확인 대화 상자를 팝업하고 확인 결과(true 또는 false)를 반환합니다.

  • 프롬프트: 사용자 입력 및 입력 결과 반환에 사용되는 프롬프트 대화 상자입니다.

  • setTimeout(): 예약된 실행입니다.

  • setInterval(): 주기적으로 실행됩니다.

  • open(): 지정된 URL을 새 창에 로드합니다.

  • close(): 현재 창을 닫습니다.

  • parseInt(): 문자를 정수 숫자로 변환합니다.

  • 평가: 일반 문자열을 JS 코드로 구문 분석합니다.

  • typeof: 반환된 데이터 유형입니다.

  • isNaN: 데이터가 숫자인지 확인합니다.

Five DOM

문서를 운영하는 기술입니다. 문서는 트리 형태의 계층적 결과로 배열된 개체로 간주됩니다.

1. 요소

문서의 라벨 노드입니다.

하위 노드: 속성 노드를 제외한 요소 노드, 텍스트 노드, 주석 노드.
2. 객체 생성

document.createElement(tagName): 태그 이름을 기반으로 요소를 생성하며, 매개변수로 태그에는 <>가 없습니다.

3. 객체 가져오기

document.all.id: ID를 기준으로 객체를 가져옵니다.
  • formId.tagId: id를 통해 양식 아래의 요소를 가져오거나 "formName.tagName"을 통해 양식 아래의 요소를 가져올 수 있습니다.
  • document.getElementById(id): ID를 기반으로 개체를 가져옵니다.
  • document.getElementsByName(name): 이름을 기준으로 객체를 가져옵니다. 동일한 이름을 가진 객체가 여러 개 있을 수 있으므로 획득한 객체는 복수형입니다.
  •   document.getElementsByTagName(tagName):通过标签名称获取对象。

4.属性

  •  document.location:同document.location.href作用相同,用于访问指定资源,该资源可以是HTML,也可以是Servlet以及其他服务器资源,不能获取当前页面的URL。

5.常用方法

  •  document.write(content):向页面输出。

六 函数

 在JS中调用函数不必像在java中那样必须为每一个形参赋值,只需为需要的形参赋值即可,其他形参位可以空着。每一个函数都有其对应的作用范围,不同作用范围的函数定义在不同的节点上。

  1.常用函数

   javascript:void(0):保留超链接样式,只执行js代码,不进行页面跳转。

  2.动态添加函数

动态地向元素添加函数有两种方式:

⑴使用JS:

使用JS获取对象以后,通过对象调用函数不包含括号),将自定义的函数function赋给该函数

obj.action=function(){};

⑵使用JQuery:

$(selector).action(function(){});

两种方式不能混用,即不能这样使用:$(selector).action=function(){}。

3.插入

java输出代码块与EL表达式都可以插入JavaScript代码中,插入时将其视作字符串处理,包裹在单引号或者双引号中,如:

alert("<%=name%>");
alert("${name}");

7가지 이벤트

액션으로 인해 발생하는 동작을 이벤트라고 합니다. 이벤트에는 여러 기능을 추가할 수 있으며, 여러 기능이 추가된 순서대로 순차적으로 실행됩니다. 다양한 요소는 다양한 이벤트에 해당합니다.

1. 일반적으로 사용되는 이벤트:

  • onclick: 마우스를 클릭할 때 트리거됩니다.

  • onchange: 드롭다운 목록 상자의 옵션이 변경될 때 트리거됩니다.

  • onblur: 초점이 상실될 때 트리거됩니다.

  • onfocus: 초점이 맞춰지면 트리거됩니다.

  • onmouseover: 마우스가 요소 위로 움직일 때 트리거됩니다.

  • onmousemove: 마우스가 요소 위에서 움직일 때 트리거됩니다.

  • onmouseout: 마우스가 요소를 떠날 때 트리거됩니다.

  • onselect: 텍스트 필드가 선택되면 트리거됩니다.

8가지 양식 제출

1. 버튼 제출

제출 버튼을 클릭하여 양식을 제출하세요.

2. 코드 제출

document.forms["formName"].submit() 코드를 실행하고 코드를 통해 양식을 제출합니다.

나인 부모-자식 창 통신

부모-자식 창 통신은 창을 여는 창에 정보를 전송하는 창, 즉 자식 창은 부모 창에 정보를 전송하고, 부모 창은 정보를 전송하는 것을 말합니다. 자식 창에 정보를 전송합니다

정보는 QueryString을 통해 완료될 수 있습니다.

자식 창이 부모 창으로 정보를 전달하기 위한 핵심은 자식 창에서 부모 창 객체를 얻고, window.opener를 통해 부모 창 객체를 얻은 후, 부모

창에서처럼 동작하는 것입니다.

ten table

1. 테이블 개체에 대한 일반적인 작업

  • table.rows: 테이블의 모든 행을 포함하는 배열 개체인 table.rows.length는 길이를 가져옵니다. 행 수.

  • insertRow(index): 지정된 위치에 행을 삽입하고, 위치를 지정하지 않고 맨 끝에 삽입합니다.

  • deleteRow(index): 지정된 위치의 행을 삭제합니다. 위치가 지정되지 않은 경우 마지막 행을 삭제합니다.

2. tr 객체에 대한 일반적인 작업

  • rowIndex: 인덱스 위치, 즉 행 번호를 가져옵니다.

  • insertCell(index): 지정된 위치에 열을 삽입합니다. 지정하지 않은 경우 끝에 삽입합니다.

  • deleteCell(index): 지정된 위치의 열을 삭제합니다. 위치가 지정되지 않은 경우 마지막 열을 삭제합니다.

위 내용은 JavaScript 사용 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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