jsプレミアム_オブジェクト向け&&内蔵オブジェクト&&BOM&パッケージ
90511 ワード
jsプレミアム_オブジェクト向け&&内蔵オブジェクト&&BOM&パッケージ
JavaScriptオブジェクト向け
クラスの定義と使用
単純なケース
クラスの定義と使用
たとえば
三継承
たとえば
JavaScript組み込みオブジェクト
1 Number
メソッド名
説明
parseFloat()
入力した文字列の浮動小数点数を浮動小数点数に変換
parseInt()
入力された文字列の整数を整数に変換
二Math
メソッド名
説明
ceil(x)
上向きに整える
floor(x)
下向きに整列
round(x)
最も近い整数に四捨五入する
random()
乱数は、0.0～1.0の範囲を返します(ヘッダと末尾は含まれません).
pow(x,y)
べき乗演算xのy次方
三Date
構築方法
説明
Date()
現在の時間に基づいてオブジェクトを作成
Date(value)
指定したミリ秒値に基づいてオブジェクトを作成
Date(year,month,[day,hours,minutes,seconds,milliseconds])
指定したフィールドに基づいてオブジェクトを作成します(月は0~11)
メンバーメソッド
メンバーメソッド
説明
getFullYear()
年の取得
getMonth()
月の取得
getDate()
取得日数
getHours()
取得時間
getMinutes()
取得分
getSeconds()
取得秒数
getTime()
1970年1月1日現在のミリ秒数を返します.
toLocaleString()
ローカル日付フォーマットを返す文字列
四String
構築方法
説明
String(value)
指定した文字列に基づいてオブジェクトを作成
let s=「文字列」
ちょくせつわりあて
メンバーメソッド
メンバーメソッド
説明
lengthプロパティ
文字列の長さの取得
charAt(index)
指定したインデックスの文字を取得
indexOf(value)
指定した文字列が表示されるインデックスの場所を取得します.-1が見つかりません.
substring(start,end)
指定したインデックス範囲に基づいて文字列を切り取ります(ヘッダと末尾は含まれません)
split(value)
指定したルールに従って文字列を切断し、配列を返します.
replace(old,new)
古い文字列を新しい文字列で置換
五RegExp
構築方法
説明
RegExp(ルール)
指定したルールに基づいてオブジェクトを作成
let reg=/^ルール$/
ちょくせつわりあて
メンバーメソッド
説明
test(一致する文字列)
指定したルールに基づいて文字列が一致しているかどうかを検証します.
ルール＃ルール＃
式＃シキ＃
説明
[a]
aしかない
[abc]
abcのいずれかしかありません
[1]
1しかない
[123]
123のいずれかしかありません
[a-z]
aからzのいずれかであってもよい
[A-Z]
AからZのいずれかであってもよい
[0-9]
0～9のいずれか
{5}
5回しか現れません
{4,6}
4～6回しか現れません
六Array
メンバーメソッド
説明
push(要素)
配列の末尾に要素を追加
pop()
配列の末尾の要素を削除
shift()
配列の一番前の要素を削除
义齿
配列に所定の値が含まれているかどうかを判断する
reverse()
配列内の要素を反転
sort()
配列要素のソート
七セット
JavaScriptのsetセットは、要素が一意で、アクセス順序が一致しています.
構築方法
説明
Set()
Setコレクションオブジェクトの作成
メンバーメソッド
説明
add(要素)
コレクションに要素を追加
Sizeプロパティ
コレクション長の取得
keys()
反復オブジェクトの取得
delete
指定した要素を削除
八Map
JavaScriptの中のMapの集合、keyは唯一で、アクセスの順序は一致します
構築方法
説明
Map()
Mapコレクションオブジェクトの作成
メンバーメソッド
説明
set(key,value)
コレクションに要素を追加
Sizeプロパティ
コレクション長の取得
get(key)
keyによるvalueの取得
entries()
反復オブジェクトdelete(key)を取得keyに基づいてキー値ペアを削除
delete(key)
キーに基づいてキー値ペアを削除
九JSON
JSON常用方法
メンバーメソッド
説明
stringify(オブジェクト)
指定したオブジェクトをjson形式文字列に変換
parse(文字列)
指定したjsonフォーマット文字列をオブジェクトに解析
10ケースフォームの提出
JavaScript BOM
BOM紹介
ウィンドウオブジェクト
タイマ
二Locationアドレスバーオブジェクト
3つのケースの動的広告
JavaScriptパッケージ
思想を封じ込める.
ケース
my.js
JavaScriptオブジェクト向け
クラスの定義と使用
:
class {
//
constructor(){
;
}
( ){
;
return ;
}
}
let = new ( );
. ();
単純なケース
<script>
// Person
class Person{
//
constructor(name,age){
this.name = name;
this.age = age;
}
//show
show(){
document.write(this.name + "," + this.age + "
");
}
//eat
eat(){
document.write(" ...");
}
}
// Person
let p = new Person(" ",23);
p.show();
p.eat();
</script>
クラスの定義と使用
:
let = {
: ,
: ,
...
:function( ) {
;
return ;
}
}
.
. ();
たとえば
<script>
// person
let person = {
name : " ",
age : 23,
hobby : [" "," "],
eat : function() {
document.write(" ...");
}
};
// person
document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "
");
person.eat();
</script>
三継承
： ，
：extends
：Object
たとえば
<script>
// Person
class Person{
//
constructor(name,age){
this.name = name;
this.age = age;
}
//eat
eat(){
document.write(" ...");
}
}
// Worker Person
class Worker extends Person{
constructor(name,age,salary){
super(name,age);
this.salary = salary;
}
show(){
document.write(this.name + "," + this.age + "," + this.salary + "
");
}
}
// Worker
let w = new Worker(" ",23,10000);
w.show();
w.eat();
</script>
JavaScript組み込みオブジェクト
1 Number
メソッド名
説明
parseFloat()
入力した文字列の浮動小数点数を浮動小数点数に変換
parseInt()
入力された文字列の整数を整数に変換
<script>
//1. parseFloat()
document.write(Number.parseFloat("3.15ba45")+"
")
// 3.15
//2. parseInt()
document.write(Number.parseInt("20.5a2b3c4")+"
")
// , , 20
script>
二Math
メソッド名
説明
ceil(x)
上向きに整える
floor(x)
下向きに整列
round(x)
最も近い整数に四捨五入する
random()
乱数は、0.0～1.0の範囲を返します(ヘッダと末尾は含まれません).
pow(x,y)
べき乗演算xのy次方
<script>
//1. ceil(x)
document.write(Math.ceil(4.4) + "
"); // 5
//2. floor(x)
document.write(Math.floor(4.4) + "
"); // 4
//3. round(x)
document.write(Math.round(4.1) + "
"); // 4
document.write(Math.round(4.6) + "
"); // 5
//4. random() , 0.0-1.0 ( )
document.write(Math.random() + "
"); //
//5. pow(x,y) x y
document.write(Math.pow(2,3) + "
"); // 8
script>
三Date
構築方法
説明
Date()
現在の時間に基づいてオブジェクトを作成
Date(value)
指定したミリ秒値に基づいてオブジェクトを作成
Date(year,month,[day,hours,minutes,seconds,milliseconds])
指定したフィールドに基づいてオブジェクトを作成します(月は0~11)
メンバーメソッド
メンバーメソッド
説明
getFullYear()
年の取得
getMonth()
月の取得
getDate()
取得日数
getHours()
取得時間
getMinutes()
取得分
getSeconds()
取得秒数
getTime()
1970年1月1日現在のミリ秒数を返します.
toLocaleString()
ローカル日付フォーマットを返す文字列
<script>
//
//1. Date()
let d1 = new Date();
document.write(d1 + "
");
//2. Date(value)
let d2 = new Date(10000);
document.write(d2 + "
");
//3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) ( 0~11)
let d3 = new Date(2222,2,2,20,20,20);
document.write(d3 + "
");
//
//1. getFullYear()
document.write(d3.getFullYear() + "
");//2222
//2. getMonth()
document.write(d3.getMonth() + "
");//2
//3. getDate()
document.write(d3.getDate() + "
");//2
//4. getHours()
document.write(d3.getHours()+"
");//20
//5. getMinutes()
document.write(d3.getMinutes()+"
");//20
//6. getSeconds()
document.write(d3.getSeconds()+"
");//20
//7. toLocaleString()
document.write(d3.toLocaleString());//2222/3/2 8:20:20
</script>
四String
構築方法
説明
String(value)
指定した文字列に基づいてオブジェクトを作成
let s=「文字列」
ちょくせつわりあて
メンバーメソッド
メンバーメソッド
説明
lengthプロパティ
文字列の長さの取得
charAt(index)
指定したインデックスの文字を取得
indexOf(value)
指定した文字列が表示されるインデックスの場所を取得します.-1が見つかりません.
substring(start,end)
指定したインデックス範囲に基づいて文字列を切り取ります(ヘッダと末尾は含まれません)
split(value)
指定したルールに従って文字列を切断し、配列を返します.
replace(old,new)
古い文字列を新しい文字列で置換
<script>
//1.
let s1 = new String("hello");
document.write(s1 + "
");
//2.
let s2 = "hello";
document.write(s2 + "
");
//
//1. length
document.write(s2.length + "
");
//
//1. charAt(index)
document.write(s2.charAt(1) + "
");
//
for (let i = 0; i <s1.length; i++) {
document.write(s1.charAt(i) + "
");
}
//2. indexOf(value)
document.write(s2.indexOf("l") + "
");
//3. substring(start,end) ( )
document.write(s2.substring(2,4) + "
");
//4. split(value) ，
let s3 = " ,23, ";
let arr = s3.split(",");
for(let i = 0; i < arr.length; i++) {
document.write(arr[i] + "
");
}
//5. replace(old,new)
let s4 = " ？ 。 。";
let s5 = s4.replace(" ","***");
document.write(s5 + "
");
//
let s6 = s4.replace(s4,"*****");
document.write(s6+"
");
</script>
五RegExp
構築方法
説明
RegExp(ルール)
指定したルールに基づいてオブジェクトを作成
let reg=/^ルール$/
ちょくせつわりあて
メンバーメソッド
説明
test(一致する文字列)
指定したルールに基づいて文字列が一致しているかどうかを検証します.
ルール＃ルール＃
式＃シキ＃
説明
[a]
aしかない
[abc]
abcのいずれかしかありません
[1]
1しかない
[123]
123のいずれかしかありません
[a-z]
aからzのいずれかであってもよい
[A-Z]
AからZのいずれかであってもよい
[0-9]
0～9のいずれか
{5}
5回しか現れません
{4,6}
4～6回しか現れません
[a-z]
[abc] abc
[0-9]
[a-zA-Z0-9]
[^a-z]
[\d] [0-9]
[\w] [a-zA-Z_0-9] 、 、
[\D] [^0-9]
[\W] [^a-zA-Z0-9_]
. ， . \.
X* X [0-9]*
X? X [0-9]?
X+ X [0-9]+
X{m} X m
X{m, } X m
X{m, n} X m , n
(X)+ () X ；() + ，
^X ^
X$ $
<script>
//1.
// ： 1， 358， 。 11
let reg1 = /^[1][358][0-9]{9}$/;
document.write(reg1.test("18688888888") + "
");
//2.
// ： 、 、 。 4~16
let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
document.write(reg2.test("zhang_san123"));
</script>
六Array
メンバーメソッド
説明
push(要素)
配列の末尾に要素を追加
pop()
配列の末尾の要素を削除
shift()
配列の一番前の要素を削除
义齿
配列に所定の値が含まれているかどうかを判断する
reverse()
配列内の要素を反転
sort()
配列要素のソート
<script>
let arr = [1,2,3,4,5];
//1. push( )
arr.push(6);
document.write(arr + "
");
//2. pop()
arr.pop();
document.write(arr + "
");
//3. shift()
arr.shift();
document.write(arr + "
");
//4. includes( )
document.write(arr.includes(2) + "
");
//5. reverse()
arr.reverse();
document.write(arr + "
");
//6. sort()
arr.sort();
document.write(arr + "
");
</script>
七セット
JavaScriptのsetセットは、要素が一意で、アクセス順序が一致しています.
構築方法
説明
Set()
Setコレクションオブジェクトの作成
メンバーメソッド
説明
add(要素)
コレクションに要素を追加
Sizeプロパティ
コレクション長の取得
keys()
反復オブジェクトの取得
delete
指定した要素を削除
<script>
// Set()
let s = new Set();
// add( )
s.add("a");
s.add("b");
s.add("c");
s.add("c");
// size
document.write(s.size + "
"); // 3
// keys()
let st = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st.next().value + "
");
}
// delete( )
document.write(s.delete("c") + "
");
let st2 = s.keys();
for(let i = 0; i < s.size; i++){
document.write(st2.next().value + "
");
}
</script>
八Map
JavaScriptの中のMapの集合、keyは唯一で、アクセスの順序は一致します
構築方法
説明
Map()
Mapコレクションオブジェクトの作成
メンバーメソッド
説明
set(key,value)
コレクションに要素を追加
Sizeプロパティ
コレクション長の取得
get(key)
keyによるvalueの取得
entries()
反復オブジェクトdelete(key)を取得keyに基づいてキー値ペアを削除
delete(key)
キーに基づいてキー値ペアを削除
<script>
// Map() Map
let map = new Map();
// set(key,value)
map.set(" ",23);
map.set(" ",24);
map.set(" ",25);
// size
document.write(map.size + "
");
// get(key) key value
document.write(map.get(" ") + "
");
// entries()
let et = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et.next().value + "
");
}
// delete(key) key
document.write(map.delete(" ") + "
");
let et2 = map.entries();
for(let i = 0; i < map.size; i++){
document.write(et2.next().value + "
");
}
</script>
九JSON
json
JSON(JavaScript Object Notation)：
ECMAScript ， 。
JSON 。 ， ，
...
json
function
Json | js | java map | java
1.json ,kv
{
"name":" ",
"age":18,
"hobby":["sing","dance"]
}
2.js
{
id: 22,
account: "123456",
run:function() {
console.log("run")
}
}
3.java hashmap, key - value
{
"key": "value"
}
4.java
class {
String name = "zhangsan";
Integer age = 18;
}
JSON常用方法
メンバーメソッド
説明
stringify(オブジェクト)
指定したオブジェクトをjson形式文字列に変換
parse(文字列)
指定したjsonフォーマット文字列をオブジェクトに解析
<script>
//
let weather = {
city : " ",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
//1. JSON
let str = JSON.stringify(weather);
document.write(str + "
");
//2. JSON JS
let weather2 = JSON.parse(str);
document.write(" ：" + weather2.city + "
");
document.write(" ：" + weather2.date + "
");
document.write(" ：" + weather2.wendu + "
");
document.write(" ：" + weather2.shidu + "
");
</script>
10ケースフォームの提出
<div class="login-form-wrap">
<h1> </h1>
<form class="login-form" action="#" id="regist" method="get" autocomplete="off">
<label>
<input type="text" id="username" name="username" placeholder="Username..." value="">
</label>
<label>
<input type="password" id="password" name="password" placeholder="Password..." value="">
</label>
<input type="submit" value=" ">
</form>
</div>
<script>
//1. (true 、false )
document.getElementById("regist").onsubmit = function() {
//2.
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
//3. 4~16
let reg1 = /^[a-zA-Z]{4,16}$/;
if(!reg1.test(username)) {
alert(" ， 4 16 ！");
return false;
}
//4. 6
let reg2 = /^[\d]{6}$/;
if(!reg2.test(password)) {
alert(" ， 6 ！");
return false;
}
//5. ，
return true;
}
</script>
JavaScript BOM
BOM紹介
BOM(Browser Object Model)： 。
，
Navigator
History
Window
Location
Screen
ウィンドウオブジェクト
タイマ
setTimeout( ， )： 。
clearTimeout( )：
setInterval( ， )：
clearInterval( )：
window.onload： 。
<script>
// 、
function fun(){
alert(" ！");
}
//
let d1 = setTimeout("fun()",3000);
//
clearTimeout(d1);
//
let d2 = setInterval("fun()",3000);
//
clearInterval(d2);
// onload
window.onload = function(){
let div = document.getElementById("div");
alert(div);
}
</script>
// script onload
二Locationアドレスバーオブジェクト
href
。 URL， URL
//
let url = location.href;
<body>
<p>
！<span id="time">5</span> ...
</p>
</body>
<script>
//1. 。 ，
let num = 5;
function showTime() {
num--;
if(num <= 0) {
//
location.href = "index.html";
}
let span = document.getElementById("time");
span.innerHTML = num;
}
//2. ， 1 showTime
setInterval("showTime()",1000);
</script>
3つのケースの動的広告
<script>
//1. ，3
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "block";
},3000);
//2. ， 3
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);
</script>
JavaScriptパッケージ
思想を封じ込める.
： ，
document.getElementById(id )： id
document.getElementsByName(name )： name
document.getElementsByTagName( )：
JavaScript ， 。
JQuery ， JavaScript ， ！
ケース
my.js
my.js ,
function getById(id){
return document.getElementById(id);
}
function getByName(name) {
return document.getElementsByName(name);
}
function getByTag(tag) {
return document.getElementsByTagName(tag);
}
function removeself(el){
let parent = el.parentElement;
parent.removeChild(el);
}
<body>
<div id="div1">div1</div>
<div name="div2">div2</div>
</body>
// my.js
<script src="my.js"></script>
<script>
//
let div1 = getById("div1");
alert(div1);
//
// let div1 = document.getElementById("div1");
// alert(div1);
// let divs = document.getElementsByName("div2");
// alert(divs.length);
//
let divs = getByName("div2")
alert(divs.length);
// let div2 = document.getElementsByTagName("div");
let div2 = getByTag("div");
alert(div2.length);
//
removeself(div1);
</script>