HTML基础之JS
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内部的最底下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<linkrel="stylesheet" href="static">--> ##link可以引入css
<style></style> ##加载其中的css样式
<!--写在上面和写在下面的区别:-->
<!--影响页面的加载速度-->
<!--<scriptsrc="s1.js" type="text/javascript"></script>--> ####引入js 并指定类型
</head>
<body>
<script>
// if (1 == 2) { #通过{}的代码块来进行分割。
// console.log(1111111111) ####打印结果
// } else if (2 == 2) {
// console.log(1111111111)
// } else {
// console.log(‘最后了!‘)
// }
// 如果是两个等号则不判断数据类型 如果三个等号则判断数据类型
// if (‘1‘===‘1‘){
// console.log(1111)
// } else {
// console.log(2222)
// }
// switch (1){ ###传入的参数一一对应。
// case 1:
// console.log(111); ##注意不同语句间加分号,也便于前端处理代码。
// break; #break最好都加上 不然会打印其他case内容。
// case 2:
// console.log(222);
// break;
// default:
// console.log(333);
// }
// var name = ‘dsx nhy‘;
// for (var a in name){
// console.log(name[a]); ###循环角标,通过角标取值
// }
//
// var list = [‘大师兄‘,‘牛牛‘,‘安大叔‘];
// for (var i in list){
// console.log(list[i]) ######循环数组
// }
//
// var dict = {‘宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘};
// for (var d in dict){
// console.log(d); ##取key
// console.log(dict[d]); ##取value
// }
// 不支持字典的循环
// var list = [‘大师兄‘,‘牛牛‘,‘安大叔‘];
// for (vari=0;i<=list.length;i++){
// console.log(list[i]) ###循环数字,打印 只能循环list和字符串
// }
// 与python相同
// while (1==1){
// console.log(1111) ##死循环
// }
Js中的函数
普通函数
// function f(name,age) { ###通过function来定义函数
// console.log(name);
// console.log(age);
// }
// f(‘dsx‘,18)
// function f() {
// console.log(‘in‘+name)
// }
// console.log(‘out‘+name);
// f()
// 自执行函数
// a=(function () {
// console.log(‘自执行函数!‘)
// });
// a()
</script>
</body>
</html>
绑定事件
<!DOCTYPEhtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input id=‘i1‘type="button" value="一键输入用户名">
</div>
<div>
<input type="text"name="username">
</div>
<script>
// 当点击按钮时向input框输入 houyafan
// function demo(ths) { ###绑定后(如通过onclick绑定函数)ths就代表该标签。
// ths.parentElement.nextElementSibling.lastElementChild.value = ‘222‘
// }
var demo =document.getElementById(‘i1‘);
demo.onclick = function () { ###当点击的时候再绑定 匿名函数
demo.parentElement.nextElementSibling.lastElementChild.value = ‘222‘;
}
</script>
</body>
</html>
面向对象的编程
<!DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// function f(name) {
// this.name = name; ###类 与this使用相关(相当于py中的class)
// this.say = function () {
// console.log(‘say-->‘+this.name)
// }
// }
// var obj = new f(‘dsx‘); ##实例化 调用实例化方法。
// console.log(obj.name);
// obj.say()
// function f(name) {
// this.name = name;
// this.say = function () {
// console.log(this.name)
// }
// }
//
// var obj = new f(‘dsx‘);
// console.log(obj.name);
// obj.say()
// class f():
// def __init__(name):
// self.name= name
// def say(self):
// print(self.name)
// obj = f(‘dsx‘)
// obj.name
</script>
</body>
</html>
2.js相关操作
注释
单行注释通过 // 多行通过 /* */
JS变量
name = ‘dsx‘; ?// 默认全局变量 function ?func() { var ?name = ‘niulaoshi‘; // 局部变量 } ? |
JS基本数据类型(JavaScript 声明数据类型通过new)
在console操作
字符串
//定义字符串 var str = ‘你开心就好!‘; var name = ‘大师兄‘; // 字符串的拼接 var name_str = ?name+str; ###直接可通过加号拼接 //字符串操作 str = ‘大师兄‘ str.charAt(0) 根据角标获取字符串中的某一个字符 ? char字符 str.substring(1,3) ?根据角标获取 字符串子序列 ?大于等于x 小于y str.length 获取字符串长度 str.concat(‘牛教授‘) 拼接字符串 和加号拼接一样 str.indexOf(‘大师‘) 获取子序列的位置 只会拿第一个匹配 str.slice(0,1) ? 切片 start end str.toLowerCase() ? 变更为小写 str.toUpperCase() ?变更大写 str.split(‘师‘,1) 切片 返回数组 参数2 为取分割后数组的前x个元素 数字类型(JavaScript 只有一种数字类型。数字可以带小数点,也可以不带) var age = 18; var score = ?89.22; number = ‘18‘; ? // 字符串转 var n = ?parseInt(number); 如果是小数就会去掉小数点后面的数字。 // 转换成小数 f ?=parseFloat(number) 布尔类型(true 或 false) var t = true; ?var f = false; ? |
数组类型(就是Python的列表)
// 第一种创建方式 var list = new ?Array(); list[0] = ‘大师兄‘; list[1] = ‘牛教授‘; // 第二种创建方式 var list2 = ?new Array(‘大师兄‘,‘牛教授‘); // 第三种创建方式 var list3 = [‘大师兄‘,‘牛教授‘]; 数组操作 var list3 = [‘大师兄‘,‘牛教授‘]; list3.length 数组的长度 list3.push(‘dsx‘) ?尾部追啊参数 list3.shift() 头部获取一个元素 并删除该元素 list3.pop() 尾部获取一个元素 并删除该元素 list3.unshift(‘dsx‘) ?头部插入一个数据 list3.splice(start, ?deleteCount, value) 插入、删除或替换数组的元素 ? 中间0即可插入 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 (条件) { 执行代码块 } else if (条件) { 执行代码块 } else { 执行代码块 }; if (1 == 1) { console.log() } else if (1 ?!= 1) { console.log() } else if (1 ?=== 1) { console.log() } else if (1 ?!== 1) { console.log() } else if (1 ?== 1 && 2 == 2) { //and console.log() } else if (1 ?== 1 || 2 == 2) { //or console.log() } switch (a) { case ?1: console.log(111); break; case ?2: console.log(222); break; default: console.log(333) } ? |
JS循环语句
第一种循环 循环的是角标 tmp = [‘宝马‘, ‘奔驰‘, ‘尼桑‘]; tmp = ‘宝马奔驰尼桑‘; tmp = {‘宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘}; for (var i in ?tmp) { console.log(tmp[i]) } 第二种循环 不支持字典的循环 for (var i = ?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‘; function a() { var ?name=‘dsx‘; function ?b() { console.log(name); } return ?b } var c = 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 = new ?Foo(‘dsx‘); console.log(obj.name); // 类中定义方法,虽然可以用,但是在多个实例时存在重复实例方法,浪费资源 // 创建对象时,say每次创建对象,都会创意一个say的方法。 function ?Foo1(name) { this.name ?= name; this.say ?= function () { console.log(this.name) } } var obj1 = new ?Foo1(‘dsx_obj1‘); obj1.say(); // 完善类的定义 function ?Foo2(name) { this.name ?= name } // 类的原型,将共用的的方法抽出来,当在实例化后,只创建了一个叫做Foo2的对象,对象内只有name,在调用方法时去现在Foo中找,没有找到,会在去原型中找 是否有该方法。有执行,没有就报错 ? Foo2.prototype ?= { say: ?function () { console.log(this.name) } }; var obj2 = new ?Foo2(‘dsx_obj2‘); obj2.say(); ? |
序列化
1 2 ? | 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) ?转义字符串解码 ? |
html基础之js操作
原文地址:https://www.cnblogs.com/cslw5566/p/9269934.html