JavaScript笔记
一、JavaScript简介
1.什么是JavaScript？
javaScript简称JS.由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行
补充：
机器语言（0,1代码）—汇编语言（助记符）-----高级语言（①解释②编译）
高级语言—>编译.obj目标程序文件—>连接link.exe可执行性文件
解释
WEB前端三层：
- 结构层HTML，定义页面的结构
- 样式层CSS，定义页面的样式
- 行为层JavaScript，用来实现交互，提升用户体验
2.JavaScript作用
- 在客户端动态的操作页面
- 在客户端数据的校验
- 在客户端发送异步请求
二、引用方式
1.内联方式
在页面中使用Script标签，在Script标签的标签体中编写js代码
<Script>
js代码;
</Script>
2.行内方式
在普通的标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等
对象：客观存在的，并且可以相互区别的事物—如：各种标签
eg对象：
- 外观----宽度、高度、背景色—CSS
- 事件----
多态性同一个事件发生的对象不同，所引发的反应也不同
<a href="" onclick="alert('超链接被触发了！')">我是超链接</a>
<!--使用超链接href属性执行js时，必须添加JavaScript前提-->
<a href="JavaScript:alert('超链接被触发了！')">我是超链接</a>
3.外部方式
使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="/js/hello.js"></script>
注意：如果某个script标签用于引用外部的js文件，则该script标签体中不能再写js代码
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.内联方式-->
<script>
//alert("hello JavaScript");
</script>
<!--3.引用外部的js脚本文件-->
<script type="text/javascript" src="/js/hello.js">
alert('呵呵');
</script>
</head>
<body>
第一个JavaScript程序
<hr>
<!--2.行内方式-->
<input type="button" value="点我" onclick="alert('我被点晕了！')">
<!--<div οnmοuseοver="alert('走开')">把鼠标移上来！</div>-->
<a href="" onclick="alert('超链接被触发了！')">我是超链接</a>
<!--使用超链接href属性执行js时，必须添加JavaScript前提-->
<a href="JavaScript:alert('超链接被触发了！')">我是超链接</a>
</body>
</html>
三、基本用法
1.变量
js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
语法：var 变量名=常量或表达式；
注意：变量名的命名规则：
1、由字母，数字，汉字，下划线组成
2、由字母，汉字，下划组成
3、不能和保留字同名
4、大小写敏感
回忆：
数据类型：常量和变量
常量：具体的值，不变的量----常数项
变量：变化的量，存放常量的量-----容器
int a,b,c;//变量在使用前必须强制进行定义或声明
a = 10;//将整形常量10放到整形常量
b = 20;
c = a + b;//将a+b的和赋值给整型变量c
print("c=%d",c);
在ECMAScript 6规范中新增let关键字，也用于声明变量
使用let声明的变量支持模块级作用域，而使用var声明的变量不支持模块级作用域
注：在IDEA中配置ES版本settings---->Languaage&FrameWorks---->JavaScript---->JavaScript Version
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量
var name;
name ='张无忌';
name ='tom';
//alert(name);
var 姓名;
姓名="张敏";
//alert(姓名) //姓名是变量名
var age=18;
var a=5,b=2,c=7;
var age=18;
var Age=19;
//alert(Age);
sex="male";//强烈不建议
//alert(sex);
{
//var x = 6;
//alert(x);
let y =10;
//alert(y);
}
alert(y);
</script>
</head>
<body>
</body>
</html>
2.输入和输出
输出
-
alert()弹出警告框
-
console.log()输出到浏览器的控制台
-
document.write()输出到页面
例如：
//输出信息
alert('嘿嘿');
console.log('哈哈');
document.write('嘻嘻');
输入
-
prompt()弹出一个输入框，获取用户输入的数据
使用
typeof变量名判断变量的类型使用
Number（变量名）将字符串转换为数值
例如：
//输入
var name=prompt("请输入你的名字：");
console.log(name);
var age= prompt("请输入你的年龄：");
console.log(age,typeof age);
console.log(age+2);
age = Number(age);console.log(age+2);
3.转义字符
常用转义字符：
\n换行\t制表位，缩进\"双引号\'单引号\a响铃，警告
例如：
//转义字符
console.log('he\'llo\'wored');
console.log('welcome to \n javascript');
console.log('welcome to \t javascript');
4.注释
单行注释：//
多行注释：/* */
5.编码规范
代码区分大小写
每条语句以分号结尾
代码缩进
四、核心语法
1.数据类型
常量：具体的值 eg: ‘abc’ ‘20’ 3.14 100
变量：存放常量的量----容器
基础数据的类型：
- string字符串
- number 数值(NaN表示非数字Not a Number，其自身是number类型，表示数值是不正常状态)
- boolean布尔
- null空类型
- undefined未定义类型
例如：
/*
数据类型
*/
var name ='tom';
var age = 18;
var height = 180.5;
var flag = 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);//返回Nall
console.log(typeof flag);
console.log(typeof hobby);//如果数据是null、Date、Array等返回值是obgect
console.log(typeof date);
console.log(typeof arr);
console.log(typeof sex);//返回undefined
数据类型转换：
-
转换为number
使用number()、parselnt()、parsfloat()
例如：
/*
类型转换
*/
//1、转换为数值
var a ='12';
console.log(a,typeof a);
//方式一:使用Number()
a = Number(a);//赋值号=左边的a代表的是容器或变量本身 右边的a代表的是容器中的值
a = Number('12.5');
a= Number('12abc');
a= Number('ab12');
console.log(a,typeof a);
//方法二：使用PersInt()
a = parseInt(a);
a = parseInt('12.5');
a = parseInt('12abc');//按字符顺序依次进行解析
a = parseInt('abc12');
console.log(a.typeof a);
//方法三：使用parseFloat()
a = parseFloat(a);
a = parseFloat('12.5');
a = parseFloat('12abc');
a = parseFloat('abc12');
console.log(a.typeof a);
//将布尔值转换为数值
a=Number(false); //js中true用1或非0表示 false用0表示
console.log(a,typeof a,typeof true);
-
转换为string
拼接空字符串
例如：
//将数值转换为字符串
var a = 12;
console.log(a,typeof a);
a = a + '';//# 后接空字符串 左边a---变量本身 右边a---值
console.log(a,typeof a);
-
转换为布尔
使用Boolean()
注意：0、空字符串、undefined、null、NaN会被转换为逻辑假false，其他的类型在转换为布尔时，会被转换为true
例如：
/*
将数值、字符串转换为布尔
*/
var = Boolean(0);
var = Boolean('');
var = Boolean(null);
var = Boolean(nubefined);
var = Boolean(NaN);
var = Boolean('tom');
console.log(a,typeof a);
var name='tom';
if(name)
{
console.log(name);
}
2.运算符
算数运算符：+、-、*、/、%、**、++、–
例如：
/*
算数运算符：+、-、*、/、%、**、++、--
*/
var a = 5;
var b = 3;
var c = '2';//var c = 'aaa';
var d = true;
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转换为数值，在进行算数运算
var a = 1;
var b = 2;
console.log(a++);//表达式会返回变化前a的值，表达式执行完a自加 a = a + 1
console.log(a);
console.log(++a);//表达式会返回变化后a的值，表达式执行完a也是变化后的值
console.log(a);
console.log(b--);//先引用，后自加减
console.log(--b);先自加减，后引用
比较运算符：>、>=、<、<=、、=、!==
例如：
/*
比较运算符：>、>=、<、<=、==、===、!==
*/
var a = 5;
var b = 5; //'5'
var d = false;//js中true表示为1，false表示为0
console.log(a>b);
console.log(a<b);
console.log(a>=b);
console.log(a<=b);
console.log(a==b);//只判断内容是否相等
console.log(a===b);//全等于，既要判断内容，也要判断类型
console.log(a+d);//= 0
console.log(a-b);//会将数字字符b转换为数值，再进行算数减运算
console.log(a+b);//会将数值a转换为字符串，然后和b进行字符串的首尾相连
赋值运算符：=、+=、-=、/=、%=、**=
例如：
/*
赋值运算符：=、+=、-=、/=、%=、**=
*/
console.log(a);
a = 9;//将整数9赋值给变量a
console.log(a);
var a = 1;
a +=2;//a = a +2
console.log(a);
var a = 2;
a**=2;//a=**2
console.log(a);
逻辑运算符：&&并且、||或、！非
例如：
/*
逻辑运算符：&&并且、||或、！非
*/
var x = true;
var y = false;
console.log(x&&y);//两边为真才为真，一边为假就是假
console.log(x||y);//两边为假才为假，一边为真就是真
console.log(!x);
//逻辑运算的短路问题
var a = 2;
var b = 5;
console.log(a && b);
console.log(a||b);
条件运算符：条件？表达式1：表达式2
例如：
/*
条件运算符：条件？表达式1：表达式2
*/
var a = 3;
var b = 2;
console.log(a>b?a+b:a-b)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//使用Math对象进行数学运算，用法：Math.方法名（叄数）
//1.求绝对值
console.log(Math.abs(-5));
//2.计算次方
console.log(Math.pow(2,3));
//3.四舍五入
console.log(Math.round(123.456));
//4.向上取整，向下取整
console.log(Math.ceil(3.4));//返回大于等于3.5的最小整数
console.log(Math.floor(3.4));//返回小于等于3.5的最大整数
//5.生成一个[0,0,1]之间的随机小数
console.log(Math.random());
//6.最大值，最小值
console.log(Math.max(23,1,54,2,-6));
console.log(Math.min(23,1,54,2,-6));
//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 if(age>=16)
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；
default：
console.log('不吃了')；
break；
}
</script>
</head>
<body>
</body>
</html>
4.循环结构
while、do…whiile、for、for…in
break、continue
break退出整个循环
continue结束本次循环，返回到条件判断处继续进行下一次是否执行循环的条件判断
例如：
<!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 += i;
i++;//循环增量，使用循环趋于结束
}
console.log(sum);
//do-while
var i = 1;
var sum = 0;
var cnt = 0;
do{
if(i%7==0)
{
sum = sum + i;
i++;
}
i++;
}while(i<=100);
console.log(sum,cnt);
//for循环
var sum =0;
var cnt =0;
for(var i = 1;i<=100;i++)
if(i%7==0)
{
sum += i;
cnt++;
}
console.log(sum,cnt);
/*
for...in..对集合进行遍历
*/
var str = 'welcome to JavaScript';
for(var s in str)
console.log(s);//输出字符串的索引或下标
//console.log(str[s]);
</script>
</head>
<body>
</body>
</html>
5.数组
5.1 定义方式
语法：
var arr = new Array();
var arr = new Array(值1，值2，....);
var arr = [值1，值2.....]
注意：
- 数组长度会自动扩展
- 数组中元素的默认值为undefined
- 使用数组的length属性可以获得数组的长度（数组中有多少个元素）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var arr = new Array();
arr[0]=12;
arr[1]=9;
//...
console.log(arr.length);
最低0.47元/天 解锁文章
1832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
