part1 JavaScript简介

简介

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 控制了网页的行为

JS是脚本语言

1. 是一种轻量级的编程语言
2. 是可插入HTML页面的编程代码
3. 插入HTML页面后可由所有的现代浏览器执行

直接写入html输出流

只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

等同于html里的

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

对于事件的反应

<button type="button" onclick="alert('欢迎!')">点我!</button>

可点击，点击后弹出窗口

​ alter多用于测试代码

改变html内容

x=document.getElementById("demo");  //查找元素（按钮）
x.innerHTML="Hello JavaScript";    //改变内容（将原来的字改变）

document.getElementById(“some id”)。这个方法是 HTML DOM （文档对象模型）中定义的。

改变html图像

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="图1";
    }
    else
    {
        element.src="图2";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="图1" width="100" height="180">

改变html样式

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

验证输入

if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
    alert("不是数字");
}

用法

HTML 中的脚本必须位于 标签之间。

脚本可被放置在 HTML 页面的 和 部分中。

输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。（常用）
• 使用 innerHTML 写入到 HTML 元素。（document.getElementById(“demo”).innerHTML = “段落已修改。”;）
• 使用 console.log() 写入到浏览器的控制台。（需要调试网页控制台，在网页中查看）

语法

• 字面量

1. 数字
2. 字符串
3. 表达式字面量
4. 数组字面量
5. 对象字面量
6. 函数（Function）字面量

• 变量 用var定义

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述

语句

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

// 输出标题H1：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落P：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

变量

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

//创建了名为 carname 的变量，并向其赋值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

对象

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

对象键值对的写法类似于：

• PHP 中的关联数组
• Python 中的字典
• C 语言中的哈希表
• Java 中的哈希映射
• Ruby 和 Perl 中的哈希表

访问方法

person.lastName;
person["lastName"];

创建对象方法

methodName : function() {
    // 代码 
}

访问对象

objectName.methodName()

函数

function functionname()
{
    // 执行代码
}

可以有return 返回值

还可以带参函数（）内输入参

作用域、变量

全局、局部、和java差不多啦

事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
• 等等 …

可以使用多种方法来执行 JavaScript 事件代码：

• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。
• 等等 …

字符串

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

运算符（和c、java一样）

函数

1. if…else

2. switch

3. for循环

4. while循环

5. break、countinue

6. 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
   

7. null //返回object

8. undrfined //一个没有值得变量返回undefined

undefined 和 null 的区别

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

9. constructor属性

   "John".constructor                 // 返回函数 String()  { [native code] }
   (3.14).constructor                 // 返回函数 Number()  { [native code] }
   false.constructor                  // 返回函数 Boolean() { [native code] }
   [1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
   {name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
   new Date().constructor             // 返回函数 Date()    { [native code] }
   function () {}.constructor         // 返回函数 Function(){ [native code] }
   

   字符串转换

   方法	描述
   getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
   getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
   getFullYear()	从 Date 对象以四位数字返回年份。
   getHours()	返回 Date 对象的小时 (0 ~ 23)。
   getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
   getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
   getMonth()	从 Date 对象返回月份 (0 ~ 11)。
   getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
   getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

//用正则表达式搜索 "Runoob" 字符串，且不区分大小写
var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);

输出 6 起始位置

//用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

严格模式（use strict）

1. 不允许使用未声明的变量

2. 不允许删除变量或对象

3. 不允许删除函数

4. 不允许变量重名

5. 不允许使用8进制

6. 不允许使用转义字符

7. 不允许对只对书信赋值

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

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

10. 变量名不能使用ev、arguments字符

11. 不允许使用这种语句

    "use strict";
    with (Math){x = cos(2)}; // 报错
    

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

13. 禁止使用this关键字指向全局对象

表单

表单验证

判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

自动验证

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

this

JavaScript this 关键字 | 菜鸟教程 (runoob.com)

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

JSON

• JSON 英文全称 JavaScript Object Notation
• JSON 是一种轻量级的数据交换格式。
• JSON是独立的语言 *****
• JSON 易于理解。

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。

语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

1. “name”:“Runoob”

2. {“name”:“Runoob”, “url”:“www.baidu.com”}

3. "sites":[
       {"name":"Runoob", "url":"www.runoob.com"}, 
       {"name":"Google", "url":"www.google.com"},
       {"name":"Taobao", "url":"www.taobao.com"}
   ]
   

4. var text = '{ "sites" : [' +
   '{ "name":"Runoob" , "url":"www.runoob.com" },' +
   '{ "name":"Google" , "url":"www.google.com" },' +
   '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
   

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

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

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

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

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

js异步编程

JavaScript 异步编程 | 菜鸟教程 (runoob.com)