文章目录
- 一. JavaScript介绍
- 二. JavaScript的引入方式
- 三. JavaScript的变量与数据类型
- 四. JavaScript中的函数
- 五. JavaScript变量的作用域
- 六. JavaScript运算符
- 七. JavaScript判断语句
- 八. JavaScript数组
- 九. JavaScript循环语句
- 十. JavaScript获取页面标签
- 十一. JavaScript操作页面标签的属性
- 十二. 定时器
- 十三. JAvaScript的对象
一. JavaScript介绍
- 定义: 运行在浏览器端的脚本语言
- 作用: 行为标准, 负责和用户的交互
- 使用场景: 需要和用户交互时
二. JavaScript的引入方式
三. JavaScript的变量与数据类型
int float str bool list tuple set dict 自定义类(对象)
语言的强弱: 可以查看不同数据类型之间的变量是否可以直接进行加法运算
Python: 强类型语言, 字符串 + 数字 会报错
JavaScript: 弱类型语言, 字符串 + 数字 = 字符串
// 定义需要使用关键字 var
// 一行的结尾需要一个分号 ;
// 变量的数据类型由存储的数据值决定
var 变量名 = 数据值;
// 单行注释, 快捷键 Ctrl + /
/*
多行注释
多行注释
*/
// 变量的定义, var 变量名 = 数据值;
// 变量名, 由字母 数字 下划线 $ 组成, 不能以 数字开头, 匈牙利命名风格(开头型简写)
// 1. 数字类型 number
// 1.1 整数 开头简写(i)
var iAge = 10;
// alert(iAge); // 打印数据值
// alert(typeof(iAge)); // typeof(变量) 查看变量的数据类型
console.log(iAge); // console.log() 在浏览器的控制台输出
console.log(typeof(iAge));
// 1.2 小数 开头简写(f)
var fHeight = 174.4;
console.log(fHeight, typeof(fHeight));
// 2. 字符串类型 string
// 开头简写(s)
var sName = 'isaac';
console.log(sName, typeof(sName));
// 3. 布尔类型 boolean 值(true, false)
// 开头简写(b)
var bIsTrue = true;
console.log(bIsTrue, typeof(bIsTrue));
// 4. 未定义的类型 undefined
// object 开头简写(o)
var oA;
console.log(oA, typeof(oA));
// 5. null
var oObject = null;
console.log(oObject, typeof(oObject));
四. JavaScript中的函数
def 函数名(参数):
函数体
return
函数名(参数)
// 函数定义
function 函数名(参数) {
函数体
return
}
// 函数调用
函数名(参数)
五. JavaScript变量的作用域
局部变量, 全局变量
- 在函数内部能否直接读取全局变量的值 ====> 可以直接读取
- 在函数内部能否直接修改全局变量的值 ====> 可以直接修改
- 函数外部能否使用局部变量 ====> 函数外部不能访问局部变量的值
- 在函数内部定义变量, 如果不加 var 变量, 那么定义的变量是全局变量
六. JavaScript运算符
+ - * / % ++ --
a++ —> a = a + 1
a-- —> a = a - 1
+= -= *= /= %=
== 判断值是否相同, 只判断值, 不判断数据类型
=== 判断值和类型是否都相同
!= 不等于
> 大于
>= 大于等于
< 小于
<= 小于等于
&& 逻辑与
|| 逻辑或
! 取反
- () 优先级最高
- 一元运算符 ++ – !
- 算数运算符, 先 * / % 后 + -
- 关系运算符
> >= < <= - 相等运算符 == != ===
- 逻辑运算符 先 && 后||
- 赋值运算符 =
七. JavaScript判断语句
- 单分支
if (判断条件){
条件成立执行的代码
}
- 双分支
if (判断条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
- 多分支
if (判断条件1){
条件1成立时执行的代码
}else if (判断条件2){
条件1不成立, 条件2成立时执行的代码
}else if(判断条件n){
条件n-1不成立,条件n成立执行的代码
}else{
以上条件都不成立,执行的代码
}
八. JavaScript数组
// 1. 数组的定义
// 1.1 使用 Array 类进行创建
var aArray = new Array(1, 2, 'hello');
console.log(aArray, typeof(aArray));
// 1.2 使用自变量方法进行创建
var aList = [1, 2, 3.14, 'isaac', [3, 6, 9]];
console.log(aList, typeof(aList));
// 2. 求数组中元素的个数, 数组的长度, 数组.length属性
console.log('元素的个数为: ', aList.length);
// 3. 数组支持下标操作, 但是没有负数下标
// 访问不存在的下标, 得到的值是 undefined
console.log(aList[0], aList[3], aList[100]);
// 可以通过下标修改数组中的数据
aList[3] = 'hello world';
console.log(aList);
// 直接修改不存在下标值, 在指定的下标位置添加数据, 其余位置为 空 ,使用 empty 来表示
aList[10] = 10;
console.log(aList, typeof(aList));
// 4. 根据数据值, 找到元素在数组中的第一个下标 indexOf
// 找到的话返回元素的下标, 没有找到则返回 -1
console.log(aList.indexOf('hello world'), aLisindexOf(1000));
// 5. 尾部添加和删除
aList.push('lang');
console.log(aList);
aList.pop();
console.log(aList);
// 6. 根据下标, 删除添加数据
// splice(下标, 删除元素的个数, 添加的元素)
aList.splice(2, 3); // 只删除, 不添加
console.log(aList);
aList.splice(2, 0, 3, 4, 5);
console.log(aList); // 只添加, 不删除
aList.splice(2, 2, 'hello', 'world'); // 删除后, 添加
console.log(aList);
九. JavaScript循环语句
// 1. while循环
while (判断条件){
循环中的代码
}
// 2. for 循环
for(表达式1; 表达式2; 表达式3){
循环中的代码
}
// 3. do while 循环, 不管条件是否成立, 至少循环一次
do{
循环代码
}while(判断条件)
十. JavaScript获取页面标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var oDiv = document.getElementById('box');
alert(oDiv + '----' +typeof(oDiv));
}
</script>
</head>
<body>
<div id="box">
这是一个 div
</div>
</body>
</html>
十一. JavaScript操作页面标签的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var oInput = document.getElementById('name');
console.log('标签的name属性为: ', oInput.name);
console.log('标签的class属性为: ', oInput.className);
console.log('标签的value属性为: ', oInput.value);
console.log('标签的style属性为: ', oInput.style.fontSize);
oInput.value = 100;
oInput.name = 'python';
console.log('修改后标签的name属性为: ', oInput.name);
var oDiv = document.getElementById('div1');
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
oDiv.innerHTML = '好好学习'
}
</script>
</head>
<body>
<input type="text" name="aaa" class="box" id="name" value="10" style="font-size: 30px;">
<div id="div1">
<p>
这是一个div
</p>
</div>
</body>
</html>
十二. 定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var oT = null;
function fnClick(){
oT = setInterval(alert, 2000, '好好学习');
}
function fnCalc(){
clearInterval(oT);
}
</script>
</head>
<body>
<div>
<p>点击单次定时器, 3s后弹出 hello</p>
<input type="button" value="单词定时器" onclick="setTimeout(alert, 3000, 'hello')">
</div>
<div>
<p>点击多次定时器, 间隔 2s 弹出好好学习, 点击停止不再弹出</p>
<input type="button" value="多次定时器" onclick="fnClick()">
<input type="button" value="停止" onclick="fnCalc()">
</div>
</body>
</html>
十三. JAvaScript的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var oPersion = new Object();
oPersion.name = 'zhangsan';
oPersion.age = 22;
oPersion.sayName = function(){
alert(this.name);
};
alert(oPersion.age);
oPersion.sayName();
oStudent ={
name: 'lisi',
age: 23,
sayName: function(){
alert(this.name);
}
}
alert(oStudent.age);
oStudent.sayName();
</script>
</head>
<body>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
