day04-JavaScript01
JavaScript01[*]官方文档 http://www.w3school.com.cn/js/index.asp
[*]基本说明:
JavaScript能改变html内容,能改变html属性,能改变html样式(css),能完成页面的数据验证。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js开关灯</title>
</head>
<body>
<h2>JavaScript 能做什么?</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中,JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='../imgs/eg_bulbon.gif'">开 灯</button>
<img id="myImage" border="0" src="https://www.cnblogs.com/../imgs/eg_bulboff.gif" >
<button onclick="document.getElementById('myImage').src='https://www.cnblogs.com/../imgs/eg_bulboff.gif'">关 灯</button>
</body>
</html>https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030165559802.png https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030165617791.png
1.JavaScript特点
[*]JavaScript是一种解释性的脚本语言,c、c++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释
[*]JavaScript是一种基于对象的脚本语言,可以创建对象,也能使用现有的对象
[*]JavaScript是弱类型的,对变量的数据类型不做严格的要求,变量的数据类型在运行过程中可以变化
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript是弱类型的</title>
</head>
<body>
</body>
</html>https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030172012262.png2.JavaScript快速入门
[*]使用方式1:script标签写js代码
[*]使用方式2:使用script标签引入js文件
注:两种使用方式不能混用,如果混用了就只有引用的js文件生效
使用方式1:script标签写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script标签中写JS代码</title>
</head>
<body>
</body>
</html>https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030173039367.png使用方式2:使用script标签引入js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用script标签引入js文件</title>
</head>
<body>
</body>
</html>alert("今日天气降温了");https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030173439694.png例子:两种使用方式不能混用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种使用方式不能混用</title>
</head>
<body>
</body>
</html>alert("今日天气降温了");https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030174317627.png3.查看js错误信息
[*]执行js,火狐浏览器如何查看错误信息
进入到调试器(ctrl+shift+i或者f12)就可以看到错误提示
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030175258426.png
点击控制台右边的error信息就可以定位错误
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030175402987.png
[*]执行js,Chrome浏览器如何查看错误信息
进入到调试器(快捷键同上),到控制台查看错误信息,error信息即可定位错误位置
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030175742771.pnghttps://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030175751271.png
4.JavaScript变量
[*]JavaScript变量表示存储数据的容器
与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)
[*]变量必须以字母开头
[*]变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
[*]变量名称对大小写敏感(y 和 Y 是不同的变量)
JavaScript 语句和 JavaScript 变量都对大小写敏感
[*]声明(创建)JavaScript变量
在 JavaScript 中创建变量通常称为"声明"变量。
我们使用 var 关键词来声明变量(但是不使用var声明也不会报错,建议使用var)
5.JavaScript数据类型
[*]数据类型介绍
JavaScript常用的数据类型如下:
[*]数值类型 number
[*]字符串类型 string
[*]对象类型 object
[*]布尔类型 boolean
[*]函数类型 function
[*]特殊值
[*]undefined 变量未赋初始值时,默认undefined
[*]null 空值
[*]NaN Not a Number 非数值
[*]数据类型注意事项
String字符串可以双括号括起来,也可以单括号括起来
例子:特殊值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型-特殊值</title>
</head>
<body>
</body>
</html>https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030182450774.png6.运算符(常用)
JavaScript 运算符 (w3school.com.cn)
6.1算术运算符
[*]算术运算符用于执行变量与或值之间的算术运算
[*]y等于5,下面的表格解释类这些算术运算符
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030183303818.png
6.2赋值运算符
[*]赋值运算符用于给JavaScript变量赋值
[*]给定x=10和y=5,下面的表格解释了赋值运算符
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030183214606.png
6.3关系运算符
[*]关系(比较)运算符在逻辑语句中使用,以测定变量或值是否相等
[*]给定x=5,下面的表格解释了比较运算符
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030183351541.png
例子:关系运算符之全等 ===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系运算符</title>
</head>
<body>
</body>
</html>https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030184753485.png6.4逻辑运算符
[*]逻辑运算符用于测定变量或值之间的逻辑
[*]给定x=6以及y=3,下表解释了逻辑运算符
https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030184959024.png
[*]逻辑运算符注意事项和细节
[*]在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用
[*]0,null,undefined,""(空串)都认为是false
[*]&&且运算有两种情况:(即&&返回值是遵守短路与的机制)
[*]当表达式全为真时,返回最后一个表达式的值
[*]当表达式中,有一个为假的时候,返回第一个为假的表达式的值
[*]||或运算,有两种情况:(即||返回值是遵守短路或的机制)
[*]当表达式全为假的时候,返回最后一个表达式的值
[*]只要有一个表达式为真,就会返回第一个为真的表达式
[*]&&运算和||运算有短路现象
短路现象:当这个&&||运算有确定结果后,后面的表达式不再执行
例子:逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符注意事项和使用细节</title>
</head>
<body>
</body>
</html>6.5条件运算符
JavaScript还可以使用类似 Java的三元运算符
如果条件表达式为true,就返回第一个表达式的值;如果表达式为false,就返回第二个表达式的值
例子:条件运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件运算符</title>
</head>
<body>
</body>
</html>7.数组
7.1数组定义
在JavaScript中,数组的定义有四种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组定义</title>
</head>
<body>
</body>
</html>https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030195954451.png7.2数组遍历
数组的类型是Object对象,具有length等属性,因此也能像 java一样,使用 for循环进行遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组遍历</title>
</head>
<body>
</body>
</html>https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20221030200804235.png
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页:
[1]