JavaScript(基础)

目录

浏览器如何执行JS

三种方式添加JavaScript

输入输出

变量

运算符

算术运算符

赋值运算符

逻辑运算符

比较运算符

数据类型

函数

对象

事件

条件、循环

正则表达式

语法、方法使用

正则表达式修饰符

正则表达式模式

---

 JavaScript是一种编程语言，它可以在网页上实现复杂的功能，交互等。是解释型语言，运行在客户端，面向对象的语言。

HTML 定义了网页的内容，CSS 描述了网页的布局，JavaScript 控制了网页的行为

浏览器如何执行JS

浏览器分成两部分：渲染引擎和JS引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit。

JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。(高级语言转换为二进制语言，通过JS引擎转换)

三种方式添加JavaScript

//内部的JavaScript
<script>
    your Javascript
</script>

//外部的JavaScript
<script src="script.js"></script>

//内联JavaScript (不推荐使用)
<button
onclick="creatParagraph()">
Click me
</button>

输入输出

JavaScript 没有任何打印或者输出的函数。

avaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

<script>
window.alert(5 + 6);
</script>
------------------------------------
<script>
document.write(Date());
</script>
--------------------------------------
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
--------------------------------------
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.write(Date());
}
</script>
----------------------------------------
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

变量

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

var carname="bkpp";

//在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
var carname;

作用域：

变量在函数内声明，变量为局部变量，具有局部作用域。

变量在函数外定义，即为全局变量。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

运算符

算术运算符

y=5

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
		x=y++	5	6
--	自减	x=--y	4	4
		x=y--	5	4

赋值运算符

x=10,y=5

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

逻辑运算符

 x=6,y=3

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x==5 || y==5) 为 false
!	not	!(x==y) 为 true

比较运算符

x=5

运算符	描述	比较	返回值
==	等于	x==8	false
		x==5	true
===	绝对等于（值和类型均相等）	x==="5"	false
		x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
		x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

数据类型

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

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

 变量的数据类型可以使用 typeof 操作符来查看:

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

声明变量类型：

//声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person= new Object;

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带。极大或极小的数字可以通过科学（指数）计数法来书写。

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

 数组

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

对象

//对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性//由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};

//上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

//空格和折行无关紧要。声明可横跨多行：
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

//对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];

Undefined 和 Null

//Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;

函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

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

//当声明函数时，把参数作为变量来声明：
function myFunction(var1,var2)
{
代码
}

myFunction(argument1,argument2)

//带有返回值的函数
function myFunction(a,b)
{
    return a*b;
}
 
document.getElementById("demo").innerHTML=myFunction(4,3); //12

对象

//创建对象方法：
methodName : function() {
    // 代码 
}

//使用以下语法访问对象方法：
objectName.methodName()
//不添加 (), 它会返回函数的定义：
objectName.methodName

在 JavaScript中，几乎所有的事物都是对象。JavaScript 对象是变量的容器。

对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

创建对象方法，并访问对象方法：

访问了 person 对象的 fullName() 方法:

name = person.fullName();

如果要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：

name = person.fullName;

事件

什么是JavaScript事件？

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

什么是HTML事件？

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

HTML事件实例：

HTML页面完成加载

HTML input 字段改变时

HTML 按钮被点击

通常，当事件发生时，可以做很多对应的操作。

在事件触发时JavaScript可以执行一些代码。

HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素。

 

 

<script>

//使用事件触发函数 onclick 事件
function test8_ 1(firstname,lastname){
alert（"这个人姓："＋firstname＋",名叫："＋1astname）;
}
 function test8_2(){
document.getElementById("demo").innerHTML ="鼠标不在此处"
}
function test8_3(){
document.getElementById("demo").innerHTML ="鼠标挪动到此处后显示的内容"
}
</script>

<p id ＝ "demo" onmousemove＝"test8＿3()" onmouseout="test8＿2()">鼠标不在此处</p>
<button onclick＝"test7＿4('张','三')">点击按钮</button>
<button onclick＝"test7＿4('李','四')”>点击按钮</button>

条件、循环

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

if (condition)
{
    当条件为 true 时执行的代码
}
----------------------------------------------
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}
-----------------------------------------------
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}
-------------------------------------------------
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行
----------------------------------------
var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}
-----------------------------------------
while (条件)
{
    需要执行的代码
}
-----------------------------------------
do
{
    需要执行的代码
}
while (条件);

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

正则表达式

语法、方法使用

//语法

/正则表达式主体/修饰符(可选)
 var patt = /runoob/i

/runoob/i  是一个正则表达式。

runoob  是一个正则表达式主体 (用于检索)。

i  是一个修饰符 (搜索不区分大小写)。

---

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。

//search() 方法使用正则表达式
var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);
------------------------------------------------------------
//search() 方法使用字符串
//search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
//检索字符串中 "Runoob" 的子串：
var str = "Visit Runoob!"; 
var n = str.search("Runoob");
-------------------------------------------------------------
//replace() 方法使用正则表达式
//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");
-------------------------------------------------------------
//replace() 方法使用字符串
//replace() 方法将接收字符串作为参数：
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

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

正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。