JavaScript的入门案例
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*javascript代码*/
//int a=10;
var a=10;
//int b=20;
var b=20;
//int temp=a+b;
var temp=a+b;
//System.out.println(temp);
alert(temp);
</script>
</head>可以看到JavaScript的语言特征和编程注意事项
特征：
1、JavaScript无需编译，直接被浏览器解释并执行
2、JavaScript无法单独运行，必须镶嵌在html代码中运行
3、JavaScript的执行过程是从上到下的
注意：
1、JavaScript没有访问系统文件的权限
2、由于JavaScript无需编译，是上到下执行的解释执行，所以在保证可读性的情况下，允许使用链式编程
3、JavaScript和java没有直接关系
JavaScript的组成
JavaScript是由三部分组成：ECMAScript、DOM、BOM
ECMAScript(核心)：规定了js的语法和基本对象
DOM 文档对象模型：处理网页内容的方法和接口
BOM 浏览器对象模型：与浏览器交互的方法和接口
JavaScript的引入方式
内部脚本
在html文本内部 script脚本语言可以放在head之中后者在html之后，一般建议在head之中
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*javascript代码*/
//int a=10;
var a=10;
//int b=20;
var b=20;
//int temp=a+b;
var temp=a+b;
//System.out.println(temp);
alert(temp);
</script>
</head>外部脚本
01demo02.html
<script type="text/javascript" src="01demo1.js">/*这部分代码不会被执行，因为会被引入的01demo01.js的代码覆盖*/</script></script>
/*src="01demo1.js"是写的是js的地址*/script标签放置位置
body的结束标签之前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>你好</h1>
<script>
alert("内部的hello")
</script>
</body>
</html>
优点：
保证html展示内容优先考虑。最后加载脚本，增强用户体验
JavaScript语法及规则
注释
单行注释是**//注释内容**
多行注释是**/注释内容/**
HBuilder多行注释快捷键 ctrl+shift+/
变量
变量的声明和赋值：
var 变量名;变量赋予默认值，默认值是undefined(未定义的)
var 变量名=值;
命名javascript严格区分大小写基本数据类型
<script>
var str1="nihao";
var str2="helo";
alert(typeof(str1))//string
var flag1=true;
var flag2=false;
alert(typeof(flag1))//boolean
var num1=1;
var num2=1.55;
var num3=-1;
alert(typeof(num1))//Number
var obj=null;
alert(typeof(obj))//object就这一个是比较特殊的
var a;
var b=undefined;
alert(typeof(b))//undefined
var a=100;
a=true;
alert(a)//会输出true，不会输出100;
alert(typeof(a))
</script>引用数据类型
var a=new String();
var a=new String;运算符
其他都是一样的
运算符 === 只有值和类型两个都相等才是相等的
== 仅比对值
var str1=10;
var str2="10";
str1==str2 true
str1===str2 false正则对象
创建方式
var reg=new RegExp("表达式")//(开发基本不用)
var reg=/^表达式$/ 只要有有一个字符不满足正则即为false,全部合格那就是true
/表达式/ 只要有成立的字符那就是true，q
var reg=/^\s*$/;//0-多个空格
var string=" ";
alert(reg.test(string))//truejs数组对象
js数组可以看作java中的arraylist集合
数组中每一个成员都没有限制，可以存放任意类型
数组成都可以自动修改
创建方式
1、var arr=[1,2,3,”a,true];//常用的js数组
2、var arr=new Array();//创建一个数组对象，数组默认长度为0
3、var arr=new Array(4);//数组长度是4，长度是动态可调的
4、var arr=new Array(1,2);//数组元素是1，2
常用方法
属性：length 数组中的元素数目
var arr=['hello','你好',1,2];
alert(arr.length)//4
arr[1]="nihao";
alert(arr.length)//4
arr[4]=123
alert(arr.length)//5
arr[10]=123
alert(arr.length)//11方法：join():将数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
pop():删除并返回最后一个元素
push():向数组末尾添加一个或者更多的元素，并返回新的长度
reverse():颠倒数组中元素的顺序
var arr=[123,456,789]
var str=arr.join("+")
alert(str)//123+456+789
alert(arr.length)//3
//reverse将数组进行物理反转
var arr2=arr.reverse()
alert(arr2)//789,456,123
//pop删除并返回最后一个元素
var arr=[123,456,789]
var po=arr.pop()
alert(po)
alert(arr.length)
//push向数组末尾添加一个或者更多的元素，并返回新的长度
var arr=['a','b','c','d']
var push=arr.push('e')
alert(push+"||"+arr+"||"+arr.length)
var push=arr.push('e','f','g')
alert(push+"||"+arr+"||"+arr.length)全局函数
执行
var x=10;
alert(x)
var y=10+20;
alert(y);
eval("var z=10")//eval可以把传入的字符串，作为JavaScipt代码执行
//可以扩展程序功能
//新只能去传递基本数据类型的字符串，而不能床底字符串对象
alert(z)编码和解码
encodeURI():把字符串编码为URI，将字符串中的中文进行编码
decodeURI():解码某个编码的URI，
var msg="https:www.baidu.com/index.html?username=张三&password=123";
alert(msg)
var temp=encodeURI(msg)
//https:www.baidu.com/index.html?username=%E5%BC%A0%E4%B8%89&password=123
alert(temp)
alert(decodeURI(temp))URI和URL的区别
URI:统一资源标识符，标识资源详细名称，必须包含资源名
URL:统一资源定位器，定义资源的网络位置，包含http://
简单来说就是网址的前面的主网址的就是url,后面的详细地址就是uri
字符串转数字
parseInt(string):解析一个字符串并返回一个整数
parseFloat(string):解析一个字符串并返回一个整数
var str="10.99"
alert(parseInt(str))//10
alert(parseFloat(str))//10.99自定义函数/自定义方法
函数格式
function 方法名(参数列表){
函数体
}
注意：
函数定义函数必须是小写的function
函数无需返回值类型，直接在function后面书写 方法名
参数列表中的参数值不用写var,直接写参数名就好
这个可以返回值，也可以不返回值，也可以返回空值三种 ： return 具体值；不写return；return；
函数的注意事项
不存在方法重载，只有方法覆盖，最后定义的函数覆盖之前的定义
function getSum(a,b){
return a+b
}
alert(getSum(10,20))
//针对于重名的函数，后定义的函数会覆盖掉前面定义的函数
//只能调用到最后定义的函数，即使形参不匹配也不影响使用
//对于那一些缺失的参数，会默认为undefined
function print(a,b){
alert(a+'-'+b)
}
function print(a,b,c){
alert(a+'-'+b+'-'+c)
}
print(1,2)
print(1,2,3)自定义对象
创建方式1–function构造函数
引用数据类型都是对象，而对象在JavaScript中可以用函数来表示
function 对象名(){
函数体
}
//方法1，无参构造
function Person(){//定义一个对象
this.name='小刘';//声明了一个name属性，this指代的就是当前的person对象
this.age=18;
}
var per=new Person()
alert(per.name+'||'+per.age)
//方法1、有参构造
function Person(n,a){//定义一个对象
this.name=n;//声明了一个name属性，this指代的就是当前的person对象
this.age=a;
}
var per=new Person('小张',18)
alert(per.name+'||'+per.age)
//方法2
function Person(n,a){//定义一个对象
this.name=n;//声明了一个name属性，this指代的就是当前的person对象
this.age=a;
}
var per=new Person('小张',18)
per.sex="男"
alert(per.name+'||'+per.age+'||'+per.sex)构造方式2–对象直接量
var 对象名={属性名1：”属性值1”，属性名2：”属性值2”，属性名3：”属性值3”}
该方式直接创建出来实例对象，无需构造函数，无需再new创建实例对象，直接使用即可
var per={name:"张三",age:18,}
per.sex="男"
alert(per.name+'||'+per.age+'||'+per.sex)BOM对象
BOM(Browser Object Model)浏览器对象模型，用来执行浏览器的相关操作
消息框
1、alert（）警告框
2、confirm() 确认框，用于告知用户信息，并收集用户的选择
例：
//有返回值，返回值类型为boolean 确定时ture，取消时false
var flag=confirm("您好呀")
alert(flag)定时器
启动循环定时器
格式
setlnterval(调用方法，毫秒值)
function run1(){
alert('hello,')
}
setInterval("run1()",3000)
function run1(){
alert('hello,')
}
var vvid=setInterval("run1()",3000)
clearInterval(vvid)
//clearInterval(循环定时器ID) 取消循环定时器需求：两秒之后显示，显示之后删除对应的循环计时器
var id;
function run1(){
alert('helllo,world');
clearInterval(id);
}
id=setInterval("run1()",2000)一次性定时器
启动：setTimeout(方法名,毫秒值)
取消 ：clearTimeout(id)//取消一次性定时器
Location对象
href属性，设置了href属性那就会跳转到该网页
var url=location.href;
alert(url)
location.href='demo2.html'需求：两秒之后跳转到百度
function jump(){
location.href='http://www.baidu.com'
}
setTimeout("jump()",2000)DOM对象
每一个标签会被加载成DOM树上的一个元素节点对象
每一个标签的属性会被加载成DOM树上的一个属性节点对象
每一个标签的内容体会被加载成DOM树上的一个文本节点对象
整个DOM树，是一个文档节点对象，即DOM对象
一个html文档加载到内存中就会形成一个DOM对象
获取元素对象的四种方式
getElementById()
通过元素的id获取元素对象，如果找不到，那就返回null
<input type="text" id="t1"/>
<script>
var t1=document.getElementById("t1")
alert(t1)
var t2 =document.getElementById("t2")
alert(t2)
</script>getElementByName()
通过元素的name属性获取符合要求的所有元素
<input type="checkbox" name="hobby" value="read"/>
<input type="checkbox" name="hobby" value="code"/>
<input type="checkbox" name="hobby" value="run"/>
<script>
var arr=document.getElementsByName("hobby")//返回的是元素接待你对象 数组
alert(arr.length)
</script>getElementByTagName()
通过元素名属性(标签名)获取符合要求的所有元素
<ul>
<li>javaee</li>
<li>android</li>
<li>ios</li>
<li>python</li>
</ul>
<script>
var arr=document.getElementsByTagName("li")
alert(arr.length)
</script>getElementByClassName()
元素的class属性获取符合要求的所有元素,找不到返回空数组
<input type="radio" name="sex" class="h1"/>
<input type="radio" name="sex" class="h1"/>
<script>
var arr=document.getElementsByClassName("h1")
alert(arr.length)
</script>元素对象常见属性
value：获取或者更改元素对象的value值
<input type="text" id="t1" value="你好"/>
<script>
var t1=document.getElementById('t1')
var text=t1.value
alert(text)
t1.value="你好吗"
</script>classname：获取和更改class属性
<head>
<meta charset="utf-8">
<title></title>
<style>
.ys1{
color:red;
}
.ys2{
color:blue;
}
</style>
</head>
<body>
<span id='s1' class="ys1">今天心情还是很不错的</span>
<script>
var t1=document.getElementById('s1')
alert(t1.className)
t1.className='ys2'
</script>
</body>checked：获取或者设置元素的checked属性值
<body>
<input type="checkbox" id="hobby"/>
<script>
var hobby=document.getElementById("hobby")
alert(hobby.checked)
//复选框默认选中
hobby.checked=true
</script>
</body>innerHTML：获取或者设置对象的内容体
<span id ="d1">今天天气好晴朗</span>
<script>
var span=document.getElementById("d1")
alert(span.innerHTML)
span.innerHTML="你好呀"
alert(span.innerHTML)
//追加
span.innerHTML+=",我不是很好"
</script>JS事件
入门案例
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("你点到我了啊")
}
</script>
</head>
<body>
<input type="button" value="点我啊" onclick="run1()">
</body>驱动机制简述
1、事件源：专门产生世家你的组件
2、事件:事件源产生的动作或者事情
3、监听器：专门处理事件源所产生的事件
4、注册/绑定监听器：监听事件源，是否有指定事件产生
常见的js事件
点击事件
onclick属性onclick=”执行的方法名”
焦点事件
获取焦点事件（onfocuse）
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("获取到焦点了")
}
</script>
</head>
<body>
<!--获取焦点时弹出对话框-->
<input type="text" onfocuse="run1()" />
</body失去焦点事件（onblur）
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("获取到焦点了")
}
</script>
</head>
<body>
<!--获取焦点时弹出对话框-->
<input type="text" onblur="run1()" />
</body域内容改变事件（onchange）
元素组件的值发生改变时触发
onchange属性onchange=”定义的方法函数”
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("域内容中的值改变了")
}
</script>
</head>
<body>
<select onchange="run1()">
<option value="B">北京</option>
<option value="S">上海</option>
<option value="SH">深圳</option>
</select>
</body>加载完毕事件（onload）
元素组件加载完毕之后会触发
onload属性onload=”定义的函数方法”
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("加载完了啊")
}
</script>
</head>
<body onload="run1()">
<h1>这是主体</h1>
</body>表单提交事件（onsubmit）
表单表格提交按钮被点击之后会触发,通常适用于表单数据的校验
onsubmit
注意，该事件需要返回boolean类型的值来执行 提交或者阻止 表单数据的操作
事件得到true，提交表单数据提交
事件得到false，阻止表单数据的提交
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("要提交了奥");
return true;
}
</script>
</head>
<body>
<form onsubmit="run1()">
<input type="text" name="" id="" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>键位弹起事件（onkeyup）
在组件中输入某些内容时，键盘键位弹起时触发该方法
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("键位谈起了")
}
</script>
</head>
<body>
<input type="text" name="" id="" value="" onkeyup="run1()"/>
</body>常用鼠标事件
鼠标移入事件（onmouseover）
鼠标移入某一个元素组件时触发
鼠标移出事件（onmouseout）
鼠标移出某一个元素组件时触发
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("鼠标移入了")
}
function run2(){
alert("鼠标移出了")
}
</script>
</head>
<body>
<input type="text" name="" id="" value="移入" onmouseover="run1()"/>
<input type="text" name="" id="" value="移出" onmouseout="run2()"/>
</body>js事件的两种绑定方式
元素事件句柄绑定
将事件以元素的方式写到标签的内部，进而绑定对应的函数
绑定一个无参函数，绑定一个有参函数，绑定一个参数函数（对象）
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("run1")
}
function run2(str){
alert(str)
}
function run3(obj){
alert(obj.value)
}
function run4(){
alert("run4")
}
function run5(){
alert("run5")
}
</script>
</head>
<body>
<input type="text" name="" id="" value="111" onclick="run1()"/>
<input type="text" name="" id="" value="222" onclick="run2('你好啊')"/>
<input type="text" name="" id="" value="333" onclick="run3(this)"/>
<input type="text" name="" id="" value="111" onclick="run1(),run4(),run5()"/>
</body>DOM绑定
原事件绑定的方法
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("加载完毕")
}
</script>
</head>
<body onload="run1()">
</body>DOM绑定
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("加载完毕")
}
//DOM绑定方式 对象.事件属性
window.onload=run1;
//DOM绑定方式 匿名函数 可绑定多共和函数
window.onload=function(){
run1();
run2();
};
</script>
</head>
<body>
</body>DOM绑定联系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function run1(){
alert("run1")
}
function run2(){
alert("run2")
}
window.onload=function (){
var input=document.getElementById("d1")
input.onclick=function(){
run1();
run2();
}
}
</script>
</head>
<body>
<input type="text" id="d1" />
</body>
</html>
