JavaScript简介（认识、入门）
认识JavaScript
JavaScript是一种属于网络的脚本语言，已经被广泛用于web应用开发，常来为网页添加各种各样的动态功能，为用户提供更流畅的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能。
- HTML定义了网页的内容
- CSS渲染了网页的布局和样式
- JavaScript制定了网页的行为
JavaScript是写给浏览器的一门脚本语言，目前所有的浏览器都支持JavaScript
JavaScript是轻量级的一门面向对象的编程语言
不得不提的一件事：JavaScript和java是没有任何关系的！（原名为LiveScript，只是蹭热度改名为JavaScript）
简单使用JavaScript
在HTML中使用JavaScript有两种方式：
- 在HTML中使用< script>< /script>标签，嵌入JavaScript脚本的内嵌式
- 在HTML中使用< script src="" >< /script>标签，引入外部.js文件的外链式
注意：如果使用了外链式，又在该标签内写了js代码，那么标签内的代码不会执行，如果还想在页面中使用内嵌式，再写一个script标签即可。script是一个双标签，即使使用外链式标签中没有内容，也要有结束标签。
<!-- 外链式-->
<script src="../js/js_demo1.js"></script>
<!-- 内嵌式-->
<script>
document.write("hello javaScript")
</script>
语法规则
JavaScript严格区分大小写
JavaScript是弱类型语言。
- 弱类型语言：不是没有类型，而是定义变量时，不需要明确具体的数据类型
JavaScript变量的定义：var 变量名=值
JavaScript中的数据类型：
- 数字类型：number，表示任意数字
- 布尔类型：boolean，可以为true、false
- 字符串类型：string，单引号和双引号都可以声明字符串，因为JavaScript没有字符类型
- 引用类型：object
- 空值：null，表示空，属于object类型
- undefined：表示一个未初始化的变量
使用typeof可以返回变量的真实类型
//定义变量
var num1 = 100;
var num2 = 99.99;
var str = "haha";//单引号双引号都可以用来表示字符串
var flag = true;
document.write(num1+"<br>");
document.write("num1的数据类型是："+typeof(num1)+"<br>");
document.write(num2+"<br>");
document.write("num2的数据类型是："+typeof (num2)+"<br>")
document.write(str+"<br>");
document.write("str的数据类型是："+typeof str+"<br>")
document.write(flag+"<br>")
document.write("flag的数据类型是："+typeof flag+"<br>")
三种输出方式
- window.alert("")，提示框效果显示
- console.log("")，在控制台以日志的方式显示
- document.write("")，直接显示在HTML页面中
var num="哈哈哈";
//输出在弹出的对话框中
window.alert(num);
//输出在页面上（不管script标签写在哪，该输出的语句都在body标签内）
document.write(num);
//输出在浏览器控制台中
console.log("日志信息");
console.warn("警告信息");
console.error("错误信息");
知识点
运算符中存在一个 === 。
=表示赋值，==表示比较值相等，===表示比较类型和值相等
var str = "100";
var num = 100;
document.write("使用==相等吗？--"+(str==num))
document.write("<br>使用===相等吗？--"+(str===num))
布尔类型的运算中：
- 数字类型非0就是真
- 字符串类型非""（空串）就是真
- 0，null，undefined等都是false
var num1 = 15;
if (num1){
console.log("真的")
}
var str1 = "";
if (str1){
console.log("真的")
}else{
console.log("假的")
}
函数
JavaScript中的函数其实就是方法。但是格式和java中的方法不太相同
function 函数名(参数列表){
方法体
//有返回值就写return，没有就不写
}
特点：
- 函数中不需要声明返回值类型
- 参数列表中的参数不需要指定数据类型
- 不存在java中的重载的概念，只要两个函数的函数名相同，后面的函数就会把前面的函数覆盖掉
- 使用函数时，如果函数需要参数，调用时不传参也不会报错，如果函数不需要参数，调用时传入了参数也不会报错
事件
JavaScript使我们有能力创建动态页面，事件是可以被JavaScript检测到的行为，当事件发生时，就可以动态的做一些事情
事件三要素：
- 事件源：在页面中，用户可以操作的元素都是事件源
- 事件：用户对于事件源作出的行为（比如鼠标点击、悬浮···）
- 监听器：用来监听事件，当事件发生时，就会调用相应的函数处理事件
事件通常和函数配合使用，这样就可以通过发生事件来驱动函数执行，从而根据用户的行为来实现一些动态的效果
事件可以是浏览器的行为，也可以用户的行为
常用事件：
| 事件名 | 说明 |
|---|---|
| onload | 某个页面被完成加载 |
| onsubmit | 表单被提交时（事件源是form表单） |
| onclick | 鼠标单击一个对象 |
| onblur | 鼠标双击一个对象 |
| onfocus | 失去焦点 |
| onchange | 获得焦点（鼠标指针放在元素上，该元素就获得焦点） |
| onkeydown | 对象中的内容被改变 |
| onkeypress | 某个键盘按键被按下 |
| onkeyup | 某个键盘按键被按下或按住 |
| onmousedown | 鼠标按键被按下 |
| onmouseup | 鼠标按键被松开 |
| onmouseover | 鼠标被移动到某个元素上 |
| onmouseout | 鼠标移出某个元素 |
| onmousemove | 鼠标被移动 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
<script>
function clickMethod(){
window.alert("你点击了按钮");
}
function loadMethod(){
window.alert("页面被加载了");
}
function changeMethod(){
window.alert("你修改了文本框的内容")
}
function focusMethod(){
window.alert("文本框获得了焦点")
}
</script>
</head>
<body onload="loadMethod()">
<input type="submit" onclick="clickMethod()" value="按钮">
<input type="text" onchange="changeMethod()" onfocus="focusMethod()">
</body>
</html>
本文地址：https://blog.csdn.net/zxy144/article/details/109554638