JavaScript基础总结

蛋酥小生

已于 2022-05-08 19:33:21 修改

阅读量753

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2021-12-03 23:15:35 首次发布

原文链接：https://www.runoob.com/js/js-tutorial.html

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一章基本

JavaScript的组成部分

来源于菜鸟教程

JavaScript是弱变量,可以都用用var来定义

改变HTML内容

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的------->参照上面

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

注意的是:x后面是点(.) 这里是属于属性的范围

在控制台打印日志

console.log("runoob-1")
console.log("runoob-2")

JavaScript显示数据

/*使用 window.alert() 弹出警告框。*/
<script>
window.alert(5 + 6);
</script>

//使用 document.write() 方法将内容写到 HTML 文档中。
<script>
document.write(Date());
</script>


//点击事件
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>


使用 console.log() 写入到浏览器的控制台。
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

JavaScript关键字

Java数据类型

声明变量类型

变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

值得注意的是: JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

好家伙都是var

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

数组

var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

大小写

JavaScript 对大小写是敏感的。

语句

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do … while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for … in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if … else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

注释

多行

/*这是
多行
注释*/

单行

//这是单行注释

访问对象方法

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function()   //==========>>这里是命名的fullName函数,写法是=>:    函数名  :  function(){}
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

带参数函数

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

变量的声明周期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。在函数内部声明的变量

全局变量会在页面关闭后被删除。在函数外部声明的变量

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var2 = 2; // 没有使用 var 声明，可配置全局属性
delete var2; 
console.log(delete var2); // true

JavaScript对象

JavaScript Array 对象

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

### JavaScript Boolean对象

JavaScript Date对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小于10的数字前加一个‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}
</script>
</head>
<body onload="startTime()">
    
<div id="txt"></div>
    
</body>
</html>

JavaScript Math 对象

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 E^x 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

JavaScript Number对象

虽然没有什么用,但是还是写贴上去了

JavaScript String对象

https://www.runoob.com/jsref/jsref-obj-string.html

属性的添加是用点( . )

String 对象方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

JavaScript RegExp对象

正则表达式对象

JavaScript全局属性/函数

JavaScript运算符

条件运算符

true 就前面值, false就后面值

<p>输入你的年龄并点击按钮:</p>
<input id="age" value="18" />
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var age,voteable;
    age = document.getElementById("age").value;
    voteable = (age < 18) ? "太年轻而不能":"年龄够";
    document.getElementById("demo").innerHTML = voteable + "投票";
}
</script>

JavaScript Error

字符串

转义

typeof操作符

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

严格模式的限制

不允许使用未声明的变量

不允许删除变量或对象

不允许删除函数

不允许变量重名

不允许使用八进制

不允许使用转义字符

不允许对只读属性赋值

不允许对一个使用getter方法读取的属性进行赋值

不允许删除一个不允许删除的属性

变量名不能使用 “eval” 字符串

变量名不能使用 “arguments” 字符串

不允许使用以下这种语句

由于一些安全原因，在作用域 eval() 创建的变量不能被调用

禁止this关键字指向全局对象

JavaScript的this使用场景

1、在对象方法中， this 指向调用它所在方法的对象。
2、单独使用 this，它指向全局(Global)对象。
3、函数使用中，this 指向函数的所属者。
4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

JavaScript let 和 const

let的使用场景

使用 var 关键字重新声明变量可能会带来问题。

在块中重新声明变量也会重新声明块外的变量：

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字就可以解决这个问题，因为它只在 let 命令所在的代码块 {} 内有效。

JavaScript JSON

{
    "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
    ]
}

两个重要的函数

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

第二章函数

箭头函数

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

它可以直接调用参数的信息,如果参数导入的是一个数组,则arguments直接表示那一个数组

JavaScript 内嵌函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>局部变量计数。</p>
<p id="demo">0</p>
<script>
document.getElementById("demo").innerHTML = add();
function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
</script>

</body>
</html>

HTML DOM

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>

```
 **onload   用户进入被触发** 
```
onunload 事件会在或离开页面时被触发
onchange 事件当你离开输入框后，函数将被触发
onmouseover 用户的鼠标移至 HTML 元素上方
onmouseout 移出元素时触发函数
当点击鼠标按钮时，会触发 onmousedown 事件，

当释放鼠标按钮时，会触发 onmouseup 事件，

最后，当完成鼠标点击时，会触发 onclick 事件。

第三章 JavaScript 浏览器BOM

浏览器对象模型（Browser Object Model (BOM)）

Window Location

window.location.assign(url) ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

实现向前、向后的功能

window.history.back() - 与在浏览器点击后退按钮相同
window.history.forward() - 与在浏览器中点击向前按钮相同

function a(){
    history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
}
function b(){
    history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
}

计时事件

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

var myVar=setInterval(function(){myTimer()},1000);


function myStopFunction(){
    clearInterval(myVar);
}

使用clearInterval (暂停的函数的返回值)

setTimeout() - 在指定的毫秒数后执行指定代码。

var myVar;
 
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);  //这里都是指的这个myVar
}
 
function myStopFunction()
{
    clearTimeout(myVar);
}

使用clearTimeout (需要停止函数的返回值)

弹窗

警告框 window.alert(“sometext”);

注意: 弹窗使用反斜杠 + “n”(\n) 来设置换行。

        alert("Hello\nHow are you?");

确认框 window.confirm(“sometext”);

JavaScript Cookie

document.cookie = cname + "=" + cvalue + "; " + expires;
设置了                cookie 名、 cookie 值、      cookie过期时间。
``````javascript
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');  //这里用来区别 别的变量
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

蛋酥小生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础总结

第一章基本JavaScript的组成部分JavaScript是弱变量,可以都用用var来定义改变HTML内容x=document.getElementById("demo"); //查找元素x.innerHTML="Hello JavaScript"; //改变内容document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的------->参照上面x=document.getElementById("demo") //找到元
复制链接

扫一扫