JavaScript_1的笔记
Javascript(重要)
Javascript 1.什么是JavaScript,有什么用？ JavaScript是运行在游览器上的脚本语言，简称JS。 JavaScript是网景公司（NetScape）的布兰登艾奇开发的，最初叫做LiveScript LivaScript的出现让游览器更加的生动，不再是单纯的静态页面了。页面更具有交互性 在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript 的名字修改为JavaScript. JavaScript这个名字虽然有"Java"但是和Java没有任何关系，只是语法上有点类似 他们运行的位置不同，Java运行在JVM当中，JavaScript运行在游览器 的内存当中 JavaCript程序不需要我们程序员动手编译，编写完源代码之后，游览器直接 打开解释执行 JavaCript的"目标程序"以普通文本形式保存，这种语言都叫做"脚本语言" Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言
<!--
javascript中的变量
怎么声明变量
var 变量名；
怎么给变量赋值？
变量名=值；
javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值
在JS当中，当一个变量没有手动赋值时，系统默认赋值undefined
undefined 在JS中是一个具体存在值
-->
<!--
局部变量和全局变量
全局变量：
在函数体之外声明的变量属于全局变量，全局变量的生命周期是
在游览器打开时声明，游览器关闭时销毁，尽量少用，因为全局变量会一直
在游览器的内存当中，耗费内存空间。能使用局部变量尽量使用局部变量
局部变量：
在函数体当中声明的变量，包括一个函数的形参都属于局部变量，
局部变量的声明周期：函数开始执行时局部变量的内存空间开辟，
函数执行结束之后，局部变量的内存空间释放，局部变量生命周期较短
当一个变量声明的时候没有使用var关键字，那么不管这个变量在哪里
声明都是全局变量
-->
函数初步
<!doctype html>
<html>
<head>
<title>JS函数初步</title>
</head>
<body>
<!--
JS中的变量是一种弱类型，那么函数应该怎么定义？
function 函数名（形式参数列表）{
函数体；
}
函数名=function(形式参数列表){
函数体；
}
-->
<script type="text/javascript">
function sum(a,b){
alert(a+b);
}
sum(10,20);
</script>
<input type="button" value ="按钮" onclick = "sum(20,40)"/>
</body>
</html>
JS中的数据类型
<!doctype html>
<html>
<head>
<title>JS中的数据类型</title>
</head>
<body>
<!--
1.虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以这里也需要学习一下JS包括哪些数据类型？
JS中数据类型有：原始类型，引用类型。
原始类型：Undefined,Number,String,Boolean,Null
引用类型：Object以及Object的子类
2.ES规范（ECMAScript规范），在ES6之后，又基于以上的6种类型之外添加了
一种新的类型
3.JS中有一个运算符叫做typeof，这个运算符可以在成语的运行阶段动态的获取
变量的数据类型。
typeof运算符的语法格式：
typerof 变量名
typeof运算符的运算结果是一下字符串之一：注意字符串都是全部小写
"undefined""number""string""boolean""object""function"
在JS中做比较全部用==
function sum(a,b){
if(typeof a =="number" && typeof b =="number"){
return a+b;
}
alert(a+","+b+"必须为数字")
}
-->
<!--
null NaN undefined这三个值有什么区别
在JS中有两个比较特殊的运算符
==（等同运算符，只判断值是否相等）
===（全等运算符：即判断值是否相等，又判断数据类型是否相等）
-->
<script type = "text/javascript">
</script>
</body>
</html>
JS中的数据类型
<!doctype html>
<html>
<head>
<title>JS中的数据类型</title>
</head>
<body>
<!--
JS中的事件：
1.Blur失去焦点
2.change下拉列表选中项改变，或文本框内容改变
3.click鼠标单击
4.dblclick鼠标双击
5.focus获得焦点
6.keydown键盘按下
7.keyup键盘弹起
8.load页面加载完毕
9.mousedown鼠标按下
10.mouseover鼠标经过
11.mousemove鼠标移动
12.mouseout鼠标离开
13.mouseup鼠标弹起
14.reset表单重置
15.select文本被选定
16.submit表单提交
-->
<!--
JS运算符之void
-->
<!--
控制语句
-->
<script type = "text/javascript">
window.onload = function(){
document getElementById("username").onkeydown = function(a){
if(a.keycode === 14){
slert("正在验证")
}
}
}
<a href ="javacript:void(0)" onclick="window.alert('test code')" ></a>
</script>
</body>
</html>
DOM编程-获取文本框的value
<!doctype html>
<html>
<head>
<title>DOM编程-获取文本框的value</title>
</head>
<body >
<!--
JavaScript包括三大块：
ECMAScript:JS的核心语法（ES规范/ECMA-262标准）
DOM:Document Object Model(文档对象模型：对网页当中的节点进行增删改的过程。)
HTML文档被当做一颗DOM树来对待。
var domObj = document.getElementById("id");
BOM:Browser Object Model(游览器对象模型)
关闭游览器窗口，打开一个新的游览器窗口，后退，前进，游览器地址栏上的地址
等，都是BOM编程
DOM和BOM的区别和联系？
BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的！
-->
<script type = "text/javascript">
window.onload = function(){
document.getElementById("bth").onclick = function(){
alert(document.getElementById("username").value)
}
}
window.onload = function(){
document.getElementById("pth").onclick = function(){
document.getElementById("username2").value=document.getElementById("username1").value
}
}
</script>
<input type ="text" id="username"/>
<input type = "button" value="获取文本框的" id="bth"/>
<hr>
<input type = "text" id = "username1"/>
<input type = "text" id = "username2"/>
<input type = "button" value="按钮" id="pth" />
</body>
</html>
DOM编程-innerHTML和innerText操作div和Span
<!doctype html>
<html>
<head>
<title>DOM编程-innerHTML和innerText操作div和Span</title>
<style type = "text/css">
</style>
</head>
<body >
<!--
innerText和innerHTML属性有什么区别？
相同点：都是设置元素内部的内容。
不同点：
innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
innerText,即使后面是一段HTML代码，也只是将其当做普通的字符串来看待
-->
<script type = "text/javascript">
window.onload = function(){
document.getElementById("bth").onclick = function(){
document.getElementById("div1").innerHTML = "zxdc";
//document.getElementById("div1").innerText = "zxdc"
}
}
</script>
<input type = "button" value="按钮" id="bth"/>
<div id="div1">
</div>
</script>
</body>
</html>
DOM编程-关于正则表达式
<!doctype html>
<html>
<head>
<title>DOM编程-关于正则表达式</title>
</style>
</head>
<body >
<script type = "text/javascript">
/*
1.什么是正则表达式，有什么用
正则表达式：Regular Expression
正则表达式主要用于字符串格式匹配方面
2.正则表达式实际上是一门独立的学科：在Java语言中支持，C语言中也支持，javascript中也支持。大部分编程语言都支持正则表达式。目前使用最多的是计算机编程领域，用作字符串格式匹配，包括搜索方面等。
3.正则表达式，对于我们javascript编程来说，掌握哪些内容
1.常见的正则表达式符号要认识。
2.简单的正则表达式要会写
3.他人编写的正则表达式要看懂
4.在javascript当中，怎么创建正则表达式对象
5.在javascript当中，正则表达式对象有哪些方法
6.要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性
4.常见的正则表达式符号？
. 匹配除换行符意外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
*重复零次或更多次
+重复一次或更多次
？重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m此
\W匹配任意不是字母，数字，下划线，汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置
[^x]匹配除了x以外的任意字符
[^aeiou]匹配出了aeiou这几个字母以外的任意字符
5.简单的正则表达式要会写
QQ号的正则表达式：^[1-9][0-9]{4,}$
7.怎么穿件正则表达式对象
第一种创建方式：
var reExp = /正则表达式/flags;
第二种创建方式：使用内置支持类RegExp
var regExp = new RegExp("正则表达式"，flags);
关于flags:
g:全局匹配
i：忽略大小写
m：多行搜索
正则表达式对象的test()方法？
true/false正则表达式对象.test(用户填写的字符串)；
true:字符串格式匹配失败；