HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python、Go、Java、C++等,都是一种独立的语言,Python的解释器有Python2.7、Python3.x,浏览器具有解释JavaScript的功能,所以它才是HTML的三把利器之一。
在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时,按照CSS规则解释,遇到Script标签时,按照JavaScript的语法规则解释。
引入JavaScript代码,类似于Python的import
<script src="public.js" type="text/javascript"></script>
head中引入JS与body中引入JS区别
html代码从上而下解析,如果在head中引入JS,影响页面打开的速度,存在风险,所以通常放在htmlbody的最下方,这样页面内容先展示,最后在加载JS。注:写在最下面要有底线,写在body内部的最底下。
注释
单行注释通过 // 多行通过 /* */
JS变量
name='dsx';// 默认全局变量
function func(){
var name='niulaoshi';// 局部变量
}
JS基本数据类型(JavaScript 声明数据类型通过new)
字符串
//定义字符串
var str='你开心就好!';
var name='大师兄';
// 字符串的拼接
var name_str=name+str;
//字符串操作
str='大师兄'
str.charAt(0)char字符
str.substring(1,3)xy
str.length 获取字符串长度
str.concat('牛教授') 拼接字符串
str.indexOf('大师') 获取子序列的位置
str.slice(0,1)start end
str.toLowerCase() 变更为小写
str.toUpperCase() 变更大写
str.split('师',1)2x个元素
数字类型(JavaScript 只有一种数字类型。数字可以带小数点,也可以不带)
var age=18;
var score=89.22;
number='18';
// 字符串转
varn=parseInt(number);
// 转换成小数
f=parseFloat(number)
布尔类型(truefalse)
vart=true;varf=false;
数组类型(就是Python的列表)
//var list=newArray();
list[0]='大师兄';
list[1]='牛教授';
// 第二种创建方式
var list2=newArray('大师兄','牛教授');
// 第三种创建方式
var list3=['大师兄','牛教授'];
数组操作
var list3=['大师兄','牛教授'];
list3.length 数组的长度
list3.push('dsx') 尾部追啊参数
list3.shift() 并删除该元素
list3.pop() 并删除该元素
list3.unshift('dsx') 头部插入一个数据
list3.splice(start,deleteCount,value) 插入、删除或替换数组的元素
list3.splice(n,0,val) 指定位置插入元素
list3.splice(n,1,val) 指定位置替换元素
list3.splice(n,1) 指定位置删除元素
list3.slice(1,2);
list3.reverse() 反转
list3.join('-') 将数组根据分割符拼接成字符串
list3.concat(['abc']) 数组与数组拼接
list3.sort() 排序
对象类型(等同于Python的字典)
var dict={name:'dsx',age:18,sex:'男'};
var age=dict.age;
var name=dict['name'];
delete dict['name'] 删除
delete dict.age 删除
定时器
setInterval(alert('大师兄'),5000);//参数1 毫秒为单位
function t1(){
console.log('我是大师兄')
}
setInterval('t1()',5000);// 可以运行方法
JS条件判断语句
if(条件){
执行代码块
}elseif(条件){
执行代码块
}else{
执行代码块
};
if(1==1){
console.log()
}elseif(1!=1){
console.log()
}elseif(1===1){
console.log()
}elseif(1!==1){
console.log()
}elseif(1==1&&2==2){//and
console.log()
}elseif(1==1||2==2){//or
console.log()
}
switch(a){
case1:
console.log(111);
break;
case2:
console.log(222);
break;
default:
console.log(333)
}
JS循环语句
第一种循环
循环的是角标
tmp=['宝马','奔驰','尼桑'];
tmp='宝马奔驰尼桑';
tmp={'宝马':'BMW','奔驰':'BC'};
for(variintmp){
console.log(tmp[i])
}
第二种循环
不支持字典的循环
for(vari=0;i<10;i++){
console.log(tmp[i])
}
第三种循环
while(1==1){
console.log(111)
}
函数定义
1、普通函数
function(形参,,){
执行代码块
}
函数名(形参,,);
2、匿名函数 匿名函数没有名字,无法调用时找到,将整个函数当做一个参数传递
setInterval(function(){
console.log(11)
},5000);
3、自执行函数创建函数并且自动执行
当引入多个js文件时,函数名可能会出现重复,这时通过自执行函数,保证每一个js文件都会被解析,从而生成独立的容器,防止调用冲突
(function(name){
console.log(name)
})('dsx');
作用域
Python的作用域是以函数作为作用域的,其他语言以代码块({})作为作用域的。
JavaScript是以函数作为作用域
function tmp(){
var name='dsx';
console.log(name)
}
tmp();
console.log(name);
2、函数作用域在函数未被调用之前,已经创建
var name='nhy';
functiona(){
var name='dsx';
functionb(){
console.log(name);
}
returnb
}
varc=a();
c();
3、函数的作用域存在作用域链(代码不执行时,先生成作用域链)
当函数嵌套函数时,每一个函数为一个作用域,多层就叫做作用域链,查找遵循作用域链规则
function outer(){
name='nn';
function inner(){
var name='ii'
console.log('in',name)
}
console.log('out',name);
inner()
}
outer();
函数不调用时,只生成作用域,当调用时遵循作用域链执行,name都为hhh
function outer(){
var name='nn';
function inner(){
console.log('in',name)
}
var name='hhh';
console.log('out',name);
inner()
}
outer();
4、函数内,局部变量提前声明JavaScript的函数在运行前会找到函数内的所有局部变量执行
var xxx;
function func(){
console.log(name);
var name='dsx';
}
func();
面向对象
//JavaScript中,方法和类写法类似,区别方式为是否有this,如果有就可以当做是类来用
//JavaScript的类默认就拥有了Python的构造函数__init__
function Foo(name){
this.name=name;
}
//JavaScript需要用到new关键字来创建对象
var obj=newFoo('dsx');
console.log(obj.name);
// 类中定义方法,虽然可以用,但是在多个实例时存在重复实例方法,浪费资源
//say每次创建对象,都会创意一个say的方法。
function Foo1(name){
this.name=name;
this.say=function(){
console.log(this.name)
}
}
var obj1=newFoo1('dsx_obj1');
obj1.say();
// 完善类的定义
function Foo2(name){
this.name=name
}
//,将共用的的方法抽出来,当在实例化后,只创建了一个叫做Foo2的对象,对象内只有name,在调用方法时去现在Foo中找,没有找到,会在去原型中找
是否有该方法。有执行,没有就报错
Foo2.prototype={
say:function(){
console.log(this.name)
}
};
var obj2=newFoo2('dsx_obj2');
obj2.say();
序列化
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化
转义
转义中文或特殊字符
1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的,所以要进行转义
2、&& 给后端那么必须转义
decodeURI(url)URl中未转义的字符
decodeURIComponent(url)URI组件中的未转义字符
encodeURI(url)URI中的转义字符
encodeURIComponent(url)URI组件中的字符
字符串转义
var name='大师兄'
escape(name) 对字符串转义
unescape(name) 转义字符串解码