一、基础语法
JavaScript是用来实现页面交互的一门脚本语言，用于控制网页行为
1.1 引用方式
内部方式 : 直接在HTML页面中使用<script>嵌入js脚本
方式一：在html中，定义js<scipt></script>,推荐写到body后
方式二：将js定义到一个单独的js文件中，通过script标签引入到页面中
<script src="../js/my.js"></script>
外部方式 : 首先单独定义一个js文件, 再通过script将文件引入到HTML页面中
细节1:script是一个双标签
细节2:script如果引入了外部的js文件，标签内编写的js无效
1.2 输出语句
JS三种输出方式
浏览器弹框输出字符
alert("弹窗内容")
2. 输出html内容到页面
document.write("输出内容")
3. 输出到浏览器控制台
console.log("内容")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS三种输出方式</title>
</head>
<body>
</body>
<script>
//1. 浏览器弹框输出字符
alert("调用浏览器，弹框输出内容")
//2. 输出html内容到页面
document.write("输出html内容到页面")
document.write("<b>看看效果</b>")
//3. 输出到浏览器控制台
console.log("输出到浏览器控制台，请按F12找到console频道查看")
</script>
</html>运行效果如图所示：
1.3 变量声明
E6开始，js中用let关键字来声明变量，而且js是一门弱类型语言，变量可以存放不同类型的值
E6开始，js中用const关键字来声明常量，常量的值不能被改变
<script>
// String str = "好好学习";
let str= "好好学习";
console.log(str);/*好好学习*/
// int i = 1314;
let i = 1314;
console.log(i);/*1314*/
// double d = 521.1314;
let d = 521.1314;
console.log(d);/*521.1314*/
d = "你好";
console.log(d); /*你好，任意类型均可修改*/
// boolean b = true;
let b = true;
console.log(b); /*true*/
/*定义常量*/
// final Integer PI = 3.14;
const PI = 3.14;
console.log(PI);
PI = 3.1415926;
console.log(PI);/*报错，因为常量不能被改*/
</script>
1.4 数据类型
string：字符串类型（单引号 双引号）
number：数值类型（整数、小数、NaN）NaN表示出错了
boolean：布尔型
undefined：未定义的 (一般认为undefined表示程序出错)
object： 对象和null
typeof 变量 用于返回当前变量的类型
<script>
//string：字符串类型（单引号 双引号）
let str = "hello";
console.log(typeof str);//typeof用于 返回当前变量的类型，输出str的数据类型
//number：数值类型（整数、小数、NaN）
let num = 3.14;
console.log(typeof num);//返回number
//boolean：布尔型
let bool = false;
console.log(typeof bool);//返回boolean
//undefined：未定义的(一般认为undefined表示程序出错)
let a;
console.log(typeof a);//返回undefined
//object： 对象和null
let date = new Date();
console.log(typeof date);//返回object
console.log(typeof null);//返回object
</script>1.5 运算符
算数运算符： + - * / % ++ --
赋值运算符： = += -= *= /=
比较运算符：> < == (===) != (!==)
逻辑运算符： && || !
三元（目）运算符：条件表达式？为真: 为假
<script>
let a = 10;
let b = "10";
let c = 3;
// 算数运算符
console.log(a+c);//13
a++;
console.log(a);//11
let d = ++a;
console.log(d);//12
console.log(a <= c);//false
console.log(a > b ? a :c);//12
//与Java不同
a = 10;
console.log(a+b);//1010
console.log(a/b);//结果为1 除了+剩余的计算符号，js都是尝试自动转换类型进行算术运算
//比较运算符
console.log(a==c);//false
console.log(a==b);//true "=="判断内容是否相等，不判断类型
console.log(a===b);//false "==="判断内容是否相等，同时判断类型是否相同
</script>
1.6 流程控制
if判断 if (条件表达式) { 代码块; } else if(条件表达式) { 代码块; } else { 代码块; }
switch判断 switch(条件表达式){ case 满足条件1 : 代码块 break; case 满足条件2 : 代码块 break; default: 默认代码块; }
普通for循环 for(let i= 0; i<10; i++){ 需要执行的代码; }
增强for循环** for(let obj of array){ 需要执行的代码; }**
while循环 while (条件表达式) { 需要执行的代码; }
do..while循环 do{ 需要执行的代码; }while(条件表达式);
break和continue
break: 跳出整个循环
continue：跳出本次循环
在js中, 表示真假的表达式有很多种
类型 真 假
boolean true false
number 非0 0
string 非空 空
object 真实对象 null(undefined）
<script>
//1.定义数组
let a = ['甄姬','貂蝉','妲己'];
//2.普通for循环
for(let i=0;i < a.length;i++){
console.log(a[i]);
}
console.log("-----------------")
//3.增强for循环(不需要通过索引访问数组)
for(let item of a){
console.log(item)
}
</script>
二、函数和事件
2.1 函数
语法: function 函数名(形参1, 形参2){ 方法实现 }
调用: 函数名(实参1,实参2)
特点:
形式参数不需要类型，因为Js是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
js中如果出现同名的方法，后面的会覆盖前面的
扩展：另外一种函数声明方法
let funName = function(形参1, 形参2){ 方法实现 }
<script>
//1、定义方法
function add(a,b){
let c = a + b;
return c;
}
//2、定义方法，计算3个数相加
function add(a,b,c){
return a+b+c;
}
//定义方法的方式二：
let add1 = function(a,b,c){
return a+b+c;
}
//3、调用方法
let res = add(10,20);
console.log(res);//NaN,报错，同名方法，下面的方法会覆盖前面的
let res1 = add(10,20,30);
console.log(res1);
let res2 = add1(10,10,10);
console.log(res2);
</script> 
2.2 事件
2.2.1 常见事件
| 事件名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 下拉框值发生改变 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 某个键盘的键被按下 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
2.2.2 事件绑定
事件绑定有两种方式:
1. 通过 HTML标签中的事件属性进行绑定
在html标签中，通过事件=“方法名()”，将标签和js方法绑定到一起
2. 通过 DOM 元素属性绑定
在html标签中，定义一个id
在js代码中，通过js代码完成标签和方法的绑定
<body>
<input type="button" value="按钮1" onclick="on()"> <br>
<input type="button" value="按钮2" id="btn"> <br>
<script>
//方式1：
function on(){
alert("点击了按钮")
}
//方式2：
document.getElementById("btn").onclick = function(){
alert("第二个按钮被点击了")
}
</script>
</body>2.2.3 页面交互案例
需求：
-
当姓名框获得焦点之后,设置其value值为"正在输入"
-
当姓名框失去焦点之后,设置其value值为"请输入"
-
当学历发生变化的时候,在控制台打印出变化之后的value值
-
当鼠标点击按钮时,弹窗显示被点击了
-
将js代码调整到页面的head部分,使其依旧可以运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例：页面交互</title>
<script>
//window.onload 页面加载完成时间, 此事件跟着的方法会再当前页面全部加载完成之后再执行
window.onload = function(){
//1. 当姓名框获得焦点之后,设置其value值为"正在输入"
document.getElementById("username").onfocus = function(){
this.value = "正在输入";
}
//2. 当姓名框失去焦点之后,设置其value值为"请输入"
document.getElementById("username").onblur = function(){
this.value = "请输入";
}
//3. 当学历发生变化的时候,在控制台打印出变化之后的value值
document.getElementById("edu").onblur = function(){
console.log(this.value);
}
//4. 当鼠标点击按钮时,弹窗显示被点击了
document.getElementById("btn").onclick = function(){
alert("被点击了");
}
//5. 将js代码调整到页面的head部分,使其依旧可以运行
}
</script>
<!--
常用事件:
1. onfocus 获取焦点
2. onblur 失去焦点
3. onchange 表单控件的值改变时
4. onclick 鼠标单击
5. onload 页面加载完成
-->
</head>
<body>
姓名 <input type="text" id="username"><br/>
学历
<select name="edu" id="edu">
<option value="0">请选择</option>
<option value="1">本科</option>
<option value="2">大专</option>
</select>
<br/>
<button id="btn">按钮</button>
</body>
</html>
需求1~4的另一种实现方式:
<script>
//1. 当姓名框获得焦点之后,设置其value值为"正在输入"
function of(){
document.getElementById("username").value = "正在输入";
}
//2. 当姓名框失去焦点之后,设置其value值为"请输入"
function ob(){
document.getElementById("username").value = "请输入";
}
//3. 当学历发生变化的时候,在控制台打印出变化之后的value值
function oc(){
console.log(document.getElementById("edu").value);
}
//4. 当鼠标点击按钮时,弹窗显示被点击了
function oc1(){
alert("被点击了")
}
</script>
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
