HTML基础之JS

时间 2019-12-06

标签 html 基础栏目 HTML 繁體版

原文原文链接

JS一种脚本语言，它的解释器被称为JavaScript引擎，为浏览器的一部分，普遍用于客户端的脚本语言，最先是在HTML网页上使用，用来给HTML网页增长动态功能。javascript

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。css

<script> alert("My First JavaScript"); </script>

引入JavaScript代码相似于Python的importhtml

<script src="复习.js" type="text/javascript"></script>

head中引入JS与body中引入JS的区别java

写在head里面：代码从上到下依次执行，加载css,而后加载js，由于body还没开始加载，因此展示给用户的是一个白板页面，影响页面得加载速度
一般放在htmlbody里面的最下方，先加载css再加载html页面，最后加载js。注：必须是写在body里面的。python

JS定义字符串数组

定义字符串
var name = '你开心就好！'
var str = '双鱼座'
字符串的拼接
var name_str = name+str
字符串操做
name.charAt(0) 根据角标获取字符串中的某一个字符 char字符
name.substring(0,2)根据角标获取字符串子序列，顾头不顾尾
name.length获取字符串长度
name.concat('毛毛')拼接字符串
name.indexOf('开')获取子序列的位置
name.slice(0,2)//切片，顾头不顾尾，与substring同样
var str = 'eeeEE'
str.toLowerCase() 变动为小写
str.toUpperCase() 变动为大写
name.split('心') 以“心”分割

数字类型
var num = 88.88
var strNum = '88.88'
parseInt(strNum)//返回一个整数
parseFloat(strNum)//返回一个浮点数
布尔类型（true 或 false）
var t = true; var f = false; 所有小写

数组类型（与python列表相似）浏览器

第一种建立方式： var list1 = new Array() list1[0] = 1 list1[2] = 2 第二种建立方式： var list2 = new Array('我','你') 第三种建立方式： var list3 = ['你','我','她'] list3.length 数组的长度 list3.push('aaa') 尾部追加参数 list3.shift() 头部获取一个元素 并删除该元素 list3.pop() 尾部获取一个元素 并删除该元素 list3.unshift('dsx') 头部插入一个元素 list3.splice(start,deleteCount,value) 插入、删除或替换数组的元素 list3.splice(1,0,'aa') 指定位置插入元素 list3.splice(1,1,'aa') 指定位置替换元素 list3.splice(1,1） 指定位置删除元素 list3.slice(0,2) 切片，顾头不顾尾 list3.reverse 反转 list.join('-') 将数组根据分隔符拼接成字符串 list.concat([1,2]) 数组与数组拼接 list.sort() 排序

对象类型（等同于python的字典）函数

var dict = {name:'dsx',age:18,sex:'男' }; var age = dict['age'] 赋值 var name = dict.name 赋值 delete dict['name'] 删除 delete dict.age 删除

JS条件判断语句this

if(1==2){ console.log(111111111) }else if(2==2){ console.log(22222222) }else{ console.log('最后了！') } ============================================================== if('1'===1){ //三个等号校验数据类型，两个等号则不判断数据类型
        console.log(1111111) }else{ console.log(222222) } ============================================================== switch (2){ case 1: console.log(11111); break; case 2: console.log(22222); break; default: console.log(33333333) }

JS循环语句spa

  //循环字符串
      var name = 'dsx nhy'; for(var a in name){ console.log(name[a]); } //循环数组
      var car = ['宝马', '奔驰', '尼桑']; for (var i in car){ console.log(car[i]) } //循环字典，不支持字典k,v一块儿循环
      var dict = {'宝马': 'BMW', '奔驰': 'BC'}; for(var d in dict){ console.log(dict[d]) }

    //只能循环列表和字符串，不支持字典循环
      for(var i=0;i<=car.length;i++){
         console.log(i)
      }

      //死循环，与python相同
      while(1==1){
         console.log(11111111)
      }

JS中函数的使用

 1.普通函数
 function f(name,age){ console.log(name); console.log(age) } f('dsx',18)

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div><input type="button" value="点我" onclick="demo()"> </div>

<div><input type="text" name="username" > </div>

  <script> 
 function demo() { 
 alter('点我时弹出的！');
 } 
  </script> 
</body> 
</html>

2.匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div><input id="i2" type="button" value="一键输入用户名" > </div>

<div><input type="text" name="username" > </div>

<script>
     //匿名绑定函数
        var demo = document.getElementById('i1')
        demo.onclick = function(){
            demo.parentElement.nextElementSibling.firstElementChild.value='JS_test';
        };
</script>
</body>
</html>

3.自执行函数 (function () { console.log('自执行函数！') })()

面向对象

 function f(name) { this.name = name;//this代指本类
        this.say = function () { console.log('say--->'+this.name); } } var obj = new f('dsx'); obj.say(); console.log(obj.name);