JS 笔记及案例
一、Javascript简介
1.什么是Javascript
Javascript简称JS,由网景公司开发的客户端脚本语言,不需要编译,可以直接运行
web前端三层:
- 结构层HTML,定义页面的结构
- 样式层css,定义页面的样式
- 行为层Javascript用来实现交互,提升用户的体验
2.Javascript的作用
- 在客户端浏览器上动态的操作页面
- 在客户端浏览器上做数据的校验
- 可以在客户端上发送异步请求
二、引用方式
1.内联方式
在页面中使用script标签,在script标签中编写js代码
script可以放在页面的任意位置,一般放在头部
<script>
js代码
</script>
2.行内方式
在普通标签中编写js代码,一般需要结合事件的属性,如onclick、onmouseover等
提示:什么是事件属性?----面向对象
eg:对象—外观修饰—css实现
行为、事件—某一事件发生的对象不一样,所引发的反应也不会相同----对象的多态性
3.外联方式(外部方式)
使用单独的.js
方式定义,然后再页面中使用script标签引用外部脚本文件
<!--2.行内方式-->
<input type="button" value="点我" onclick=alert("被点击了,晕了")>
<!--<a href="" onclick="alert('超链接被触发')"></a>-->
<a href="javascript:alert('超链接被触发')">超链接</a>
<div onmouseover="alert('走开')">把鼠标移上来</div>
注意:如果某个script标签用于引用外部js文件,则读script标签的标签体中不能写js带码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<!--1.内联方式-->
<script>
// alert("hello script")
</script>
<!--3.外部方式-->
<script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
第一个Javascript程序
<hr>
<!--2.行内方式-->
<input type="button" value="点我" onclick=alert("被点击了,晕了")>
<!--<a href="" onclick="alert('超链接被触发')"></a>-->
<a href="javascript:alert('超链接被触发')">超链接</a>
<div onmouseover="alert('走开')">把鼠标移上来</div>
</body>
</html>
效果图:
三、基本语法
1.变量
变量是用来存储常量的量
常量就是固定值 --常数项
这是一门弱类型语言,声明变量时使用var关键字,不需要指定变量的类型
语法:var
变量名=常量或表达式
在ECMAscript 6规范中新增let关键字,也用于声明变量
使用let
声明变量支持块级作用域,而使用var声明的变量不支持块级作用域
注:在ECMA中配置ES版本 settings–language&frameworks–JavaScript-- language version
变量的命名规则:
- 有字母、数字、下划线、汉字组成
- 由字母、下划线开头
- 不能和系统关键字重名
- 区分大小写
了解:变量名的命名;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var name; //定义了一个变量name
name="any"; //将字符串常量any赋值给变量name
name="alice"
// alert(name);
var age=18; //定义了一个变量age,并将整数18常量赋值给age
//age是一个整型变量
// alert(age);
var sex="female" //强烈不建议
// alert(sex)
{
var x=8;
// alert(x);
let y=7;
// alert(y);
}
// alert(x);
// 姓名="anny";
// alert(姓名);
age="18";
Age="5";
alert(Age);
</script>
</head>
<body>
效果图:
输入和输出
输出:
- alert() 弹出警告窗
- console.log() 输出到浏览器的控制台
- document.write() 输出到页面
输入:
- prompt()弹出输入框,获取用户输入的数据
使用typeof变量判断变量的类型
使用number(变量)将字符串转换为数值
3.转义字符
常用转义符:
\n
换行\t
向右缩进一个制表位\"
双引号\'
单引号\\ \
斜杠
4.注释
单行注释 //
多行注释 /* 注释内容 */
5.编码规范
代码是区分大小写的
每条语句以分号结尾
代码要注意缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
<!--输出-->
// alert("嘿嘿");
// console.log("哈哈");
// document.write("嘻嘻");
// 输入
// var name=prompt("请输入姓名");
// console.log(name);
// var age=prompt("请输入你的年龄");
// console.log(age,age+2,typeof age);
// age = Number(age);
// console.log(age,typeof age);
// console.log(age+2);
//转义字符
console.log("he\'llo\n.world");
</script>
</head>
<body>
</body>
</html>
效果图:
四、核心语法
1.数据类型
常量:具体值,不变的量—常数项
变量:变化的量,存储常量的量
基础数据类型:
- string字符串
- number数值(NaN表示非数字Not a Number 类型,表示数值的不正常状态)
- Boolean 布尔
- null空类型
- underfined 未定义类型
- 转换number
使用number()、parselnt()、persefloat()
- 转换为字符串
拼接空字符串
- 转换为布尔Boolean
使用Boolean()
注意:0、空字符串、null、underfined、NaN会被转换为
false,其他被转为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var name = "tom";
var age = 18;
var height=165;
var flog = true;
var hobby=null;
var date = new Date();
var arr = new Array();
var sex;
// console.log(typeof name);
// console.log(typeof age);
// console.log(typeof height);
// console.log("hello"-5); //返回了一个NaN表示非数字类型
// console.log(typeof flog);
// console.log(typeof hobby);
// console.log(typeof date);
// console.log(typeof arr);
// console.log(typeof sex);
/*
类型转换
*/
//1. 转换为number
var a = '12';
// console.log(a,typeof a);
//方式1:使用number
// a = Number(a);
// console.log(a,typeof a);
// a = Number('12.5');
// a = Number('12abc');
// a = Number('abc12');
//方式2 parsenint()
// a = parseInt('12'');
// a = parseInt('12.5'); //转换时去掉小数部分
// a = parseInt('12abc'); //按照字符的顺序一次解析
// a = parseInt('abc12');
//方式3 parsefloat();
// a = parseFloat('12');
// a = parseFloat('12.5');
// a = parseFloat('12abc');
// a = parseFloat('abc12');
// var a =12;
//
// console.log(a, typeof a);
// a = a+''; //后接一个空字符串
// console.log(a,typeof a);
//转换为布尔
// var a;
// a = Number(false); //true用1或非0表示,false用0表示
// console.log(a,typeof a);
//转换为布尔
// var a = Boolean(0);
// var a = Boolean(null);
// var a = Boolean(undefined);
// var a = Boolean(NaN);
// var a = Boolean(4);
var a = Boolean('tom');
var name;
name = 'tom';
if(name){
console.log(name)
}
// console.log(a,typeof a);
</script>
</head>
<body>
</body>
</html>
2.运算符
算术运算符:+、-、*、/、%取余、**乘方、++、–
比较运算符:>、>=、<、<=、、=、!=不等于
赋值运算符:=、+=、-=、*=、/=、%=
逻辑运算符:&&并且、||或者、!非
条件运算符:条件?表达式1:表达式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
算术运算符:+、-、*、/、%取余、**乘方、++、--
比较运算符:>、>=、<、<=、==、===、!=不等于
赋值运算符:=、+=、-=、*=、/=、%=
逻辑运算符:&&并且、||或者、!非
条件运算符:条件?表达式1:表达式2
*/
//1.算术运算符
// var a = 5;
// var b = 3;
// var c = '2';
// var d = false;
// console.log(a+b);
// console.log(a-b);
// console.log(a*b);
// console.log(a/b);
// console.log(a%b);
// console.log(a**b); //a的b次方
// console.log(a-c); //当变量c为数字字符,会自动将数字字符转换为数值
// console.log(a+d);
// var a = 1;
// console.log(a++); //先使用a中的值再自加,在原值的基础上再自加,表达式返回变化前a的值,a=a+1;
// console.log(a--);
// console.log(++a); //先自加,再返回值
// console.log(a); //自加自减表达式执行完a的值是多少
//2.比较运算符
// var a = 1;
// var b = true;
// console.log(a>b);
// console.log(a<b);
// console.log(a>=b);
// console.log(a<=b); //返回值是布尔值
// console.log(a==b); //判断a和b的值是否相等 只判断a和b的内容是否相等
// console.log(a===b); //全等于,既判断内容又判断类型
// console.log(a+b);
// console.log(a===b); //在js中true表示1,false表示0
//3.赋值运算符
// var a = 8;
// a += 2; //a = a + 2;
// a -= 2; //a = a - 2;
// console.log(a);
//4.逻辑运算符
var x = true;
var y = false;
// console.log(x && y);//两边为真才为真,一边为假就是假
// console.log(x || y); //两边为假才是假,一边为真就是真
//逻辑运算的短路问题
a = 20;
b = 5;
console.log(a && b); //0--false
console.log(a || b);
//5.条件运算符
console.log(a>b?a+b:a-b);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//使用math对象来进行数学运算,用法,Math,方法名
console.log(Math.abs(-5));
//2.幂运算
console.log(Math.pow(2,4));
//3.四舍五入
console.log(Math.round(132.745)); //在js中不可以指定四舍五入到第几位
//4.向上取整,向下取整
console.log(Math.ceil(3.5));//取大于等于3.5的最小整数
console.log(Math.floor(3.5));//取小于等于3.5的最大整数
//5.生成一个[0,0.1]之间随机浮点数
console.log(Math.random()); //以当前系统时间为随机数种子
//6.最大值,最小值
console.log(Math.max(23,25,57,56));
console.log(Math.min(23,25,57,56));
//7.圆周率的值
console.log(Math.PI);
</script>
</head>
<body>
</body>
</html>
3.选择结构
if…else、switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var age=25;
if(age>60)
{
console.log('老年');
}
else if(age>30)
{
console.log('中年');
}
else
{
console.log('青年')
}
var day = '周五';
switch (day){
case'周一':
console.log('吃包子');
break;
case'周二':
console.log('吃饺子');
break;
case'周三':
console.log('吃油条');
break;
case'周四':
console.log('吃面条');
break;
case'周五':
console.log('吃油饼');
break;
default:
console.log('不吃了');
break;
}
</script>
</head>
<body>
</body>
</html>
4.循环结构
while、do…while、for、for…in
break、continue
break:推出整个循环
continue:结束本次循环,返回到条件判断处继续进行下一次执行循环的条件判断
var str ='welcome';//将字符串看作是由多个字符组成的集合
for(var index in str)
{
// console.log(index);//输出了str索引
//console.log(str[index]);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//while
var i = 1;
var sum = 0;
while (i<=100)
{
sum+=1;
i++;
}
console.log(sum);
//do..while
var i = 1;
var sum = 0;
do
{
sum+=1;
i++;
}while (i<=101);
console.log(sum);
//for
var sum=0;
for(i = 1;i<=100;i++)
if(i%7==0);
sum+=i;
console.log(sum);
//for...in
// var str='welcome;'//可以将字符串看成由多个字符组成的集合
// for(var index in str);
{
// console.log(c); //输出了str的索引
// console.log(str[index]);
}
// s = 'abc';
// document.write(s[0]);
// document.write(s[1]);
// document.write(s[2]);
//
//break
for(var i =1;i<=10;i++)
{
if(i%2==0)
continue;
console.log(i);
}
</script>
</head>
<body>
5.数组
5.1定义方式
语法:
var arr = new array();
var arr = new array(值一,值2,…);
var arr = [值1,值2…];
注意:
- 数组的长度会自动扩展
- 数组中元素的默认值为undefined
- 使用length属性来获取数组的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// var arr = Array();
// arr[0]=12;
// arr[1]=23;
// //……
// console.log(arr.length);
// console.log(arr[0]);
// console.log(arr[1]);
// var arr = new Array('tom','anny','alice');
// console.log(arr);
// console.log(arr[2]);
// console.log(arr[arr.length-1]);
// var arr = ['tom','jack','alice','anny'];
// console.log(arr[0]);
// console.log(arr[arr.length-1]);
//将1-100之间所有能被3整除的数字放到数组number中,输出这个数组并统计个数
// var arr = [];
// for(var i=1;i<=100;i++)
// if(i%3==0)
// arr[arr.length]=i;
// console.log(arr);
// var arr = ['anny','alice','tom']
// var arr = [24,32,27,59,19];
// console.log(arr);
// arr.sort();
// console.log(arr);
var arr = ['anny','alice','tom','jack','alice']
console.log(arr);
// arr.reverse();
// arr.join();
// console.log(arr.join());
console.log(arr.indexOf('alice'));
console.log(arr.lastIndexOf('alice'));
console.log(arr.slice(1,4))
console.log(arr.slice(1))
console.log(arr.toString());
</script>
</head>
<body>
</body>
</html>
5.2数组的常用方法
方法 | 描述 |
---|---|
sort() | 排序,默认按字符编码进行升序列,非string类型就自动转换为string可自定义比较规则 |
reverse | 反转,将数组元素倒序排列 |
join | 将数组中的元素使用指定的分隔符练成字符串,默认通过逗号连接 |
indexOf() | 返回指定元素在数组中首次出现的位置 |
slice | 截取数组中缩影从begin到end之间的数组,左闭右开,如果省略到第二个参数,则表示截取到末尾 |
tostring | 将数组转换为字符串 |
5.2二维数组
二维数组可看认为是一个特殊的一维数组,即一维数组中的每个元素又是一个一维数组
var arr = new array();//定义了一个具有m行个元素的特殊的一维数组
arr[0] = new array();//第0行有n个元素
arr[1] = new array();//第一行有n个元素
arr[][]=值;
var arr =[
[值1,值2……]
[值1,值2……]
[值,值2……]
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// var arr = new Array();
// arr[0] = new Array();
// arr[1] = new Array();
// arr[0][0]=15;
// arr[0][1]=9;
// arr[1][0]=10;
// console.log(arr);
var arr = [
[12,56,32],
[27,23,64],
[25,16,39]
]
// console.log(arr[0][1];
for (var i=0;i<=arr.length;i++)
{
//循环输出灭行的4个元素
for(var j=0;j<arr[i].length;j++)
document.write(arr[i][j]+' ');
//输出每行的换行
document.write('<br>')
}
</script>
</head>
<body>
六、函数
6.1 函数的定义
语法:
function 函数名(参数1,参数2……)
{
函数体;
}
注意:
- 定义函数时,不需要指定函数的参数
- 实参的个数和形参的个数可以不同,未指定实参时形参的默认值为undefined
- 不需要指定返回值的类型,如果有返回值,直接使用return语句返回即可
- 如果函数中没有return语句返回值,则默认返回undefined
变量的作用域:
- 局部作用域
在函数中声明的变量,只能在该函数内访问,函数运行中结束变量会自动销毁
- 全局作用域
在函数外声明的变量,在任何位置都可以访问
- 块级作用域
使用let关键字声明的变量,只能在声明它的代码内访问
6.2回调函数
不立即执行的函数调用,满足一定条件时会执行或者由别的代码调用执行,称为回调函数callback调用时只写函数名,没有小括号和参数
应用:
- 作为时间绑定的函数
- 作为另一个函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
<!--1.定义函数-->
function show()
{
console.log("嘿嘿");
}
function calc(num1,num2,num3)
{
// console.log(num1,num2,num3);//形式参数
var sum = num1 + num2 + num3;
// console.log(sum);
// return sum;
}
//2.调用函数,2个功能 1).返回值 2).执行函数体为目的实现某一功能
// show();
var result = calc(12,6,2,9); //实际参数
// console.log(result);
//3.变量的作用域
// var c = 6; //全局变量
// function fn()
// {
// var a = 5; //局部变量
// console.log(a);
// console.log(c);
//}//定义函数
//fn();//调用函数
function fn()
{
if(true)
{
// var a = 5; //局部变量
let a = 5; //块级变量
console.log(a);
}
console.log(a);
}
fn();
{
var d = 2;
let x = 4