目录
1、JavaScript概述
- JavaScript是一种运行在网页中的直译式脚本语言，用来为网页添加各式各样的动态功能 （javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行（通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的），简称“JS”
- JavaScript是一种事件驱动型语言，依靠事件去驱动，然后执行相应的程序。其目的就是增强Web客户交互。
2、JavaScript作用
- 响应客户端鼠标和键盘事件
- 客户端页面表单数据验证
- 使用JavaScript动态改变页面标签的样式
- 另外JavaScript是严格区分大小写的
3、JavaScript基本语法
3.1、标签引用
javaScript脚本写在一组<script>（代表脚本块）标签中，此标签可以放在<head>或<body>中，一般习惯放在head中，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件
- <script>引用：
<script>
alert("Hello JavaScript");
</script>- .JS文件引用：我是用的是“new_file.html ”文件
<script src="js/new_file.js"></script>- 普通标签引用
<input type="button" value="hello" onclick="window.alert('Hello JavaScript')"/>3.2、内容输出
JavaScript的内容输出主要有以下几种：
（1）、web网页提示框
<script>
alert("Hello JavaScript");
</script>（2）、控制台输出
<script>
console.log("Hello JavaScript")
</script>3.3、文本注释
- 单行注释 ： / / 注释内容
- 多行注释 ：/* 注释内容*/
3.4、数据类型
JavaScript支持的数据类型主要有六种：
- 数值型(number)： 其中包括整型数和浮点型数。
- 布尔型(boolean)： 即逻辑值，true或flase。
- 字符串型(String)： 由单个或多个文本字符组成，用单引号或双引号来说明的（使用单引号来输入包含引号的字符串。）
- undefined类型：在JS当中，当一个变量没有手动赋值时，系统会默认为undefined类型
- Object类型
- null类型
3.5、变量声明
- 变量分为局部变量与全局变量
- 声明变量用var关键字,例如: var name;
- 声明变量的同时对其赋值 :var test=“Hello JavaScript”;
- NAN：是一个具体存在的值，该值标识不是数字，Not a Number
全局变量：
- 在函数体之外声明的变量，其生命周期是：当浏览器打开时声明，关闭时销毁，耗费资源，使用较少
局部变量：
- 在函数体当中声明变量，函数开始执行时局部变量的内存空间开辟，函数体执行结束之后，局部变量的内存空间释放，生命周期较短，使用较多
3.6、标识符
- JavaScript中的标识符可以是数字、字母、下划线、美元符号($)
- 标识符不能是关键字和保留字符，且首位不能以数字开始
3.7、字面值
- 字面量实际上就是一些固定的值，JavaScript中的字面值主要有：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，很少使用
3.8、typeof运算符
typeof操作符可以用来检查一个变量的数据类型，返回"String"类型
typeof 数据
<script text="type/script">
function sum(a,b){
if(typeof a == "number" && typeof b == "number"){
return a + b;
}
alert(a + "," + b + "必须都为数字")
}
// 调用sum函数
var retValue = sum(false,"abc");
alert(retValue);
</script>
4、JavaScript中的运算符
4.1、算术运算符
4.2、赋值运算符
4.3、比较运算符
4.4、逻辑运算符
4.5、条件运算符
JavaScript
还包含了基于某些条件对变量进行赋值的条件运算符
- 语法： var result = (条件表达式)?结果1:结果2
5、JavaScript中的控制语句
5.1、选择语句
- 单一选择结构（if）
- 二路选择结构（if/else）
- 多路选择结构（switch）
5.2、循环结构
- 由计数器控制的循环（for）
- 在循环的开头测试表达式（while）
- 在循环的末尾测试表达式（do/while）
- break/continue
6、JavaScript中的函数
JS中的函数相当于java语言当中的方法，函数也是一段重复利用的代码片段
6.1、函数的创建
- 使用 函数对象 来创建一个函数（几乎不用）
var 函数名 = new Function("执行语句");
- 使用 函数声明 来创建一个函数（比较常用）
function 函数名([形参1,形参2,...,形参N]) {
语句...
}
/*
函数名 = function(形式参数列表){
函数体;
}
*/
// 定义函数
say = function(username){
alert("hello" + username);
}
// 调用函数
say("zhangsan");6.2、函数的调用
- 无参函数调用
// 函数声明
var fun = function () {
console.log("执行语句");
}
// 函数调用
fun();
<script type="text/javascript">
function fun(){
alert(“test”);
}
fun();//函数名调用
function fun2(){
fun();//在其他函数中调用
}
</script>- 有参函数调用
// 函数声明
var sum = function (num1, num2) {
var result = num1 + num2;
console.log("num1 + num2 = " + result);
}
// 函数调用
sum(10, 20);
6.3、全局函数
- parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”
- parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”
- typeof (arg)返回arg值的数据类型
- eval(arg) 可运算某个字符
6.4、内置函数
- 在JS中有一个内置的对象叫做windows(浏览器)，其中包含一个对象：alert()
- 用法：windows.alert("消息") ： 弹窗
<input type="button" value="hello" onclick="window.alert('Hello JavaScript')"/>
<input type="button" value="hello" @click="alert('Hello JavaScript')"/>注意： 在JS当中函数的名字若重名，则后生命的函数会将前一个函数覆盖
6.5、回调函数
回调函数特点：函数代码被写出来之后不是自己调用，由其他程序负责调用该函数，称作回调函数
function say(){
alert("hello");
}
<input type = "button" value = "hello" onclick = "say()">7、内置对象
7.1、String字符串属性
constructor属性演示：返回创建字符串对象的原型函数
var str = "JavaScript";
console.log(str.constructor);
length属性演示：可以用来获取字符串的长度
var str = "Hello,JavaScript!";
console.log(str.length);
7.2、String字符串方法
- charAt(n)：返回该字符串位于第n位的单个字符.
- indexOf(char)：返回指定char首次出现的位置.
- lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.
- substring(start,end) ：截取字符串，从start位置到end位置的前一位置的一段.
- substr(start,length) ：截取字符串，该字符串是原字符串从start位置开始，长度为length的一段.
- split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。 例如：'1&2&345&678'.split('&')返回数组1,2,345,678。
- charCodeAt()：该方法获取指定位置字符的字符编码（Unicode编码）
- concat()：该方法可以用来连接两个或多个字符串
8、数组
8.1、数组创建
使用对象创建
- 同类型数组创建
var arr = new Array();
arr[0] = 1;
arr[1] = 2;
....
- 不同类型数组创建
var arr = new Array();
arr[0] = 1;
arr[1] = "2";
......
使用字面量创建
-
同类型数组创建
var arr = [1, 2, 3, 4];
- 不同类型数组创建
var arr = [1, "2", 3, "4"];
8.2、数组遍历
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
8.3、数组属性
- constructor属性返回创建数组对象的原型函数
- length属性设置或返回数组元素的个数
var arr = [1,2,3,4];
console.log(arr.constructor);
console.log(arr.length);
8.4、数组方法
- join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间
- reverse() ：使数组中的元素顺序反转
- sort() ：排列数组中元素的顺序，如果不指定<方法函数>，则按字母顺序排列
sort()对数字排序需要调用排序函数。
function sortNumber(a,b){
return a - b;
}- push()方法：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
var arr = ["陕西", "汉中", "汉台"];
var result = arr.push("勉县", "南郑", "非凡", "国际");
console.log(arr);
console.log(result);
- pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
var arr = ["陕西", "汉中", "汉台"];
var result = arr.pop();
console.log(arr);
console.log(result);
- concat()方法：该方法可连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
var arr = ["陕西", "汉中", "汉台"];
var arr2 = ["新疆", "乌龙木器", "北京"];
var arr3 = ["云南", "西双版纳", "重庆"];
var result = arr.concat(arr2, arr3, "上海", "田径");
console.log(result);
- unshift()方法：该方法向数组开头添加一个或多个元素，并返回新的数组长度
var arr = ["陕西", "汉中", "汉台"];
var result = arr.unshift("非凡", "省事");
console.log(arr);
console.log(result);
- shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
var arr = ["陕西", "汉中", "汉台"];
var result = arr.shift();
console.log(arr);
console.log(result);
9、日期对象
- new Date() 返回当日的日期和时间
- getFullYear() 返回四位数字年份
- getDate() 返回一个月中的某一天 (1 ~ 31)
- getMonth() 返回月份 (0 ~ 11)
- getDay() 返回一周中的某一天 (0 ~ 6)
- getHours() 返回 Date 对象的小时 (0 ~ 23)
- getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
- getSeconds() 返回 Date 对象的秒数 (0 ~ 59))
10、Math对象
Math 对象，提供对数据的数学计算。
- 属性 ：PI 返回π（3.1415926535...)。
Math方法
- Math.abs(x) 绝对值计算；
- Math.pow(x,y) 数的幂；x的y次幂
- Math.sqrt(x) 计算平方根；
- Math.ceil(x) 对一个数进行上舍入
- Math.floor(x) 对一个数进行下舍入。
- Math.round(x) 把一个数四舍五入为最接近的整数
- Math.random() 返回 0 ~ 1 之间的随机数
- Math.max(x,y) 返回 x 和 y 中的最大值
- Math.min(x,y) 返回 x 和 y 中的最小值
11、常用事件
- onclick()鼠标点击时；
- onblur()标签失去焦点;
- onfocus()标签获得焦点;
- onmouseover()鼠标被移到某标签之上;
- onmouseout()鼠标从某标签移开;
- onload()是在网页加载完毕后触发相应的的事件处理程序;
- onchange()是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
12、JavaScript Dom
12.1、Dom概述
DOM是Document Object Model文档对象（网页中的标签）模型的缩写，当网页被加载时，浏览器会
创建页面的文档对象模型（
Document
Object
Model），
通过html dom，可用javaScript操作html文档的所有标签
作用:
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能对页面中的 HTML 事件作出反应
- JavaScript : 为网页添加各种动态效果(标签内容改变,标签样式)为网页添加动态效果,本质上就是在js中对网页中标签进行操作
12.2、查找元素
在js中获得网页中的标签：在js中认为每一个网页中的标签就是一个对象,要操作网页中的标签,就需要获得标签：通过一个document对象()， document:文档对象,表示当前的网页文档
有四种方法来做这件事：
- 通过 id 找到 HTML 标签 document.getElementById(“id");
- 通过标签名找到 HTML 标签 document.getElementsByTagName("p");
- 通过类名找到 HTML 标签 document.getElementsByClassName("p");
- 通过name找到 HTML 标签 document.getElementsByName(“name");
12.3、改变HTML
Html dom允许javaScript 改变html标签的内容。
改变 HTML 标签的属性
- document.getElementById(“username").value=“new value";
- document.getElementById("image").src=“new.jpg";
修改 HTML 内容的最简单的方法时使用 innerHTML 属性
- document.getElementById(“div”).innerHTML=new HTML
12.4、改变HTML-CSS
html dom允许 javaScript改变html标签的样式。
- 语法： document.getElementById("id").style.property=new style;
例：
document.getElementById("p2").style.backgroundImage="url(bg.jpg)";12.5、计时事件
通过使用
JavaScript
，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
方法
:
- setTimeout(“函数”,”时间”)：未来的某时执行代码
- clearTimeout()：取消setTimeout()
- setInterval(“函数”,”时间”)：每隔指定时间重复调用
- clearInterval()：取消setInterval()
关于JavaScript运用的一个简单例子：计时器与网页秒表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.bottom_box {
width: 300px;
height: 400px;
background-color: white;
margin: 0 auto;
}
.dialpate {
float: left;
width: 200px;
height: 300px;
background-color: pink;
border-radius: 20px;
margin: 20px 50px;
}
.show,
.showRecord {
width: 100px;
height: 30px;
margin: 15px 50px;
line-height: 30px;
text-align: center;
font-size: 18px;
font-family: black;
border-radius: 50px;
background-color: lightpink;
}
.key1 {
width: 80px;
height: 40px;
border-radius: 50px;
border: 1px;
background-color: #FFD1A4;
margin: 30px 8px 0px 8px;
}
.key2 {
width: 80px;
height: 40px;
background-color: #FFD1A4;
border-radius: 50px;
border: 1px;
margin: 10px 8px;
}
.showTime {
width: 300px;
height: 50px;
background-color: white;
margin: 20px auto 0px;
}
.showArea {
width: 200px;
height: 30px;
margin: 7px 50px;
line-height: 30px;
text-align: center;
font-size: 18px;
color: white;
font-family: black;
border-radius: 10px;
background-color: yellowgreen;
}
.key1:hover {
color: red;
}
.key2:hover {
color: red;
}
</style>
<script>
// 获取日期对象
var str = 0;
var hour = 0;
var minutes = 0;
var seconds = 0;
var millisecond = 0;
function startCount() {
millisecond += 50;
if (millisecond >= 1000) {
millisecond = 0;
seconds += 1;
}
if (seconds >= 60) {
seconds = 0;
minutes += 1;
}
if (minutes >= 60) {
hour += 1;
minutes = 0;
}
document.getElementById("disabledId").innerHTML = hour + ":" + minutes + ":" + seconds + ":" + millisecond
}
var startB;
function startButtom(str) {
if (str.value == "开始") {
startB = setInterval("startCount()", 50);
str.value = "停止"
} else {
clearInterval(startB);
str.value = "开始"
}
}
function restButtom() {
clearInterval(str);
hour = 0;
minutes = 0;
seconds = 0;
millisecond = '000';
document.getElementById("disabledId").innerHTML = hour + ":" + minutes + ":" + seconds + ":" + millisecond;
recordText = document.getElementById("recordId").innerHTML = hour + ":" + minutes + ":" + seconds + ":" +
millisecond;
}
function RecordCount() {
recordText = document.getElementById("recordId").innerHTML = hour + ":" + minutes + ":" + seconds + ":" +
millisecond;
}
function timeArea() {
console.log(11)
var date = new Date();
document.getElementById("showTimeId").innerHTML = date.getFullYear() + "-" + (date.getMonth() + 1) + "." + (date
.getDay() + 24) + "-" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}
setInterval("timeArea()", 1000)
</script>
</head>
<body onload="timeArea()">
<div class="bottom_box">
<div class="showTime">
<textarea id="showTimeId" class="showArea" disabled></textarea>
</div>
<div class="dialpate">
<textarea id="disabledId" class="show" disabled>00:00:00:00</textarea>
<textarea id="recordId" class="showRecord" disabled></textarea>
<input type="button" value="开始" class="key1" onclick="startButtom(this)">
<input type="button" value="记数" class="key2" onclick="RecordCount()">
<input type="button" value="清零" class="key2" onclick="restButtom()">
</div>
</div>
</body>
</html>接货
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
