js特点
1.这门语言运行在浏览器中,只要有浏览器就能运行js
优点
1.使用JavaScript可以在客户端进行数据验证,节省服务器端的资源
2.可以方便地操纵各种页面中的对象,使网页更加友好
3使多种任务仅在客户端就可以完成而不需要网络和服务器的参与,从而支持分布式的运算和处理
局限
1.兼容性。互联网上有很多浏览器,如FireFox、Internet Explorer、Opera等,但各种浏览器支持JavaScript的程度是不一样的,所以各个浏览器运行JavaScript的效果会有一定的差距,有时甚至会显示不出来
2.JavaScript不能打开、读写和保存用户计算机上的文件
学习目的
1.写特效
2.表单验证
3.Ajax
js使用方式
1.在HTML中使用JavaScript
<script type=“text/javascript”>
//里面写js代码
alert(‘hello,js’);
</script>
2.使用< script>< /script>标签导入js文件
注意:当使用script标签的src属性时,script标签中一定不能放入任何JS代码。
例如:
<script src=‘test.js’>
之间不允许加入任何JS代码….
</script>
注意:< script>标签可以放到html页面的任何地方
3.在HTML标签中使用JavaScript(基于事件)
<div onclick=“alert(‘hello,js’)”></div>
4.基于跳转 使用
< a href=“javascript:alert(‘hello,js’);”>< /a>
JS的输出方式
1. alert(‘警告框’);
注意: 没有点击确定按钮的情况下,alert(‘后面的代码不执行’);
2. window.document.write(‘向页面输出内容’);
3. console.log(‘在控制台打印’) 推荐使用这种
js基本语法
1.定义变量
1.使用关键字 var 变量名
var 可以同时声明多个变量,每个之间用逗号隔开
var aa = ‘张三’;
注意:在js中变量必须先定义在使用 ,如果直接使用一个没有定义的变量 会就报错(5.html:11 Uncaught ReferenceError: str is not defined)
2.变量的类型 取决于 赋的值(js是弱类型)
3.在js中变量名区分大小写
4.变量名(标识符)定义规则 数字 字母 下划线 $ 组成,不能以数字开头
var $='111'; //ok
2.注释:
// 单行注释
/* */多行注释
3.语句
JavaScript中的语句以一个分号结尾,如果省略分号,则由解析器确定语句的结尾,一般情况下,换行会被当做一个语句的结尾
js数据类型
1.基本数据类型
a.字符串 String
注意是"php"中定义字符串 单双引号的区别,对比学习
1.双引号解析变量 单引号不解析变量
2.程序在解析单引号速度较快
3.双引号转译绝大多数字符 ,单引号只能转译单引号本身(') 和 转译符本身(/)
js定义字符串
1.js中单双引号都不解析变量 (语法限定)
2.单引号和双引号均可解析转义字符
3.字符串中使用+连接变量
4.字符串不能换行声明
如需要使用ES6中的模板字符``
5.字符串对象函数的使用
1.定义一个字符串
var str='iloveyou';
var str1 = "iloveyou";
if(str==str1){//单双引号没啥区别
// console.log('nice');
}
2.单双引号都不解析变量
var flag = 'zhangsan';
var str2 = '{$flag}iloveyou';
// console.log(str2);
3.如何连接变量
var str3 = flag+'loveyou';
// console.log(str3);
4.字符串中的转译问题
//a.将无意义的字符转译成有意义的字符
var str4 = "zhangsan";
console.log(str4);
//b.将有意义的字符转译成无意义的字符
var str5 = '每当夜晚来临的时候,孤独总在\'我\'左右';//《执着》 许巍
console.log(str5);
5.字符串不能换行声明
// var str6 = 'ilove
// you';
6.字符串对象中方法的使用
var flag = 'iloveyou';
//1.字符串转大写
var res = flag.toUpperCase();//document.write(); obj.方法()
//2.查看字符串长度
var res = flag.length//obj.属性名
// console.log(res);
创建字符
1.快捷创建字符串
var str = 'nice';
2.创建字符串对象
var str = new String('nice');
在js中除了null undefined 的其他类型数据 都有类似于 new String();这样的创建方式,但是我们一般在
写程序的时候都使用快捷方式,因为快捷方式创建的值和 new创建的值使用起来一样
b.数值型 Number
整数Int
浮点数float
NaN 非数值型
1.任何涉及NaN的操作,结果都为NaN
2.NaN与任何值都不相等,包括NaN本身
isNaN()函数用来检测是否为NAN类型
parseInt()
parseFloat()
c.布尔型Boolean
ture 真
false 假
2.复合数据类型
a.对象object
对象其实就是一些数据的集合,这些数据可以是字符串型、数字型和布尔型,也可以是复合型
创建对象的几种方式
1. obj = new Object();
属性操作:
添加
1. obj.name = '张三'; //obj.后面 不解析变量
2. var sex='sex';
obj[sex]='boy'; //obj[] 解析变量
删除
delete obj.name
修改
obj.sex = 'man'
查看
console.log(obj.name)
方法操作
添加
obj.eat = function(){
console.log(this.name+'爱吃羊肉串');
}
调用
obj.eat();
删除
delete obj.eat;
修改
obj.eat=function(){
console.log(this.name+'羊蝎子');
}
2. var obj={
name:'张三',
sex:'nan',
eat:function(){
console.log(this.name+'你好');
}
}
推荐这种
(json,xml)
3. function MyObject(){
//通过this 给空的object添加属性
this.name = 'zhangsan';
this.sex = 'nan';
this.eat=function(){
console.log(this.name+'你好');
}
}
new实例化一个对象的时候会自动触发构造方法
var obj = new MyObject();
使用属性
obj.name;
obj.eat();
遍历对象
1 for in
var obj={
name:'zhangsan',
sex:'nan',
age:21,
classid:'ruanjian_02',
eat:function(){
console.log('nice');
}
}
for(var o=null in obj){
// o 对象的属性
console.log(obj[o]);
}
for(var o in obj){
console.log(o+'是属性'+obj[o]+'里面是值')
}
注意:是"PHP"中转化成一个通用的格式 json
$arr = [
'username'=>'zhangsan',
'sex'=>'age'
];
$json_str = json_encode($arr);
将json字符串转化为对象
json_decode($json_str)->username;
将json字符串转化为数组
json_decode($json_str,true)['username'];
eval("("+json字符串+")")
b.数组array
创建数组
快捷创建 var arr=[1,2,3,4,5];
创建数组对象
1. var arr1 = new Array(1,2,3,4,5);
2. var arr2 = new Array(5); //返回一个单元格数是5个长度的空数组
数组单元的访问
var arr= [1,2,3,'abc',['oo','xx'],6,7,8,9];
arr[1];
arr[4][0]
修改单元
arr[4][0]='ooooo';
数组的单元个数
console.log(arr.length);
// console.log(arr);
注意:
1.数组必须指定下标 否则报错
arr[11]=100;
2.没有关联数组 js中数组是一个对象 对象添加属性- obj['name']='zhangsan'
arr['name']='zhangsan';//并不会影响单元个数 , 相当于给arr对象添加一个name属性
遍历
for循环
for(var i=0; i< arr.legnth; i++){}
for in
for(var i in arr){}
forEach()
arr.forEach(function(item , index ){})
for of
for(var item of arr){ 之间遍历的是元素}
3.其他数据类型
a. 函数function
函数是一段可执行的JavaScript代码,在JavaScript中,函数可以带有0个或多个参数,也可以返回一个值或不返回值
作用域
局部变量
在函数内部使用var 声明的变量是 局部变量,只能在函数内部使用,
局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁
全局变量
在函数外面定义的变量,或者在函数内部没有使用var关键字声明的变量
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
函数自执行写法
(function(形参){函数体代码})(实参数)
b. null 空
null是一个特殊的数据类型,其所代表的意思是“空”。需要注意,这个空并不代表是0或空字符串。null代表没有值,不是一个有效的数字、字符串、也不是数组、对象和函数,什么数据类型都不是
c. undefined未定义
undefined也是一个特殊的数据类型,只有定义了一个变量但没有为该变量赋值,使用了一个并未定义的变量、或者是使用了一个不存在的对象的属性时,JavaScript会返回undefined。
4.数据类型的转换
隐式类型转换
所谓隐式类型转换,就是不需要程序员定义,JavaScript会自动将某一个类型的数据转换成另一个类型的数据。JavaScript隐式类型转换的规则:
将类型转换到环境中应该使用的类型。
例如:if(1){ //1会自动转换成true
document.write(‘ok’);
}
0,'',NAN,undefined,false,0.0,null
可以隐式类型转换的情况:
1.数字类型:在字符串环境下可以隐式转换为“数字”,在布尔环境下,可以隐式转换为true(非0数字,0为false)
2.非空字符串:在数字环境下,可以隐式转换为字符串中的数字或NaN;在布尔环境下,可以隐式转换为true。
3.空字符串:在数字环境下可以隐式转换为0;在布尔环境下可以隐式转换为false;
4.字符串”true“:在数字环境下可以隐式转换位1;布尔为true
5.字符串“false”:数字环境为0,布尔为false
6.null:在字符串环境下,转换为“null”;数字环境下,转换为0,布尔环境下,转为false
7.NaN:在字符串环境下可以隐式转换为“NaN”;布尔环境下,转换为false
8.undefined:字符串环境下,转换为“undefined”,数字环境下,转为
NaN,布尔下,转为false
9.true:字符串转为“true”,数字环境下转为1
10.false:字符串转为“false”,数字环境下转为0
显示类型转换
Number()
1.如果是布尔值,true和false将分别转换为1和0
2.如果是数字值,只是简单的传入和返回
3.如果是null,返回0
4.如果undefined,返回NaN
5.如果是字符串,遵循下列规则:
a.“11”会变成11,“011”会变成11
b.“1.1”会变成1.1
c.“0xf”会变成相同大小的十进制整数值
d. 如果字符串是空的,则将其转换为0
e. 如果字符串包含除上述格式之外的字符,则将其转换成NaN
parseInt()
1.忽略字符串前面的空格,直到找到第一个非空格字符
2.如果第一个字符不是数字或者是负号,返回NaN
3.空字符串,返回NaN
4.如果第一个字符是数字,会继续解析第二个字符,直到解析完所有后续字符或遇到了一个非数字字符。
5.如果字符串以0x开头且后面跟数字字符,就会将其转为16进制数,同样,八进制也一样。
parseFloat()
1.第一个小数点是有效的,第二个小数点无效
2.始终忽略前面的0,不分进制数
3.十六进制会被转换成0
4.空字符串转换为NaN
Boolean()函数将一个非布尔类型转换为布尔类型
注意 name=false 使用 Boolean(name)转换的时候得到是true
个构造函数传递非空字符串都会创建布尔值为true的boolean对象
解决办法 使用 JSON.parse(name) 转换数据类型 true或false
String()
typeof 可以打印数据类型
var aa='qqweq';
console.log(typeof aa); //string
eval() 可以把json字符串转换成json对象
var arr = "{'name':'张三','sex':'女'}"
var arr1 = eval("("+arr+")");
eval('var arr = '+obj.data+';');