学习记录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