day15--JavaScript语言

JavaScript

JavaScript是一门单独的编程语言。浏览器内置JavaScript的解释器。

独立的语言,浏览器具有js解释器。

存在与HTML中,在HTML中写JavaScript,存在形式是<script></script>

JavaScript的存在形式

<script type="text/javascript></script>表示JS代码,或者不写直接<script></script>,不能写错

- Head中(第一种存在形式,HTML代码的head中)

    <script>        (1)种表示方式

      //javascript代码

      alert(123);

    </script>

    <script type="text/javascript>            (2)种表示方式

      //javascript代码

      alert(123);

    </script>

  - 保存在文件中,<script src="js文件路径"></script>  (第二种存在形式,js文件里面,使用src引用到HTML中)

    <script>中属性scr的地址可以是网络路径,JS是让网页动起来的。

由于我们总是先让用户看到内容,才让网页动起来,所以JavaScript的代码,放在</body>标签最后面

下面来看两段HTML代码,如下:

(1)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js.js"></script>
</head>
<body>
<h1>限制性JavaScript的文件,然后才会执行HTML代码JS是让页面动起来</h1>
</body>
</html>

此段代码,打开之后,先加载的是<script>中的代码,加载完毕之后,才会加载<HTML>代码,这样肯定是不好的,因为用户经常是先看到内容,然后网页自动加载,这样才有更好的体验,因此<script>的代码要放在<body>标签的后面,如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>限制性JavaScript的文件,然后才会执行HTML代码JS是让页面动起来</h3>
<h3>先加载HTML内容</h3>
<h3>JS代码写在&lt;body&gt;内部的最下面</h3>
<script src="http://wwww"></script>
</body>
</html>

PS:JavaScript文件防止在<body>标签内部的最下方。

    注释:单行注释 //      多行注释:/*      */

    变量

    python: 

    name="alex"

    JavaScript

    name = "alex"                   #声明全局变量

    var name = "eric"             #局部变量,写JavaScript尽量都先声明局部变量

    基本数据类型:(https://www.cnblogs.com/wupeiqi/articles/5602773.html) 

  数字

  1、数字(Number)

     JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。

        转换:

      parseint()    将某值转换为Int,数字,不成功则NaN

      parseFloat()   将某值转换为float类型,不成功则NaN

        特殊值:

      NaN:非数字。可使用 isNaN(num) 来判断。

      Infinity:无穷大。可使用 isFinite(num) 来判断。

   写JS代码:

    - HTML文件中编写

    - 临时,浏览器的终端,console

      字符串 

    a = "alex"

    a.charAt(索引位置)

    a.substring(起始位置,结束位置)

    a.length  获取当前字符串的长度

    a.concat()    字符串拼接  >:a = "alex";   >:a.concat("sb")    >:"alexsb"

    obj.indexof(substring,start)     获取自序列的位置索引

    obj.lastIndexof(substring,start)    从后面获取子序列位置

    obj.slice(start,end)      切片

   列表(数组)

    obj = [11,22,33,44]

    obj.length

    obl.push()                 尾部追加元素

    obj.pop()                  尾部获取一个元素

    obj.unshift(ele)         头部插入元素

    obj.shift()                  头部移除元素

    obj.splice(start,deleteCount,value)插入,删除或替换数组的元素

      obj.splice(n,0,val)    指定位置插入元素

      obj.splice(n,1,val)    指定位置替换元素

      obj.splice(n,1)          指定位置删除元素

    obj.join(sep)                     将数组元素链接起来构建一个字符串 >:obj=[11, 666, 999, 44],   >:obj.join("-")  >:"11-666-999-44"

    obj.concat(va1,va2....)                       连接数组

    obj.sort()                              排序

      字典

    obj = {"k1":"v1","k2":"v2"}

    obj["k1"]                                                   获取字典里面元素的值

dic = {"k1":"v1","k2":"v2"}
{k1: "v1", k2: "v2"}
dic
{k1: "v1", k2: "v2"}
typeof(dic)
"object"
for(var item in dic){console.log(item);} #循环的只是键(即索引)
VM4738: k1
VM4738: k2

   布尔类型

    true

    false

 条件语句

   if(条件) {

    }else  if(条件)  else {} 

比较符号 含义
== 比较值相等
!= 不想等(值不想等)
=== 比较值和类型都相等
!=== 不等于
||
&&

    for循环

1、循环时,循环的元素是索引

  a = [11,22,33,44]

  for(var item in a){

    console.log(item);

  }

  a = [11,22,33,44] 

  for(var item in a){

    console.log(a[item]);

  }

  for(var i=0;i<10;i++){}

循环列表

  for(var i=0;i<a.length;i=i+1){}     循环列表的方法

 定时器:

  setInterval("要执行的代码",时间间隔) -- 一直间隔执行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建一个定时器
//setInterval("alert(123);",5000);
//上面setInterval是设置一个定时器,没5秒出现一个弹框
function f1(){
console.log("百度招人好牛逼,都把广告弄到浏览器上面了,只有程序员才会打开console这个浏览器的地方")
}
setInterval("f1();",)
</script>
</body>
</html>

setInterval("string/function",时间),setInterval是设置间隔时间,执行前面的程序,string/函数,Interval是间隔

 alert()   在浏览器打印消息

console.log():在console处打印。

>:tag = document.getElementById("i1");                  #从网页中所有HTML中查找Id等于("i1")的标签
>:content = tag.innerText #获取标签内部的内容

     函数

function 函数名(参数1,参数2) {

  }

    Dom操作    (https://www.cnblogs.com/wupeiqi/articles/5643298.html)

  1、找到标签

     document.getElementById("id值")              id是唯一的,在HTML中

     document.getElementsByTagName("div")        获取多个元素,数组形式(列表)

     document.getElementsByClassName("c1")       获取多个元素,通过class属性的值(列表)

     a、直接查找

方法 作用
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName  根据class属性获取标签集合
document.getElementsByTagName  根据标签名获取标签集合

     b、间接查找              

获取标签 作用
parentElement //父亲点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
获取节点 作用
parentNode //父节点
childNodes //所有子节点
firstNode //第一个子节点
lastChild //最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling //上一个兄弟节点

   2、操作标签

    a.InnerText

     获取标签中的文本内容

     标签.innerText

     对标签内部的文本进行重新赋值

     标签.innerText = ""

    b.className

     tag.className=》 直接整体做操作

     tag.classList           获取class标签集合

     tag.classList.add("样式名")      添加指定样式

     tag.classList.remove("样式名")     删除指定样式

    ps:

      <div onclick="func();">点我</div>

      <script>

        function func(){

              }

      </script>

下面HTML代码是一个弹框点击出现和消失的实现,如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.c1{
position:fixed;
left:;
top:;
right:;
bottom:;
background-color:black;
opacity:0.6;
z-index:;
}
.c2{
width:500px;
height:400px;
background-color:white;
position:fixed;
left:%;
top:%;
margin-left:-250px;
margin-top:-200px;
z-index:;
}
</style>
</head>
<body style="margin:0;">
<div>
<input type="button" value="添加" onclick="showModel();"/>
<table>
<thead>
<tr>
<th>
主机名
</th>
<th>
端口
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td></td>
</tr>
<tr>
<td>1.1.1.2</td>
<td></td>
</tr>
<tr>
<td>1.1.1.3</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<!--遮罩曾开始-->
<div id="i1" class="c1 hide"></div>
<!-- 遮罩层结束 --> <!-- 弹出框开始 -->
<div id="i2" class="c2 hide">
<p><input type="text" /></p>
<p><input type="text"/></p>
<p>
<input type="button" value="取消" onclick="hideModel();"/>
<input type="button" value="确定" />
</p>
</div>
<!-- 弹出框结束 -->
<script>
function showModel(){
document.getElementById("i1").classList.remove("hide")
document.getElementById("i2").classList.remove("hide")
}
function hideModel(){
document.getElementById("i1").classList.add('hide')
document.getElementById("i2").classList.add('hide')
}
</script>
</body>
</html>

checkbox多选框里面,checked选择是true,未选择是false,可以进行赋值,checked=true或者checked=false

上一篇:Linux系统 Cetos 7 中重置root密码


下一篇:6块300G SCSI RAID5,两块硬盘损坏的数据恢复总结