学习记录013-HTML基础js操作
概念
HTML中的三把利器的JS 又称为JavaScript,看着好像和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 = 'gdd' 默认全局变量
const name = 'nhy' 在es6里面,使用const定义的变量为常量,不可进行更改
Js基本上数据类型(Js中声明数据类型通过new)
字符串
var str = "你开心就好" 定义一个字符串 字符串拼接的两种方式 001 var str = "你开心就好" var str = str + ",我开心更好" 002 var str = "你开心就好" strr = str.concat(",我开心更好") str.charAt(1) 获取字符串对应角标的内容是什么 str.substr(0,2) 切片获取字符串的元素;和python一样顾头不顾尾 str.slice(0,2) 同上 str.length 获取当前字符串的长度 str.indexOf("和") 获取字符串里面元素的角标;常用于判断,如果在即返回,否则返回-1 str.toLowerCase() 字符串为小写 str.toUpperCase() 字符串均为大写 str.split(",") 拿逗号进行分割字符串的内容,返回的是一个list str.split(",",2) 返回字符串的以逗号分隔的前两个,返回的也是一个list 数字类型(JavaScript 只有一种数字类型。数字可以带小数点,也可以不带) 字符串转化成数字 var num = "18.8" parseInt(num) 转化成整数,输出为18,小数点后面的舍弃 parseFloat(num) 输出依然为18.8,只是将字符串转化成数字类型
数字转化成字符串
num = 18 num.toString()
布尔类型(true 或 false) var t = true; var f = false;
数组类型(就是python的列表)
创建列表的方式:三种 第一种 var list = new Array() list[0]= "西红柿" list[1]="黄瓜" 第二种 var list2 = new Array("黄瓜","西红柿") 第三种 var list1 = ["西红柿","香蕉"] 数组操作 list.length 查看长度 list.push("火龙果") 给列表的最后添加元素 list.shift() 拿出列表的第一个元素,并且把这个元素进行删除 list.unshift("西红柿") 找到列表的头,进行元素的添加 list.pop() 拿出尾部的元素进行删除 list.splice(start, deleteCount, value) 操作的位置角标、操作元素的个数,删除或添加元素 list = ["a","b","c"] list.splice(n,0,val) 指定位置插入元素 list.splice(n,1,val) 指定位置替换元素 list.splice(n,1) 指定位置删除元素 list.slice(0,2) 列表操作切片:顾头不顾尾 list.reverse() 列表反转 list.join("-") 根据制定字符进行列表元素的拼接 两个列表的拼接 list1 = ["d","e"] list = ["a", "b", "c"] list.concat(list1) 输出为一个list list.sort() 列表排序
对象类型(等同于python的字典)
定义对象 var dict = {"name":"guodengdeng","age":18} dict.name 获取key的value值 dict["name"] 获取key的value值 dict.name = "hujiangchuan" 修改key的值
Js条件判断语句
普通函数 // 大括号的内容称为代码块,如果括号内的内容满足,就实现代码快的内容 // if (value == 123){ // console.log("if条件下") // }else if(value == "abc") { // console.log("else if条件下") // }else{ // console.log("else下") // } 在JS当中,两个等号==:只判断值是否相等 // 而三个等号===:既判断值相等,也判断数据类型都相同 // if (1 === "1") { // alert(1) // }else { // alert("else") // } and条件 // 在JS中并且的关系用符号:&&表示 // if(value == "a" && 1 == 1){ // alert("两个条件下判断") // }else { // alert("else下") // } 或关系 // 在Js中或者的关系,用符号:||表示 // if(value=="a" || value=="b"){ // alert("或的关系if下") // }else { // alert("else") // } switch语句:走其中的a和b的条件,如果走其中任何一个通过,就break 否则走default;switch和if的区别是if可以做区间的判断,而后者只能做单一的值的判断 switch (value){ case "a": console.log("a"); break; case "b": console.log("b"); break; default: console.log("dafault下,既不是a也不是b"); }
JS数据类型转换和循环
// 在JS中字符串类型和列表类型的转换 // 列表转成字符串 // JSON.stringify(list) // 字符串转成列表 // JSON.parse(strlist) console.log(value); var jsonList = JSON.parse(value); console.log(jsonList) // 循环列表list;i是角标,通过jsonList[i]取值 // for(var i in jsonList){ // console.log(jsonList[i]) // } // 循环字典dict;循环的是key,通过jsonList[key取值 for(var key in jsonList){ console.log(jsonList[key]) }
console操作
拿到当前页面的url location.href 操作控制当前页面跳转路径 location.href = “url地址” 操作页面刷新 location.href = location.href 操作转译当前页面的url var url = location.href 把当前的url定义为一个变量 encodeURIComponent(url) 针对当前页面的url进行转译 操作转译之后的url的返回转译之前的状态 decodeURIComponent("chrome-error%3A%2F%2Fchromewebdata%2F") url里面是转译之后的url字符串 操作字符串的互相转译操作 var name = "大师兄" escape(name) unescape("%u5927%u5E08%u5144") 关于【confirm】 场景:页面显示的询问弹框,一般框里面会有两个按钮,确认和取消 confirm() 该方法返回的有true和false,点击弹框的取消该方法返回的就是false;而如果点击的是弹框的确认,返回的是true