javascript基础
一。JavaScript使用场景
1.改变内容 getElementById() 是多个 JavaScript HTML 方法之一，使用该方法查找元素ID，并且可以使用( innerHTML)属性改变元素的内容
2.改变HTML属性 使用getElementById()的src属性改变src的值；
3.JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一种变种： document.getElementById(“demo”).style.fontSize= “25px”;
4.JavaScript 能够隐藏 HTML 元素 可以通过display样式显示或者隐藏HTML元素。
实例：
1 document.getElementById("demo").style.display="none"; 2 3 document.getElementById("demo").style.display="block";
二,JavaScript使用
<script>标签
在HTML，Javascript代码必须位于<script>标签内
旧的JavaScript例子也许会使用script 的 “type = “text/JavaScript”的属性
script代码可以放在HTML内的<body>或,.<head>部分中，或都有都可以。
JavaScript 函数和事件
JavaScript函数是一种代码块，可以在调用时被执行。
当发生事件时调用函数，比如当用户点击按钮时，点击按钮设置一个函数，这就是一个事件
javascript外部脚本
- 脚本可放置到外部文件中，类似于css，结尾以JS结尾。
- 如需使用外部脚本，请在<script>标签的src(SOURCE)属性中设置脚本的名称。
- 外部脚本不能包含<script>标签
外部脚本的优势
- 分离了HTML和代码
- 使HTML和Javascript更易于阅读和维护；
- 已缓冲的JavaSCript文件可以加速页面加载；
- *多个外部脚本文件，需要使用多个script标签；
- 可以通过完整的URL或相对于当前网页的路径引用外部脚本
Javascript输出
- JavaScript不提供任何内建的打印或显示函数
JavaScript显示方案
- 使用
window.alert()写入警告框 - 使用
document.write()写入HTML输出 - 使用
innerHTML写入HTML元素 - 使用
console.log()写入浏览器控制台
一：使用window.alert()
通过此方法可以跳出警示框显示数据。
<!DOCTYPE html>
<html>
<body>
<h1>第一行</h1>
<p>我的第一个段落</p>
<script>
window.alert(7 + 8)；
</script>
</body>
</html>
二：使用document.write()写入HTML输出
出与测试目的，使用document.write()比较方便，可以直接在代码出与文档的位置显示write的输出
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
演示效果
三.使用InerHTML写入元素
给元素的值赋值，可以更改元素的值，
如需访问html元素，JavaScript可使用
document.getElementById(id)的方法。
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
四：使用console.log()方法显示数据
通过调出浏览器控制台，可以看到在log方法显示的数据。
实例：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript语法
- JavaScript语句是由
值，运算符，表达式，关键字，注释组成 - 语句是按照编写的顺序一一执行的。
- 分号分隔每条语句；
- 有分号可以一行写多条语句。
- 不带分号也可以按行执行，但是不规范，不易读
- 如果语句太长，建议在某个运算符的地方进行折行
- 对大小写敏感
- Javascript使用Unicode字符集
常见关键字
| 关键词 | 描述 |
|---|---|
| break | 终止 switch 或循环。 |
| continue | 跳出循环并在顶端开始。 |
| debugger | 停止执行 JavaScript，并调用调试函数（如果可用）。 |
| do … while | 执行语句块，并在条件为真时重复代码块。 |
| for | 标记需被执行的语句块，只要条件为真。 |
| function | 声明函数。 |
| if … else | 标记需被执行的语句块，根据某个条件。 |
| return | 退出函数。 |
| switch | 标记需被执行的语句块，根据不同的情况。 |
| try … catch | 对语句块实现错误处理。 |
| var | 声明变量。 |
JavaScript注释
- //或者/与/添加注释
变量
- var关键字来声明变量
- 变量不需要赋值类型，解析器自己判断
- 变量未被赋值的值为
undefined - 重复声明变量值不会丢失
例如
var carName = "porsche"; var carName;
对比俩种赋值语句
var x = "8" + 3 + 5;结果：835
var x = 3 + 5 + "8";结果：88
作用域
-
分三种：全局作用域，函数作用域，块作用域。
-
全局作用域在函数外声明的变量
-
函数作用域在函数内声明的变量
-
块作用域在块内{}声明且使用关键字let。
实例
var x = 10;
// 此处 x 为 10
{
let x = 6;
// 此处 x 为 6
}
// 此处 x 为 10
let
对比let和var声明全局变量的不同
1.通过var 声明的变量是window对象可以引用，全局作用域就是window对象
var carName = "porsche";
// 此处的代码可使用 window.carName
let carName = "porsche";
// 此处的代码不可使用 window.carName
2.在循环中使用的变量使用let不能对循环外声明的变量重新赋值和声明，相当于俩个变量
举例:
let i = 7;
for (let i = 0; i < 10; i++) {
// 一些语句
}
// 此处 i 为 7
/*var的作用域*/
var i = 7;
for (var i = 0; i < 10; i++) {
// 一些语句
}
// 此处，i 为 10
3.通过var声明的变量会提升到顶端，在声明变量之前可以使用；通过let定义只有在定义它之后可以使用(升到顶端就是在碰到未定义的变量，解析器会先查找所有的定义)
举例：
//let
i = 7;
let i;//failed
l=8;
var l;
const
解释：const 作用域类似于let,但是const定义的变量必须在定义时初始化且值不可更改，但如果变量是一个复合对象的话，对象的属性值可以修改。
- 在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：
- 在另外的作用域或块中重新声明 const 是允许的：
- 如果我们将一个原始值赋给常量，我们就不能改变原始值：
- 您可以更改常量对象的属性：
实例：
// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性：
car.color = "White";
// 您可以添加属性：
car.owner = "Bill";
car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
//您可以更改常量数组的元素：
// 您可以创建常量数组：
const cars = ["Audi", "BMW", "porsche"];
// 您可以更改元素：
cars[0] = "Honda";
// 您可以添加元素：
cars.push("Volvo");
运算符
1.JavaScript 算数运算符
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| – | 减法 |
| * | 乘法 |
| ** | 取幂运算符 |
| / | 除法 |
| % | 取模（余数） |
| ++ | 递加 |
| — | 递减 |
2.JavaScript 赋值运算符
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x = y | x = y |
| += | 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 |
3.JavaScript 字符串运算符
- 运算符也可用于对字符串进行相加（concatenate，级联）。
+= 赋值运算符也可用于相加（级联）字符串：
对一个数字和一个字符串相加将返回一个字符串；
实例
txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;
4.JavaScript 比较运算符
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| != | 不相等 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ? | 三元运算符 |
5.JavaScript 逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| ! | 逻辑非 |
6.Java类型运算符
- typeof :返回变量的类型；
- instanceof:返回true,如果对象是对象类型的实例。
7.JavaScript位运算符
| 运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
|---|---|---|---|---|---|
| & | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| 或 | 5 | 1 | 0101 | ||
| ~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
| ^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
| << | 零填充左位移 | 5 << 1 | 0101 << 1 | 1010 | 10 |
| >> | 有符号右位移 | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
| >>> | 零填充右位移 | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
数据类型
- JavaScript拥有动态类型，相同变量可以用作不同类型。
var x; //现在x 是一个未被定义（undefined）的变量
var x = 7; //现在 x 是一个数值
var x = "FIRE" //现在X是字符串值
var x = true; //现在是布尔型
var cars = ["Porsche" , "Volvo" , "BMW"]; //现在是数组，数组引用从0开始
- 字符串被引号包围，可以使用单引或者双引号
JavaScript对象
1.JavaScript对象用花括号书写，对象属性是name:value对，用逗号分隔。
var person = {firstName:"FIre" , lastname:"Jack" ,age:27 , eyecolor ：“block”};
typeof运算符
确定变量的类型:
实例:
typeof "Bill Gates" // 返回 "string"
typeof 3.14 // 返回 "number"
-
数组和对象返回”object”
-
在 JavaScript 中，没有值的变量，其值是 undefined。typeof 也返回 undefined。
-
null 的数据类型是对象,通过设置值为 null 清空对象.
-
typeof function myFunc(){} // 返回 "function"
JavaScript函数语法
- JavaScript函数通过
function关键字定义，其后是函数名和括号(参数1，参数2，….); - {}内是要执行的代码
函数调用
- 当事件发生时(用户点击按钮)
- 当JavaScript代码调用时
- 自动的(自动调)
函数返回
当JavaScript到达return语句，函数停止并返回值
toCelsius引用的是函数对象，而toCelsius()引用的是函数结果。
对象
- 值以名称:值对的方式来书写（名称和值由冒号分隔）。JavaScript 对象是被命名值的容器。
- 对象也可以有__方法__
- 方法以函数定义被存储在属性中
实例:
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
-
在方法中可以使用当前对象的属性，通过__this__关键字。
-
访问对象属性是以俩种方法
objectName.propertyNameobjectName["propertyName"]
-
访问对象方法:需要加();
-
可以使用关键字 __”new”__来声明变量，该变量会被创建为对象。
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
// 请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
事件
当 HTML 页面有交互的一些事情
举例：HTML页面完成加载，输入字段被修改，按钮被点击。
＊ __通过JavaScript代码__，HTML允许您向HTML元素添加事件处理程序
<element event = '一些 JavaScript'>
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>
常见的HTML事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
字符串
(变量名）.length 可以返回字符串的长度。
-
特殊字符使用转移字符____进行转移。
-
字符串中换行，可以通过一个反斜杠。
-
字符串可以是对象。使用new String(“（常量）”);
关于字符串的内置方法
-
indexOf(字符串，开始位置)返回字符串中指定文本首次出现的索引。
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China"); -
lastIndexOf(字符串，结束位置)方法返回指定文本在字符串中最后一次出现的索引。
-
search(字符串)：search() 方法搜索特定值的字符串，并返回匹配的位置
- search可以设置更强大的搜索值（正则表达式）
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p id="demo"></p>
<p id ="demo1"></p>
<script>
var x = 'Bills Gates'; // 用引号包围的字符串
var lx = x.length;
var inx = x.lastIndexOf('s',9);
var shx = x.search('Gate');
document.getElementById("demo").innerHTML = lx;
document.getElementById("demo1").innerHTML = shx;
</script>
</body>
</html>
-
slice(start,end)
slice()提取字符串的某个部分并在新字符串中返回被提取的部分,若参数是负数，则从结尾开始计数。若省略第二个参数，则该方法将裁剪字符串的剩余部分。
-
substring(start, end);
类似于slice(),但是不接受负的索引。 -
substr(start,length);
第二个参数规定被提取部分的长度。
第二个参数可以省略。 -
replace(被替换的值，新值)
replace() 方法不会改变调用它的字符串
返回新字符串
默认对大小写敏感。默认只替换首个匹配
通过正则表达式可以修改默认值
//使用i让大小写不敏感
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
//使用`g`标志替换所有匹配
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
-
concat()连接俩个或多个字符串，代替加运算符，等效。
-
trim()方法删除字符串俩端的空白符；
-
charAt(位置)方法返回字符串中指定下标的字符串。
str.charAt(0); // 返回 H -
charCodeAt()方法返回字符串中指定索引的字符unicide编码。
str.charCodeAt(0); // 返回 72 -
字符串属性访问[]:类似于数组，但是不可修改字符串。
-
split(分隔符)将字符串转换为数组：
txt.split(","); // 用逗号分隔 -
match()方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为Array对象返回。
let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g) // 返回数组 [ain,ain,ain] -
如果字符串中包含指定值，includes（字符串）返回true;
语法:string.includes(searchvalue, start) -
endsWith()、startsWith()如果字符串以指定值开头，或结尾，方法返回true；
语法:string.startsWith(searchvalue, start)
string.endsWith(searchvalue, length)
字符串模板
同义词
- Template Literals
- Template Strings
- String Templates
- Back-Tics 语法
模板字面量定义:在字面量中添加变量和表达式
语法：模板字面量使用反引号(“)而不是引号(“”)来定义字符串()
${...}
注意：`模板字面量允许多行字符串;
let text = `He's often called "Johnny"`;
//多行字符串
let text =
`The quick
brown fox
jumps over
the lazy dog`;
//字符串插值
let firstName = "Bill";
let lastName = "gates";
let text = `Welcome ${firstName}, ${lastName}!`;
//表达式替换
let price = 10;
let VAT = 0.25;
let toal = `Total: ${(price * (1 + VAT)).toFixed(2)}`
HTML模板
- 在javaSCript中给html增加变量，并输出且按标签显示。
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
变量类型
数值
- 所有的数值变量都是以双精度浮点数来存储的，64位存储数值。
- 数值和非数值型用“+”号，输出非数值型。
- NaN是Javascript的保留值，指示不是数值型，使用isNaN()来判断返回值是不是数值性。
Infinity在计算数时超过最大范围范围的值，是数值型。- JavaScript会把前缀为
0x的数值解释为十六进制，有些JavaScript版本会把前导零解释为八进制， toString()方法把数输出为十六进制、八进制、二进制。- 数值类型也可以使用new创建对象。
数值参考代码
//十六进制赋值
var x = 0xFF;
//toString()输出一个数不同进制的表示。
document.write(x.toString(2) );//11111111
document.write("<br/>");
document.write(typeof(x.toString(2)))//string
Number方法和属性
- toString()以字符串返回数值。
- toFixed() 返回字符串值，包含了指定位数小数的数字。
x.toFixed(2); // 返回 9.66 - toPrecision()返回指定长度的数字。
- valueOf()以数值返回数值。
- 变量转换数值
| 方法 | 描述 |
|---|---|
| Number() | 返回数字，由其参数转换而来。 |
| parseFloat() | 解析其参数并返回浮点数。 |
| parseInt() | 解析其参数并返回整数。 |
数组
- 数组是一个对象类型
- 其他的类似于其他的语言
- 使用下标修改数组的值，如果超出目前的下标就新增。
- 你可以在数组中存放对象，保存函数
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars; - 添加最高索引可以在数组创建未定义的“洞”；