JavaScript
1、JavaScript的简介
（1）什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端。
* 基于对象：
** java是面向对象，使用对象需要创建
** js里面提供好了一些对象，直接使用
* 事件驱动：每次滑动鼠标，变换一张图片
* 客户端：指的是浏览器
（2）JavaScript的特点（三个）
第一个：交互性
第二个：安全性
** JavaScript不能访问本地硬盘里面的文件
第三个：跨平台性
** 在java里面跨平台，通过虚拟机实现的
** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript
（3）Java和JavaScript区别（雷锋和雷峰塔）
第一，java是sun公司，现在是oracle；JavaScript是网景公司
第二，java是面向对象的语言，javas是基于对象的语言
第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行
第四，JavaScript弱类型语言，java是强类型的语言
** 比如在java里面定义一个变量 int a = 10; int b = "10";不正确
** 在JavaScript里面定义变量都是使用一个关键字 var a = 10; var b = "10"; var c = true;
第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行
（4）JavaScript由三部分组成
第一部分：ECMAScript
** 又ECMA组织制定语句，语法
第二部分：BOM
** broswer object model：浏览器对象模型
第三部分：DOM
** document object model：文档对象模型
在 或者 的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 部分中，其他控件标签等放在标签下。或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
2、js和html的结合方式
* 有两种结合方式
第一种：使用html中的标签
** 代码
alert("aaa");
** js的注释有两种
//单行注释
/*
多行注释
*/
第二种：使用html的标签，引入外部的js文件
<script type="text/javascript" src="js文件的路径"></script>
* 使用第二种方式的时候有两点注意
注意一：不要在script标签里面写js代码了，不会执行
注意二：结束script标签是 </script>，不要在标签内结束
* 代码
<script type="text/javascript" src="1.js">
//不要在script标签里面写js代码了，不会执行
//alert("aaa");
</script>
JavaScript：直接写入 HTML 输出流
….
<p>//段落
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
//<strong>字体加粗
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
</p>
</body>
</html>
JavaScript：对事件的反应
eg1,
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
eg2,
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
我的 Web 页面
一个段落
尝试一下
JavaScript：改变 HTML 内容
我的第一段 JavaScript
JavaScript 能改变 HTML 元素的内容。
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
点击这里
JavaScript：改变 HTML 图像
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
JavaScript：改变 HTML 样式
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
JavaScript：验证输入
我的第一段 JavaScript
请输入数字。如果输入值不是数字，浏览器会弹出提示框。
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
点击这里
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。
window.alert(5 + 6);
使用 document.write() 方法将内容写到 HTML 文档中。
document.write(Date());
使用 innerHTML 写入到 HTML 元素。
document.getElementById("demo").innerHTML = "段落已修改。";
使用 console.log() 写入到浏览器的控制台。
a = 5;
b = 6;
c = a + b;
console.log(c);
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write(“你好 \世界!”);
JS中的let变量:
let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。
let声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。
function varTest() {
var x = 1;
if (true) {
var x = 2; // 同样的变量!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // 不同的变量
console.log(x); // 2
}
console.log(x); // 1
}
变量删除：
// num1为全局变量，num2为window的一个属性
var num1 = 1;
num2 = 2;
// delete num1; 无法删除
// delete num2; 删除
JavaScript 对象
var person={
firstname : “John”,
lastname : “Doe”,
id : 5566
};
对象属性有两种寻址方式：
实例
1，name=person.lastname;
2，name=person["lastname"];
对象定义
你可以使用字符来定义和创建 JavaScript 对象:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
对象方法
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
这条语句：
carname=”Volvo”;
将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
如果你的变量没有声明，它将自动成为全局变量：
myFunction();
document.getElementById("demo").innerHTML =
"我可以显示 " + carName;
function myFunction()
{
carName = "Volvo";
}
下面是一些常见的HTML事件的列表:
常用事件
onchange HTML 元素改变
onclick 用户点击 HTML 元素
//修改自身元素的内容 (使用 this.innerHTML):
现在的时间是?
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
特殊字符
var x = ‘It\’s alright’; //It’s alright
var y = “He is called \”Johnny\”“; //He is called “Johnny”
=== 为绝对相等，即数据类型与值都必须相等。
反斜杠是一个转义字符。
输出
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符
字符串方法
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值
For/In 循环
var person={fname:”John”,lname:”Doe”,age:25};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
//BillGates56
var size=[1,2,3,4,5,6,7] //申明一个数组
//for循环
for(var i=0; i<size.length; i++){
document.write(size[i] + " ");//数组元素
}
//1 2 3 4 5 6 7
For/of 循环
循环一个数组(Array):
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
我们可以使用const来替代let，这样它就变成了在循环里的不可修改的静态变量。
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
循环一个字符串：
let iterable = "boo";
for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
循环一个类型化的数组(TypedArray)：
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
循环一个Map:
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
循环一个 Set:
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
循环一个 DOM collection
循环一个DOM collections，比如NodeList，之前我们讨论过如何循环一个NodeList，现在方便了，可以直接使用for-of循环：
// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");
for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
}
循环一个拥有enumerable属性的对象
for–of循环并不能直接使用在普通的对象上，但如果我们按对象所拥有的属性进行循环，可使用内置的Object.keys()方法：
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
循环一个生成器(generators)
function* fibonacci() { // a generator function
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
typeof 操作符
使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
var person = undefined;
typeof person // 返回 undefined
eg1
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
eg2
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}
JavaScript 类型转换
将数字转换为字符串
String(x)
x.toString()
将布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 “false”
String(true) // 返回 “true”
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 “false”
true.toString() // 返回 “true”
将日期转换为字符串
String(new Date())
将字符串转换为数字
Number(“3.14”) // 返回 3.14
Number(” “) // 返回 0
Number(“”) // 返回 0
Number(“99 88”) // 返回 NaN
将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
正则表达式
检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
var str = “Visit Runoob!”;
var n = str.search(/Runoob/i);
字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
var str = document.getElementById(“demo”).innerHTML;
var txt = str.replace(/microsoft/i,”Runoob”);
或
var txt = str.replace(“old”,”new”);
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
var patt = /e/;
patt.test(“The best things in life are free!”);
//true
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
var patt1=new RegExp(“e”);
document.write(patt1.exec(“The best things in life are free”));
//e
正则表达式表单验证实例：
/是否带有小数/
function isDecimal(strValue ) {
var objRegExp= /^\d+.\d+$/;
return objRegExp.test(strValue);
}
/校验是否中文名称组成 /
function ischina(str) {
var reg=/^[\u4E00-\u9FA5]{2,4}$/; /定义验证表达式/
return reg.test(str); /进行验证/
}
/校验是否全由8位数字组成 /
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; /定义验证表达式/
return reg.test(str); /进行验证/
}
/校验电话码格式 /
function isTelCode(str) {
var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return reg.test(str);
}
/校验邮件地址是否合法 /
function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
JavaScript 严格模式
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
