JS入门学习

JS

JavaScript是一门解释型的脚本语言，其是弱类型的，对变量的数据类型不做严格的要求，变量的类型可以在运行过程中变化
JavaScript能改变HTML内容，属性，样式

大纲

使用方式
变量
运算符
数组
JS函数
自定义对象
事件
补充

具体案例

使用方式

在script标签中写js代码

script标签即可以写在head里面，也可以写在body里面
推荐写在head部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签</title>
<!--    这里是在<head>部分写的script--><script>var place ="head";console.log(place)</script>
</head>
<body>
<!--这里是在<body>部分写的script-->
<script>var secondPlace ="body"console.log(secondPlace);
</script>
</body>
</html>

执行的顺序是从代码开始自上而下的

使用script标签引入

主HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签引入</title>
<!--    使用script标签引入js文件--><script type="text/javascript" src="myscript.js"></script>
</head>
<body></body>
</html>

引入的js文件，这里名字叫myscript

alert("我是引入的")

两种使用方式不能混用，混用只显示一个的效果(显示先执行的那个的效果)

变量

下面是常见的数据类型
在这里插入图片描述
无论是整数还是小数都是number
无论字符还是字符串都是string类型，这可以使用单引号，也可以使用双引号
下面是特殊值
null:空值
undefined:未赋值
NAN:不能识别的数据类型，不是一个数

运算符

算术运算符

与Java比较类似
在这里插入图片描述

赋值运算符

也是与Java类似
在这里插入图片描述

关系运算符

在这里插入图片描述
这里注意 == 与 === 的区别
== 是比较值
=== 不仅比较值，还比较数据类型
比如 number = 520，number1 = “520”，这两个进行比较时，在 == 会得到true，而在 === 则会得到false

逻辑运算符

在这里插入图片描述
这里有区别

注意：当表示布尔的值是我们的数据类型，则会输出该值，否则输出其代表的布尔值
比如(5 + 20)代表true，其值25，则输出25，而对于(5 < 100)，其代表true，但是其运算结果不为我们的数据类型，所以输出true

条件运算符

和Java的三元运算符类似

数组

数组的定义

首先，在JavaScript里面的数组的元素可以不是同一个类型

<script>// 方式一：直接创建var array1 = [100,"第二个",'第三个'];// 方式二：先声明，再赋值var array2 = [];array2[0] = 100;array2[1] = "第二个";array2[2] = '第三个';// 方式三：var array3 = new Array(100,"第二个",'第三个');// 方式四：var array4 = new Array();array4[0] = 100;array4[1] = "第二个";array4[2] = '第三个';</script>

这里同样采用的是下标访问的方式，在进行赋值时，如果刚刚赋值下标3，接着直接赋值下标6，那么下标4,5的元素会默认是undefined

数组遍历的方式

使用for循环进行遍历
在这里插入图片描述

JS函数

函数是由事件驱动，或者当他被调用时，执行的可重复代码块

函数的定义

方式一：使用function关键字来定义函数
在这里插入图片描述
方式二：将函数赋给变量

使用这种方式，就可以进行变量之间的赋值等处理

调用函数

方式一：直接调用
和Java一样的调用方法
方式二：通过事件进行调用

使用细节

在这里插入图片描述
对于JS中的函数重载会覆盖上一次定义，即不能通过更改形参列表来实现重载，对于有形参的函数在调用时，没有传入对于位置的实参，那么就会把其默认为undefined

小结：
如果形参的个数大于实参的个数，那么会按顺序匹配，而后面多出来的形参会默认为undefined
如果形参的个数小于实参的个数，那么也会按顺序匹配，多出来的实参不管，但是，会把所有的实参全部存入隐形参数arguments

自定义对象

不需要类，直接创建对象
方式一：
在这里插入图片描述
如果访问的一个没有定义过的属性，就会出现变量提升，显示undefined.但是访问一个没有定义的方法，就会报错
方式二：

注意这里要使用,隔开

事件

常见的事件
在这里插入图片描述
事件的分类

在这里插入图片描述

加载完成事件

onload 加载完成事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签</title><script>function say(){alert("使用静态注册");}</script>
</head>
<!--静态注册-->
<body onload="say()"></body>
</html>

使用动态注册，实现加载完成事件
在这里插入图片描述

点击事件

onclick 鼠标点击某个对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签</title><script>function say(){alert("你好使用静态注册");}// 因为程序按照顺序执行，这里还没有创建btn1这个按钮// 不能直接得到，所以要使用window的onload，等到加载完成后再进行动态注册// 使用document 的 getElementById方法，通过id得到对象window.onload = function (){var btn1 = document.getElementById("btn1");btn1.onclick = function (){alert("动态注册成功");}}</script>
</head>
<!--静态注册-->
<body >
<button onclick="say()">静态注册按钮</button>
<button id="btn1" >动态注册按钮</button>
</body>
</html>

失去焦点事件

onblur 当鼠标离开时，触发的事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签</title><script type="text/javascript">
function upperCase(){var name1 = document.getElementById("name1");name1.value = name1.value.toUpperCase();
}
window.onload = function (){var name2 = document.getElementById("name2");name2.onblur = function () {name2.value = name2.value.toUpperCase();}
}</script>
</head>
<!--静态注册-->
<body >
输入英文单词:
<input type="text" id="name1" onblur="upperCase()"/><br>
输入英文单词:
<input type="text" id="name2">
</body>
</html>

内容发生改变事件

onchanged：如果内容发生改变，就执行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签</title><script type="text/javascript">
function mySal() {alert("工资发生变化了~");
}
// 动态注册
window.onload = function (){var sel1 = document.getElementById("sel1");sel1.onchange = function (){alert("女友更替")}
}</script>
</head>
<!--静态注册-->
<body >
你当前的工资水平:
<!--静态注册 onchange 事件-->
<select onchange="mySal()"><option>--工资范围--</option><option>10k以下</option><option>10k-30k</option><option>30k以上</option>
</select><br>
你当前女友是谁:
<!--动态注册-->
<select id="sel1"><option>--女友--</option><option>一号</option><option>二号</option><option>三号</option>
</select>
</body>
</html>

表单提交事件

onsubmit：注册按钮被点击，提交表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签</title><script type="text/javascript">function register(){// 先得到输入的账号，密码var username = document.getElementById("username");var pwd = document.getElementById("pwd");if (username.value == ""||pwd.value == ""){alert("账号和密码不能为空")return false;// 代表不提交}return true;// 代表提交}// 动态注册// 这里onsubmit绑定的函数，会直接把结果返回给onsubmitwindow.onload = function (){var form2 = document.getElementById("form2");form2.onsubmit = function (){if (form2.username.value == "" || form2.pwd.value == ""){alert("账号和密码不能为空，不能提交")return false;}return true;}}</script>
</head>
<body >
<div><!--静态注册--><h1>注册用户</h1>
<!--    这里register()这个方法，返回了真或假，还要再return到onsubmit才行--><form action="test1.html" onsubmit="return register()">u:<input type="text" id="username" name="username"><br>p:<input type="password" id="pwd" name="pwd"><br><input type="submit" value="注册用户"></form>
</div>
<div><h1>注册用户2</h1><form action="test1.html" id="form2">u:<input type="text" name="username"><br>p:<input type="password" name="pwd"><br><input type="submit" value="注册用户"></form>
</div>
</body>
</html>