初识JavaScript
1.JavaScript的概念
1.1构建网站的三大技术:
1.HTML : 网页的骨架;
2.BOM : 样式管理;
3.DOm : 动态脚本;
1.2概念
JavaScript是一种解释性脚本语言,浏览器进行解析;
1.3JavaScript由三部分组成:
1. CMAScript : JavaScript的语法,定义了脚本语言的所有属性、方法和对象
2. BOM : 代表浏览器,可以对浏览器进行访问和操作;
3. DOM : 文档对象模型;
1.4JavaScript的关系图:
2.JavaScript的三大引入方式
2.1 行内JS
- 语法:
<a href="javascript:alert('点你就点你');"> 点我,点我...</a>
- href 中的Javascript是伪协议,当浏览器解析至此处时,就会知道不跳转,而是执行JS代码;
2.2 内部JS
- 语法:
<script type="text/javascript"> JS代码 </script>
- 放置位置:
① 写在一组script标签内部,该标签可以放在任意位置
② 官方: 推荐head标签内部写js
③ 码农: body标签结束位置写js - 注意:script标签不能写成单标签;
2.3 外部引入JS
- 语法:
<script type="text/javascript" src="JS文件位置"></script>
- 注意:
①引入外部JS代码后,script标签内部不能写其他JS代码;
②注意每一句JS代码后面都要写分号;
2.4 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--引入js代码,该标签做了引入操作后,标签内部不能写js代码-->
<script type="text/javascript" src="js/_01.js" />
<!--script 标签声明,内部js代码:加载顺序至上而下-->
<!--注意: script标签不能写成单标签形式-->
<script type="text/javascript">
window.alert(10);
</script>
</head>
<body>
<div style="background-color: pink;">
555555555555555555
</div>
<!--行内js代码,JavaScript是伪协议,浏览器执行至此处时,知道接下来执行的是js代码-->
<a href="javascript:alert(1)">alert</a>
<a href="#" onclick="alert(2)">onclick#</a>
<a href="javascript:void(0)" onclick="alert(3)">onclick</a>
</body>
</html>
3.JavaScript的变量
- JavaScript是一种弱数据类型的语言,所以JS的语法中允许给已声明且赋值的变量赋 值另外类型的值
- 语法:
① var 变量名; //声明变量【推荐方式】
② var 变量名=值; //声明变量并赋值【推荐方式】
③ 已声明赋值的变量 = 另一种类型值; //【不推荐】
④ 不声明变量 = 值; //不事先声明变量直接使用 - 代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num;
num = 10;
alert(num);
console.debug(num);
var name ="二狗";
console.debug(name);
name=3.14;
console.debug(name);
age=33;
console.debug(age);
</script>
</head>
<body>
</body>
</html>
4.JavaScript的原始数据类型
- JavaScript中可以使用 typeof/typeof()来判断变量的数据类型;
4.1Number数值类型
- JS数字类型可以采用10进制\8进制\16进制以及科学计算法等形式表示;
- 代码示例:
/*不会像java代码一样报错,输出结果为 Infinity 无穷大*/
console.debug(1/0);
/*isFinite 判断该值是否有穷,输出结果为 false*/
console.debug(isFinite(1/0));
/*new 一个对象*/
var n = new Number(15)
console.debug(n)
/*判断类型*/
var num = 10;
console.debug(typeof num);//普通数字为Number类型
console.debug(typeof n); //其他类型都是Object类型
console.debug(typeof(n));
//输出结果为NaN,因为字符串内容不是数字,所以底层无法将其中转换为数字
console.debug(123/"abc");
console.debug(123/"123");//输出结果为1.底层将字符串转换为数字
4.2Boolean类型
- 与java一样,采用true和false表示;
- 在JS语法中,0、NaN、Undefined、空字符串、null均可以表示为false;
- 代码示例:
var f = false;
console.debug(f);
f = new Boolean();
console.debug(f);
if(!f){
console.debug("大傻逼");
}
4.3String类型
- JS语法中不存在char类型,所以由单引号或双引号括起来的字符序列,任何字符串的长度都可以通过访问length属性获得.
- 代码示例:
var str = "小豆豆";
console.debug(str);
console.debug(str.length);
/*没有初始化的变量,打印输出结果为 undifined (没有定义)*/
var aaa;
console.debug(aaa);
/*null值,代表没有对象*/
var age = null;
console.debug(age);
5.JavaScript的运算符
- JavaScript中的赋值、算术、逻辑运算符与java一致;
5.1关系运算符
- == :代表相等(它只比较内容,不比较类型)
- ===:绝对相等(先比较类型,再比较内容)
- !==:绝对不等
<script type="text/javascript">
var num = 10;
var num2 = "10";
/* == 只比较内容,不比较类型;
* === 先比较类型,在比较类型;
* !== 绝对不相等为 true
* */
console.debug(num==num2);//true
console.debug(num===num2);//false
console.debug(num!==num2);//true
/*for循环与java中类型,只不过变量的声明关键字换为 var*/
for(var i=1;i<=10;i++){
console.debug(i);
}
</script>
6.JavaScript流程控制
- JS中同Java一样存在流程控制语句,用法一样;
- 代码示例 :
/*for循环与java中类型,只不过变量的声明关键字换为 var*/
for(var i=1;i<=10;i++){
console.debug(i);
}
/*for in 遍历数组 取出来的i值表示数组的索引编号*/
for(var i in arr){
console.debug(arr[i]);
}
7.JavaScript函数
7.1语法
- 语法:
function 函数名( [参数列表] ){ JS代码 [return 返回值;] }
- [ ] 表示可以不写;
- 代码示例 :
/*JS中的函数用 function关键字 与java类似不调用不执行*/
function eat(){
console.debug(10);
}
eat();
/*有参数的函数,调用时不是必须要传入相同个数的参数*/
function run(num1,num2){
console.debug(num1+num2);
}
run(10,20);
run(10);
run();
/*Js中的函数也可以有返回值,用return返回即可*/
function sleep(num1,num2){
return num1+num2;
}
var sum = sleep(10,20);
console.debug(sum);
console.debug(sleep(55,10));
console.debug(run(10,20));
7.2 全局变量和局部变量
- 代码示例
var name = "全局变量";
var xxx="憨批憨批";
function walk(){
name = "小花花";
}
walk();
console.debug(name);
function smile(){
var xxx = "憨批";
}
console.debug(xxx);
7.3 匿名函数语法
- 语法:
function (参数列表){ JS代码 [ return 返回值; ] }
- 代码示例:
var action = function(){
console.debug(“前方高能,请非战斗人员迅速撤离”);
}
action();
8. JavaScript对象
8.1 本地对象
- 本地对象就是 ECMA-262 定义的类(引用类型),相当于Java中类的概念;
- 这些引用类型在运行过程中需要通过new来创建所需的实例;
8.1.1 Date
- 日期对象
- 代码示例:
var date = new Date();
console.debug(date);
/*给对象添加一个函数,让输出的时间按指定格式输出*/
date.dateFormat = function(){
var year = this.getFullYear();
var mouth = this.getMonth();
var day = this.getDate();
var hour = this.getHours();
var min = this.getMinutes();
var sec = this.getSeconds();
return year+"/"+mouth+"/"+day+" "+hour+":"+min+":"+sec;
}
var frm = date.dateFormat();
console.debug(frm);
8.1.2 String
- 字符串对象
- 代码示例:
var str = "两情若是长久时,又岂在朝朝暮暮";
/*将字符串以 , 分割成一个数组,数组的长度为后面输入的值*/
var s = str.split(",",2);
console.debug(s);
/*根据ASCII编码表将整数转换为字符*/
var word = String.fromCharCode(65);
console.debug(word);
8.1.3 Array
- 数组对象
- 代码示例:
var arr = new Array();
console.debug(arr);
arr=(10);
arr = new Array(10);
console.debug(arr);
arr = new Array(10,12,34,56);
console.debug(arr);
console.debug(arr[1]);
/*JS中的数组没有长度限制,数据类型的限制*/
arr[66]=696969;
console.debug(arr);
console.debug(arr[66]);
/*for in 遍历数组 取出来的i值表示数组的索引编号*/
for(var i in arr){
console.debug(arr[i]);
}
8.2 系统函数
- 定义:全局属性和函数可用于所有内建的 JavaScript 对象;
- 系统函数就是JS给我们准备或者说封装好的一些函数(方法),实现了很多功能;
8.2.1 编码解码
- 代码示例:
var ss = "百度";
var str = "www.baidu.com?url = "+ss;
/*编码,将中文编译成地址可接受的字节码*/
var u = encodeURI(str);
console.debug(u);
/*解码*/
var i =decodeURI(u);
console.debug(i);
/*会将字符串中的特殊字符编码成可以发送的参数*/
str ="www.baidu.com?url=http://www.qq.com";
var se = encodeURIComponent(str);
console.debug(se);
/*解码*/
var de = decodeURIComponent(se);
console.debug(de);
8.2.2 eval函数
- 在JS中,计算代码,将字符串装换为可执行的脚本;
- 代码示例:
/*eval 会计算Js的字符串,当成脚本执行*/
var a = "console.debug('eval函数示例')";
console.debug(a);
eval(a);
8.2.3 parseInt函数
- 在JS中,将数字取整;
- 代码示例
/*parseInt取整数,若字符串以数字开头也可以转成该数字*/
var num = 3.42323;
num = parseInt(num);
console.debug(num);
num = "123abc";
num = parseInt(num);
console.debug(num);
8.2.4 Math函数
- 数学计算对象;
- 代码示例
/*向上取整*/
var v= Math.ceil(1.1);
console.debug(v);
/*Math.random()表示0~1的随机数*/
var word = parseInt(Math.random()*32)+65;
console.debug(word);
console.debug(String.fromCharCode(word));
8.3 自定义函数
- JavaScript中创建类其实和创建函数【函数也是一种对象】是一样的语法;
- 语法:
function 名称( ) { }
- 区分函数和对象 : 建议方法名称小写,创建类名称首字母大写;
- 对象中定义方法,有下列形式:
(1) 在对象中使用this关键字;
(2) 通过new的实例化对象添加方法;
(3) 通过prototype添加方法
/*function 关键字,用来创建方法或类*/
function Person(){
console.debug("豆豆爱吃肉");
}
/*创建Person类的对象*/
var pson = new Person();
console.debug(typeof pson);
Person();
/*设置字段 字段不需要写类型*/
function Person(name,age){
this.name=name;
this.age=age;
}
var p = new Person("小花花",2);
console.debug(p);
console.debug(p.age);
/*设置动态行为,即成员方法*/
/*一个普通函数*/
function eat(){
console.debug("不吃小鱼干");
}
function Cat(){
/*将普通方法赋予给Cat类中的eat方法*/
this.eat=eat;
//在类中写一个成员方法drink
this.drink=function(){
console.debug("喝水");
}
}
var cat = new Cat();
cat.eat();
cat.drink();
/*part2 对象添加属性的方式详解*/
function Animal(name,age){
this.name = name;
this.age = age;
this.toString = function(){
console.debug(this.name+"--"+this.age);
}
}
var aml = new Animal("豆豆",2);
console.debug(aml);
console.debug(aml.name);
console.debug(aml.age);
aml.toString();
var vml = new Animal("花花",2);
console.debug(vml);
/*part 2.1 给类的一个对象添加属性 ,只在添加的对象中生效*/
aml.sex="小公猫";
aml.run=function(){
console.debug("爱拆家");
}
console.debug(aml);
aml.run();
/* part2.2 给类中添加静态属性和动态行为 必须要用 [类名.prototype.字段名/方法名]
* 类中添加后,对象中都会多出该属性;
* */
Animal.prototype.song=function(){
console.debug("天天在家嚎");
}
Animal.prototype.sleep="爱睡觉";
aml.song();
vml.song();
console.debug(aml.sleep);
console.debug(vml.sleep);
9.BOM
- BOM是browser object model的缩写,简称浏览器对象模型;
- BOM中有:
1.window窗口对象
2.location地址对象
3.document文档对象
4.form表单对象 - 打开一个窗口就是一个window对象;
- 窗口里面使用location表示地址栏;
- 窗口的历史记录使用history来表示;
- 浏览器的信息使用navigator来表示;
- 窗口里面的内容使用document来表示
9.1 window
- window对象是BOM中的顶级对象,默认可以省略;
- window对象是相对于web浏览器而言的,依赖于浏览器,在浏览器中全局对象指的是window对象
- window对象可以获取其他BOM对象;
- 全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象;
- 代码示例:
/*弹窗*/
ar value = {"name":"么么哒","age":18};
value.sex = "女";
alert(value.name);
console.debug(value);
var v = prompt("你爱不爱我"," ");
console.debug(v);
var res = confirm("你确定么")
console.debug(res);
/*定时器*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var res;
function start(){
res = setInterval("document.getElementById('text2').value=new Date()",1000);
}
function stop(){
clearInterval(res);
}
function change(){
var pass = document.getElementById("pass");
if(pass.type=="password"){
pass.type ="text";
}else{
pass.type = "password";
}
}
</script>
</head>
<body>
<input type="button" value="开始" onclick="start()">
<input id="text2" type="text" value="">
<input type="button" value="结束" onclick="stop()" />
password:<input id="pass" type="password" >
<input type="button" value="密码" onclick="change()"/>
</body>
</html>
9.2 location
- 当前访问的网址的相关信息;
var loc = window.location;
for(var name in loc) {
console.debug(name, loc[name]); //查看对象信息(了解内容)
}
window.location.href = "http://www.baidu.com";