PS：我用的最新版的WebStorm 。 var可以用const代替，但是很多之前写的代码都没改。 即：var==const

JavaScript的输出

innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

<!DOCTYPE html>
<html>
  <body>
    <p id="exa">zxf</p>
    <script>document.getElementById("exa").innerHTML=123;</script>
  </body>
</html>

显示结果：

JavaScript：学习笔记_javascript

document.write()

document.write()同所有HTML文档一起加载的时候，会紧接前面部分输出；在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

<!DOCTYPE html>
<html>
  <body>
    <p>123</p>
    <button onclick="document.write(5 + 6)">试一试</button>
  </body>
</html>

初始图：

JavaScript：学习笔记_html_02

点击后：

JavaScript：学习笔记_字符串_03

windows.alert()

弹出警示框来显示内容：

<!DOCTYPE html>
<html>
  <body>
    <p> 123</p>
    <script>window.alert(5 + 6);</script>
  </body>
</html>

显示结果：

JavaScript：学习笔记_字符串_04

console.log()

使用console.log()不会在前端显示数据，在Google浏览器中，打开文件，F12，点击Console即可查看输出结果。

<!DOCTYPE html>
<html>
  <body>
    <p>123</p>
    <script>console.log(5 + 6);</script>
  </body>
</html>

JavaScript：学习笔记_html_05

JavaScript代码块

<script>
  function myFunction() {
    document.getElementById("demo1").innerHTML = "123";
    document.getElementById("demo2").innerHTML = "456";
  }
</script>

一同执行的两句代码

变量

使用关键字var来声明变量,声明后，被声明的变量的值是undefined。

字符串变量之间可以用 ​+​ 连接

"a" + " " + "b"
var x = "8" + 3 + 5;

执行后x=835

var x = 3 + 5 + "8";

执行后x=88

JavaScript 算数运算符

运算符

描述

+

加

-

减

*

乘

**

幂

/

除

%

取余

++

递加

–

递减

JavaScript 赋值运算符

运算符

例子

含义

=

x = y

把y赋值给x

+=

x += y

x = x + y

-=

x -= y

x = x - y

*=

x *= y

x = x * y

/=

x /= y

x = x / y

%=

x %= y

x = x % y

JavaScript 比较运算符

运算符

含义

==

等于

===

等值类型（类型和值同事相等）

!=

不等于

!==

不等值或不等型

>

大于

<

小于

>=

大于或等于

<=

大雨或小于

?

三元运算符

JavaScript 逻辑运算符

运算符

描述

&&

逻辑与

||

逻辑或

！

逻辑非

JavaScript 类型运算符

运算符

描述

typeof

返回变量的类型

instanceof

如果对象是对象类型实例返回true

JavaScript 对象(类似于python中的字典、C语言中的哈希表)

编写格式：值按照名称 : 值对的形式编写（属性：值）。是命名值的合集。

方法是可以在对象上执行的动作。对象方法是包含函数定义的对象的​属性​。即方法是对象的属性之一。

比如：


定义一个name对象
name={firstName=“huan”,lastName=“kai”,age=22,fullName=function() {return this.firstName + " " + this.lastName;}}


即：在name对象中

属性

值

firstName

huan

lastName

kai

age

22

fullName

function() {return this.firstName + " " + this.lastName;}

定义对象的方法


  • 直接定义，使用对象字面量
    name={firstName="huan",lastName="kai",age=22,fullName=function() {return this.firstName + " " + this.lastName;}}
  • 使用JavaScript关键字new
    var name = new Object(); name.firstName : "huan"; name.lastName : "kai"; name.age : 22; name.fullName : function () { return this.firstName + "" + this.lastName; };

JavaScript中的for in循环

在JavaScript中，使用for…in语句遍历对象的属性。

语法：

for (variable in object) {
    要执行的代码
}

​注意：​ 要用()包住variable in object

JavaScript中的 Getter和Setter

const person = {
        firstName : "huan",
        lastName : "kai",
        language : "",
        get lang(lang){
            this.language = lang;
        },
    };
  // 使用 setter 来设置对象属性：
  person.lang = "en";
const person = {
        firstName : "huan",
        lastName : "kai",
        age : 18,
        get lang(){
            return this.age;
        },
    };
    // 使用 getter 来显示来自对象的数据：
    document.getElementById("demo").innerHTML = person.lang;

建立不同对象的不同写法

使用对象字面量 {} 代替 new Object()。

使用字符串字面量 “” 代替 new String()。

使用数值字面量代替 Number()。

使用布尔字面量代替 new Boolean()。

使用数组字面量 [] 代替 new Array()。

使用模式字面量代替 new RexExp()。

使用函数表达式 () {} 代替 new Function()。

const x1 = {};            // 新对象
const x2 = "";            // 新的原始字符串
const x3 = 0;             // 新的原始数值
const x4 = false;         // 新的原始逻辑值
const x5 = [];            // 新的数组对象
const x6 = /()/           // 新的正则表达式对象
const x7 = function(){};  // 新的函数对象

Undefined 与 Null 的区别

二者值相等，但类型不相同

typeof undefined // undefined

typeof null // object

null === undefined // false

null == undefined // true

在这里插入代码片

事件

button的onclick事件

<!DOCTYPE html>
<html>
  <body>
    <button onclick="document.getElementById('demo').innerHTML=Date()">现在的时间</button>
    <p id="demo"></p>
  </body>
</html>

初始状态为：

JavaScript：学习笔记_html_06

点击按钮后：

JavaScript：学习笔记_javascript_07

常见的HTML事件

事件

描述

onchange

HTML 元素已被改变

onclick

用户点击了 HTML 元素

onmouseover

用户把鼠标移动到 HTML 元素上

onmouseout

用户把鼠标移开 HTML 元素

onkeydown

用户按下键盘按键

onload

浏览器已经完成页面加载

.# 转义字符

代码

结果

\b

退格键

\f

换页

\n

换行

\r

回车

\t

水平制表符

\v

垂直制表符

字符串常用方法

方法

含义

使用

length（属性）

返回字符串的长度

txt.length

indexOf()

返回字符串中指定文本首次出现的索引（位置）

str.indexOf(“abc”)

lastIndexOf()

从指定位置开始向后进行检索（从尾到头）

str.lastIndexOf(“abc”, 50)

search()

搜索特定值的字符串，并返回匹配的位置

tr.search(“locate”)

slice()

提取字符串的某个部分并在新字符串中返回被提取的部分；如果某个参数为负，则从字符串的结尾开始计数；如果省略第二个参数，则该方法将裁剪字符串的剩余部分：

str.slice(7,13) str.slice(-13,-7) str.slice(7)

substring()

类似于slice()，但无法接受负数索引

str.substring(7,13)

substr()

截取指定长度字符串。第一个参数指定位置，第二个参数指定截取长度；如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分如果首个参数为负，则从字符串的结尾计算位置。

str.substr(7,6)

replace()

用另一个值替换在字符串中指定的值，返回一个新的字符串，不会更改原有字符串；只替换首个匹配；对大小写敏感，可增加正则表达式/i使之对大小写不敏感；如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

str.replace(“MSDN”, “CSDN”) str.replace(/MSDN/i, “CSDN”）str.replace(/MSDN/g, “CSDN”）

toUpperCase()

字符串转换为大写

text1.toUpperCase()

toLowerCase()

字符串转换为小写

text1.toLowerCase()

concat()

连接两个或多个字符串

text3 = text1.concat(" ",text2)

concat()

代替加运算符

“Hello” + " " + “World!” === “Hello”.concat(" ",“World!”)

trim()

删除字符串两端的空白符

str.trim()

charAt()

返回字符串中指定下标（位置）的字符串

str.charAt(0)

charCodeAt()

返回字符串中指定索引的字符 unicode 编码

str.charCodeAt(0)

split(“x”)

将字符串转换为数组

txt.split(",") // 用逗号分隔

NaN （Not a Number）- 非数值

NaN类型是number数

如果定义一个NaN型变量，对变量使用typeof，返回值为number。

可以用isNaN(sum)函数进行判断某个数是不是数值

例如：

<!DOCTYPE html>
<html>
  <body>
    <p id = "demo"></p>
    <script>
      document.getElementById("demo").innerHTML = isNaN(100 / "asd");
    </script>
  </body>
</html>

结果为：

JavaScript：学习笔记_javascript_08

JavaScript数字处理方法

toString(cardinal) 方法以字符串返回数值。

使用方法：NumberObject.toString(cardinal)

其中，参数cardinal用来选择数字的基数，即几进制。默认为10。可选范围为2~36。

例如：

<!DOCTYPE html>
<html>
  <body>
    <p id = "demo"></p>
    <script>
      document.getElementById("demo").innerHTML = (123).toString();
    </script>
  </body>
</html>

显示结果为：

JavaScript：学习笔记_字符串_09

toFixed() 方法返回字符串值，它包含了指定位数小数的数字。

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 9.656;
document.getElementById("demo").innerHTML =
  x.toFixed(0) + "<br>" +
  x.toFixed(2) + "<br>" +
  x.toFixed(4) + "<br>" +
  x.toFixed(6);
</script>
</body>
</html>

显示结果为：

JavaScript：学习笔记_字符串_10

toPrecision() 返回字符串值，它包含了指定长度的数字：

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 9.656;
document.getElementById("demo").innerHTML = 
  x.toPrecision() + "<br>" +
  x.toPrecision(2) + "<br>" +
  x.toPrecision(4) + "<br>" +
  x.toPrecision(6);  
</script>
</body>
</html>

显示结果为：

JavaScript：学习笔记_html_11

valueOf() 以数值返回数值

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML = 
  x.valueOf() + "<br>" +
  (123).valueOf() + "<br>" +
  (100 + 23).valueOf();
</script>
</body>
</html>

显示结果为：

JavaScript：学习笔记_javascript_12

全局方法

方法

描述

Number()

返回数字，由其参数转换而来

parseFloat()

解析其参数并返回浮点数

parseInt()

解析其参数并返回整数

数组

使用Array.foreach()函数遍历数组

使用Array.pufh(“arr”)向数组中添加新元素

表单

格式：

<form name="" action="" onsubmit="" method="">
姓名：<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>

required是当提交内容为空时，浏览器会执行表单验证，并提示需要输入。

可以使用以下属性对input进行约束：

属性

描述

disabled

规定input元素应该被禁用

max

规定input元素的最大值

min

规定input元素的最小值

pattern

规定input元素的值模式

required

规定输入字段需要某个元素

type

规定input元素的类型

验证约束的方法：

check

checkValidity()

如果inpue元素包含有效数据，返回true

setCustomValidity()

设置 input 元素的 validationMessage 属性。

customError

如果设置自定义的合法性消息，设置为 true

patternMismatch

如果元素值不匹配其 pattern 属性，设置为 true

rangeOverflow

如果元素值大约其 max 属性，设置为 true

rangeUnderflow

如果元素值小于其 min 属性，设置为 true

stepMismatch

当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，设置为 true

tooLong

如果元素值超过了其 maxLength 属性，设置为 true

typeMismatch

当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，设置为 true

valueMissing

如果元素（包含 required）没有值，设置为 true

valid

如果元素值是有效的，设置为 true

例如：

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p id="demo"></p>

<script>
 function myFunction() {
  var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "输入有效";
  } 
} 
</script>

validationMessage属性：假如min=100，如果输入小于100，message中会存储​错误信息​必须大于100。可以进行判断后输出。