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代码写在<body>内部的最下面</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
day15--JavaScript语言的更多相关文章
- <JavaScript语言精粹>-读书笔记(一)
用object.hasOwnProperty(variable)来确定这个属性名是否为该对象成员,还是来自于原型链. for(my in obj){ if(obj.hasOwnProperty(my) ...
- 《JavaScript语言精粹》小记
一.前言 以下内容均摘自<JavaScript语言精粹>一书,本人在读这本书时,发现作者诠释JavaScript很犀利,特别是数组部分,固记录下来,想和大家分享下. 随笔主要包含两大部分: ...
- javascript语言精粹
内容选自:<javascript语言精粹> 1.6种值会为假(==false),分别是false,null,undefined,' ',0,NaN 2.typeof有6种值,分别是'num ...
- 前端学习 第三弹： JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
- Javascript 语言精粹 代码片段合集
Javascript 语言精粹 代码片段合集 标签:Douglas-Crockford Javascript 最佳实践 原文链接 更好的阅读体验 使用一个method 方法定义新方法 Function ...
- (转)JavaScript二：JavaScript语言的基本语法要求
摘自:http://blog.csdn.net/erlian1992 要学习好JavaScript,首先我们要懂JavaScript语言的一些基本语法要求: 一,区分大小写 JavaScript语言区 ...
- JavaScript语言精粹笔记
JavaScript语言精粹笔记 掌握语言的每个特性可以让你出风头,但是并不推荐,因为一部分的特性带来的麻烦可能远超本身的价值.正如书中所言,坏的材料并不能雕刻出好的作品,要成为一名更好的程序员,要取 ...
- 第四章 函数(JavaScript:语言精粹)
函数包含一组语句,用来指定对象的行为,其代码可以用来重复使用. 一般来说,编程就是将一组需求分解成一组函数和数据结构的技能. 概览:函数对象 | 函数字面量 | 调用 | 方法调用模式 | 函 ...
- 《JavaScript语言精粹》之函数化
写在前面 看到好多书评和读书笔记都说<JavaScript语言精粹>字字珠玑,名不虚传..当然,要看得懂才行 其实个人认为函数化部分不是很好,举的例子不是十分恰当,之前看不懂是因为被成功误 ...
- 《JavaScript语言精粹》学习笔记
一.in的用法 for...in 枚举一个对象的所有可枚举属性 检测DOM/BOM属性 if ("onclick" in elem) { // 元素支持onclick } if ( ...
随机推荐
- java AOP使用注解@annotation方式实践
java AOP使用配置项来进行注入实践 AOP实际开发工作比较常用,在此使用注解方式加深对面向切面编程的理解 废话不多少,先看下面的实例代码 场景: 1.未满一岁的小孩,在执行方法之前打印:“ ...
- 转--python之正则入门
原文地址 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法 ...
- python 的正则表达式指北
正则表达式用来拆分字符串 >>> s = 'one1two2three3four4' >>> pattern = re.compile(r'\d+') >&g ...
- 第二节：从程序集的角度分析MemoryCache，并完成基本封装
一. 轻车熟路 有了上一个章节对 System.Web.Caching.Cache 的探究,这里我们按照同样的思路对 MemoryCache 进行探究,相信必定会得心应手. 1. 程序集准备 a. 需 ...
- KVM 部署 日常操作
KVM 安装 条件检测准备:CPU 虚拟化 ,现在物理机都支持. 开启cpu虚拟化 现在至强一般机器都有 cat /proc/cpuinfo |grep flags 需要全虚拟化支持为vmx(Inte ...
- JavaScript之BOM五大对象(window;location;navigator;screen;history)
一.window 1.浏览器窗口与页面各部分尺寸 2.间歇调用与超时调用 setInterval(function,time(以毫秒计)) 返回:时间Id号(为clearInterval(timeId ...
- python队列queue 之优先级队列
import queue as Q def PriorityQueue_int(): que = Q.PriorityQueue() que.put(10) que.put(1) que.put(5) ...
- mysql外键(FOREIGNKEY)使用介绍
原文地址:http://www.2cto.com/database/201501/367791.html 一.基本概念 1.MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种.不 ...
- Problem F Plug It In!
题目链接:https://cn.vjudge.net/contest/245468#problem/F 大意:给你插座和电器的对应关系,有多个电器对应一个插座的情况,但是一个插座只能供一个电器使用,现 ...
- 解决：[DCC Fatal Error] **.dpk : E2202 Required package '***' not found
//[DCC Fatal Error] **.dpk : E2202 Required package '***' not found 意思是:[DCC致命错误] *:e2202需包***没有发现 D ...