系列文章目录
文章目录
- 系列文章目录
- 第一章 JavaScript简介:
- 1.1 特点:
- 1.2 JavaScript与Java的区别
- 1.3 JavaScript不能做什么
- 1.4 JavaScript组成
- 第二章 JavaScript必备基础知识
- JavaScript代码调试方式
- 一、变量
- 2.1.1 变量的命名规则:
- 2.1.2 变量作用域
- 2.1.3 变量提升
- 二、数据类型
- 2.2.1 基本数据类型
- 2.2.2 引用数据类型
- 2.2.3 基本数据类型和引用数据类型的区别
- 2.2.4 数据类型转换
- 三、表达式和运算符
- 2.3.1 运算符类型
- 2.3.2 正则表达式
- 2.3.3 正则表达式在JavaScript中的使用
- 四、注释
- 第三章 JavaScript程序构成
- 一、程序控制
- 3.1.1 if 条件语句
- (1). if单分支语句
- (2). if嵌套语句:
- 3.1.2 for 循环语句
- (1). for单分支语句
- (2). for嵌套语句
- 3.1.3 while 循环语句
- (1). while语句
- (2). do...while语句
- 3.1.4 switch语句
- 3.1.5 break语句和continue语句
- 3.1.6 label语句
- 二、函数
- 3.2.1 函数语法:
- (1). if单分支语句
- 3.2.2 函数参数:
- 3.2.3 函数返回值:
- 3.2.4 函数调用:
- 3.2.5 递归调用:
- 3.2.6 异常处理:
- 三、事件及事件处理
- 3.3.1 HTML事件处理程序
- 3.3.2 DOM0级事件处理程序
- 第四章 JavaScript对象
- 代码块
- 总结
第一章 JavaScript简介:
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言
1.1 特点:
- 简单性
- 动态性
- 跨平台性
- 节省服务器的开销
1.2 JavaScript与Java的区别
java是SUN公司的程序设计语言 JavaScript是NetScape公司的产品
1.基于对象和面向对象
java面向对象,JavaScript基于对象
2.解释和编译
java必须编译,JavaScript不需要
3.强变量和弱变量
java强变量,变量必须先声明数据类型再定义,JavaScript是弱变量
4.代码格式不一样
java与html无关需要装载使用,JavaScript可以在html里直接嵌入使用也可以动态加载
5.嵌入方式不一样
在html中java使用<applet>…</applet>标识,js使用<script>…</script>标识
6.动态联编和静态联编
java对象引用必须在编译时进行,JavaScript对象在运行时检查
1.3 JavaScript不能做什么
- JavaScript不允许写服务器上的文件
- JavaScript不能关闭不是由它自己打开的窗口
- JavaScript不能读取已经打开的其它窗口中的信息
1.4 JavaScript组成
一个完整的JavaScript由三个不同部分组成:核心(ECMAScript)、文档对象模型(DOM)和浏览器对象模型(BOM)
第二章 JavaScript必备基础知识
JavaScript代码调试方式
- alert() 弹出警示框
- document.write() 写到HTML文档中
- console.log() 写入到浏览器控制台
一、变量
2.1.1 变量的命名规则:
- 变量必须以字母开头
- 变量也能以$和_开头(不推荐)
- 变量名不能包含空格或其它标点符号
- 变量名称对大小写敏感
总结:字母开头,大小敏感,不含特殊
2.1.2 变量作用域
JavaScript分为局部变量和全局变量
变量在函数内声明为局部变量 变量在函数外声明为全局变量
<script>
var a=1;//定义全局变量
function c1() {
var b; //定义局部变量b
b=1;
return b;
}
function c2() {
a=2; //使用全局变量a赋值为2
return a;
}
console.log(a);//输出全局变量a的值
console.log(c2())//调用c2()函数a的值改变
console.log(c1())//输出局部变量b的值
console.log(b);//输出的是全局变量b但未定义 程序报错
</script>
2.1.3 变量提升
JavaScript工作引擎是:先解析代码,获取所有被声明的变量,再运行代码,这样所有被声明语句都会提升到代码头部执行
这就是变量提升
注意:
- 变量提升只提升变量的声明,并不会提升变量的值
- 变量提升只对var声明的变量有效
二、数据类型
2.2.1 基本数据类型
JavaScript有五种基本数据类型:字符串(String)、数值(Number)、布尔(Boolean)、Undefined、Null
String:
var a='a';
如果字符串本身包含单(双)引号,需要给字符串增加引号时,必须将字符串包含在双(单)引号里
var b="'a'";
Number:
Number类型用来表示整数、浮点数和NaN
var a=1;
var b=1.1;
var c=.1; //c被保存为0.1(不推荐)
var d=1.0 //此时d会直接被保存为整数1
NaN: (number类型)
任何涉及NaN的操作如(10\NaN)都会返回NaN;NaN与任何数值都不相等,包括NaN本身
Boolean:
Boolean类型有两个面值:true和false
true不一定等于1,false不一定等于0;
var a=true;
var b=false;
Undefined:(undefined类型)
只有一个值Undefined,使用var但未进行初始化的时候,这个变量的值为Undefined
var a;
Null:(object类型)
空对象指针
if(object!=null){
}
2.2.2 引用数据类型
JavaScript有五种引用数据类型:Object类型、Array类型、Date类型、RegExp类型、Function类型
Object类型
Object对象是一组数据和功能的结合
创建有两种方法:
- 构造函数
- 对象字面量表示法
//构造函数
var x=new Object();
x.age=18;
//字面量
var x={
age:19
};
Array类型 (object类型)
JavaScript中的数组
创建有两种方法:
- 构造函数
- 数组字面量表示法
//构造函数
var x=new Array();
//数组字面量表示法
var y=[];
Date类型 (object类型)
日期
创建有一种方法:
//构造函数
var n=new Date();
RegExp类型
正则表达式
创建有两种方法:
- 构造函数
- 字面量表示法
//构造函数
var x=new RegExp('hello','g');
//字面量表示法
var y=/hello/g;
Function类型
函数,实际是对象
创建有三种方法:
- 构造函数
- 函数声明语法定义
- 函数表达式定义函数
//构造函数
var x=new Function('num1','num2','return num1+num2');
//函数声明语法定义
function sum(num1,num2){
return num1+num2;
}
//函数表达式定义函数
var sum=function(num1,num2){
return num1+num2;
}
2.2.3 基本数据类型和引用数据类型的区别
- 声明变量时不同的内存分配
基本类型:存储在栈内存(stack)
引用类型:储存在堆内存(heap) - 不同的访问机制
基本类型:直接访问
引用类型:按引用访问 - 复制变量时的不同
基本类型:变量独立,值相同
引用类型:多了一个指向对象的指针 - 参数传递的不同
基本类型:传递以后独立
引用类型:传递的内存地址,一方修改另一方也修改
2.2.4 数据类型转换
typeof 可以查看js的变量的数据类型
typeof'john' //输出 object
1.转换函数
parseInt(value)
parseFloat(value)
2.强制类型转换
Boolean(value)
Number(value)
String(value)
区别:
Number(value):把值转换成数字,转换对象为整个值
parseInt(value):转换对象为字符串开头部分的值
三、表达式和运算符
2.3.1 运算符类型
1.一元运算符
递增(++) 递减(–)
后置型运算符
//后置++,--先进行表达式运算,运算数再计算
var x=2;
var y=x--;
console.log(y)//此时y=2
console.log(x)//x执行了--所以值为1
2.算数运算符
加法(+) 减法(-) 乘法(*) 除法(/) 取余(%)
3.关系运算符 返回布尔值
小于(<) 大于(>) 小于等于(<=) 大于等于(>=) 等于(==)不等于(!=) 全等(===)不全等(!==)
4.逻辑运算符
非(!!)与(&&) 和(||)
注意非返回布尔值,与、和不一定返回布尔值
如果两个运算数是布尔值,与,和依旧返回布尔值
如果是对象,则返回使等式结果为true的那个值
var x=true;
var y=3;
var a=2;
console.log(x&&y)//此时结果为3
console.log(a||y)//此时结果为2
5.位运算符
位运算符:NOT ~
位运算符:AND &
位运算符 :OR |
6.赋值运算符
简单赋值运算符:=
复合赋值运算符:*= ,/=,%= …
7.其它运算符
字符串运算符:+
逗号操作运算符:,
三元运算符:(expr1)?(expr2):(expr3);
//用于两个字符串的拼接
var x='你'
var y=x+'好' //此时y的值为 你好
console.log(y)
//一条语句执行多个操作
var a=1,b=2,c=3;
//判断是否符合条件1,符合执行语句2,否则执行语句3
var q=1;
(q==1?q=2:q=3)//此时q=2
console.log(q)
运算符优先等级:
一元运算符>算数运算符>比较运算符>逻辑运算符>三元运算符>赋值运算符>逗号运算符
注意:逻辑取反运算符属于一元运算符,其优先级最高
可以使用()来强行指定运算顺序;
2.3.2 正则表达式
定义:使用特定字符及特定字符的组合组成‘规则字符串’,表达对字符串的一种过滤逻辑。
作用:
1.给定的字符串是否符合正则表达式的过滤逻辑 即:匹配
2.从字符串中获取想要得到的特殊部分 即:获取
正则表达式的创建有两种方式:
详情请看 引用数据类型 RegExp类型
正则表达式的元字符(不全,选的比较重要的)
字符 | 描述 |
---|---|
\ | 将下一个字符标记为一个特殊字符或 一个原义字符或一个向后引用或一个八进制转义符 |
^ | 匹配输入字符串的开始位置 |
$ | 匹配输入字符串的结束位置 |
* | 匹配前面的子表达式零次或多次 例如:zo*能匹配’z’以及"zoo",*等价于{0,} |
+ | 匹配前面的子表达式一次或多次 例如:“zo+“能匹配’zo’以及"zoo”,但不能匹配"z”,*等价于{1,} |
? | 匹配前面的子表达式零次或一次 例如:"do(es)“能匹配’do’或"does"中的"do”,?等价于{0,1} |
{n} | n是一个非负整数。匹配确定的n次 例如,'o{2}‘不能匹配’Bob’中的’o’,但是能匹配’food’中的两个o |
{n,} | n是一个非负整数。至少匹配n次 |
{n,m} | m和n均为非负整数,其中n<=m,至少匹配n次,至多匹配m次 |
. | 匹配除’\n’之外的任何单个字符 |
x|y | 匹配x或y 例如,“x|yz"能匹配"x"或"yz” “(x|y)z"能匹配"xz"或"yz” |
xyz | 匹配所包含的任意一个字符 例如,“xyz"能匹配"foooy"中的"y” |
^xyz | 匹配未包含的任意字符 例如,"^xyz"能匹配"foooy"中的"f",“o”,“o”,“o” |
a-z | 字符范围,匹配指定范围内的任意字符 例如,’[a-z]'可以匹配’a’到’z’范围内任意小写字母字符 |
^a-z | 负值字符范围,匹配任何不在指定范围内的任意字符 例如,’[^a-z]'可以匹配不在’a’到’z’范围内任意字符 |
\b | 匹配单词边界,即单词和空格间的位置。例如,‘er\b’可以匹配’never’中的’er’,但不能匹配’verb’中的’er’ |
\B | 匹配非单词边界。例如,‘er\b’可以匹配’verb’中的’er’ ,但不能匹配’never’中的’er’ |
\d | 匹配一个数字字符,等价于[0-9] |
\D | 匹配一个非数字字符,等价于[^0-9] |
\cx | 匹配由x指明的控制字符 |
\f | 匹配一个换页符,等价于\x0c和\cL |
\n | 匹配一个换行符,等价于\x0a和\cJ |
\r | 匹配一个回车符,等价于\x0d和\cM |
\s | 匹配任何空白字符,等价于[\f\n\r\t\v] |
\S | 匹配任何非空白字符,等价于[^\f\n\r\t\v] |
\t | 匹配一个制表符,等价于\x09和\cI |
\v | 匹配一个垂直制表符,等价于\x0b和\cK |
\w | 匹配包括下划线的任何单词字符,等价于’[A-Za-z0-9]’ |
\W | 匹配任何非单词字符,等价于’[^A-Za-z0-9]’ |
2.3.3 正则表达式在JavaScript中的使用
- String.prototype.search方法
- String.prototype.replace方法
- String.prototype.split方法
- String.prototype.match方法
- RegExp.prototype.test方法
var str='akjdgLOVEjflkpasgjiKDJGALKDGJ'
// String.prototype.search方法
console.log(str.search(/p/));//输出在str中的位置13
// String.prototype.replace方法
console.log(str.replace(/LOVE/,'爱'));//把LOVE替换为爱输出
//String.prototype.split方法
console.log(str.split(/j/));//按j分隔 输出字符串
//String.prototype.match方法
console.log(str.match(/LOVE/g));//输出全局中的LOVE
//RegExp.prototype.test方法
console.log( /LOVE/.test('LOVE'));//判断str中是否含有LOVE 输出true
四、注释
JavaScript中分为单行注释和多行注释
单行注释:只注释一行,注释符号为:// 后面为注释内容直到该行结束
多行注释:一次可注释多行代码,注释符号以 /*开始,以*/结束
//我是单行注释
/*
我是多行注释
*/
第三章 JavaScript程序构成
一、程序控制
3.1.1 if 条件语句
(1). if单分支语句
条件判断语句
var i=11;
//判断i是否大于10,结果成立执行第一个分支
if(i>10){
console.log('i>10');
//否则执行else中的语句
}else{
console.log('i<10');
}
(2). if嵌套语句:
var i=9;
//判断i是否大于10,结果成立执行第一个分支
if(i>10){
console.log('i>10');
//否则执行else if中的语句,成立执行
}else if(i<0){
console.log('i<0');
//否则继续向下判断,都不满足则执行else
}else{
console.log('0<i<10')
}
3.1.2 for 循环语句
(1). for单分支语句
先判断再执行
//设置变量i=0,循环条件i<=3,i++设置变量每次循环都会+1
for(var i=0;i<=3;i++){
console.log(i)
}
(2). for嵌套语句
//外层循环控制行数
for(var x=1;x<=9;x++){
//内层循环控制列数
for(var y=1;y<=x;y++){
document.write(y+"*"+x+"="+x*y+' ')
}
//每输出一行加一个换行符<br/>
document.write('<br/>')
}
for…in 循环语句
是一种精准的迭代语句,可以用来枚举对象的属性
//定义一个对象 人,他有两个属性age和name
var person={
age:18,
name:'xiaoming',
}
for(var x in person){
//x为属性名 person[x]为属性值
console.log(x+':'+person[x])
}
3.1.3 while 循环语句
(1). while语句
先判断再执行
var i=0;
while(i<4){
console.log(i);
i++;
}
(2). do…while语句
先执行再判断 也就是说循环体至少执行一次
var i=5;
do
{
console.log(i);
i++;
}while(i<0);
3.1.4 switch语句
switch语句可以为表达式提供一系列的情况
var i=99;
switch(i){
case 10:console.log('10');
//break; //这里不加break程序会继续向下执行
case 20:console.log('20');
break;
default:console.log('呵呵');
}
与它等价的if代码:
var i=99;
if(i==10)
console.log('10')
else if(i==20)
console.log('20')
else
console.log('呵呵')
3.1.5 break语句和continue语句
break立即退出此循环
continue跳出本次循环,还可根据代码执行下次循环
break和continue区别:
break:
for(var x=0;x<=5;x++){
if(x==3){
break;
}
console.log(x)
}
continue:
for(var x=0;x<=5;x++){
if(x==3){
continue;
}
console.log(x)
}
3.1.6 label语句
label语句用来给代码中加入标签,配合break语句和continue可以精确的返回到你想要的程序的位置。
举例,未添加 Label的代码:
难点
start: //定义的label标签名
for(var x=1;x<=5;x++){
for(var y=1;y<=x;y++){
if(x==3){
//break //start;
//正常跳出只是跳出内部y循环,还会接着x循环继续
//加了label:结束了整个循环(x和y),程序直接输出 ‘结束’
//continue //start;
//x=3时 跳出了start标签代表的外循环,继续执行其它外循环
//即:内部循环2*3 3*3和外部循环<br>都不再执行
}
document.write(y+"*"+x+'='+x*y+' ');
}
document.write('<br/>')
}
document.write('<br/>'+'结束')
这是没有break,continue,label标签的运行代码:
加了break的代码运行:
代码分析:break跳出了 x=3 时的y循环
加了break 和label标签(start)的代码运行:
代码分析:结束了整个循环(x和y),程序直接输出 ‘结束’
加了continue的代码运行:
代码分析:continue按次跳过了所有 x=3 时的y循环,还会执行外部的x循环<br>
加了continue 和label标签(start)的代码运行:
代码分析: 跳出了start标签即x=3时,代表的x(外)循环,继续执行其它x=4的外循环
二、函数
3.2.1 函数语法:
(1). if单分支语句
//构造函数
var x=new Function('num1','num2','return num1+num2');
//函数声明语法定义
function sum(num1,num2){
return num1+num2;
}
//函数表达式定义函数
var sum=function(num1,num2){
return num1+num2;
}
3.2.2 函数参数:
js中函数定义不指定形参类型,不检查实参值,不检查实参个数
function x(m,n){
console.log(m+n); //不检查传入实参个数但只会选择前两个
//arguments对象可以访问实参数组
console.log(arguments.length);//输出实参的长度
console.log(arguments[3]);//输出x中位置为3的实参
console.log(x.length)//输出形参的长度
}
x(1,2,3,4);
注意:严格模式下,arguments对象的值和形参的值是独立的
严格模式:在函数中输入:‘use strict’;
3.2.3 函数返回值:
可以返回任何类型的变量数据、表达式或处理结果
<body>
<script type="text/javascript">
function denglu(){
if(document.form1.UsName.value==''){
alert("用户名为空");
//return;
}
if(document.form1.UsPwd.value==''){
alert("密码为空");
//return;
}
alert('登录成功');
}
</script>
</head>
<body>
<form name='form1'>
账户:<input type="text" name="UsName" /><br/>
密码:<input type="password" name="UsPwd" /><br/>
<input type="button" name="Login" onclick="denglu();" value="登录"/>
</form>
</body>
if未加return运行结果:
1.
2.
不加return将弹出两个警示框
3.2.4 函数调用:
js函数有四种调用模式:函数调用模式,方法调用模式,构造器调用模式以及Apply调用模式
函数调用模式:声明函数后直接调用
方法调用模式:将一个函数赋值给对象的成员称为方法
构造器调用模式:在函数调用前面加一个new关键字
Apply调用模式:略
//函数调用模式
function zaoan(){
console.log('早安')
}
zaoan();
//方法调用模式
var wuan=function(){
console.log('午安')
}
var m={};
m.zhaohu=wuan;//将函数wuan赋值给m对象的zhaohu方法
m.zhaohu();
//构造器调用模式
var wanan=function(){
this.wa=function(){
console.log('晚安')
}
}
var p=new wanan();
p.wa();
3.2.5 递归调用:
在函数体内调用函数本身
function sum(x){
if(x<=1){
return 1;
}else{
return x+sum(x-1); //函数内部一直在调用比它小的实参,进行相加直到实参的值为1
//例如:传入实参10 程序执行过程就是:10+9+...1
}
}
console.log(sum(10))
3.2.6 异常处理:
执行js代码发生错误的处理方式
function yichang(){
try{
x; //可能发生的错误代码
}catch(error){
//发生错误时的处理方式
//输出错误原因
console.log(error.message);
//输出错误名称
console.log(error.name)
}
}
yichang();
三、事件及事件处理
事件:文档或浏览器窗口中发生的一些特定的交互瞬间
3.3.1 HTML事件处理程序
在HTML中定义的事件处理程序通常包含要执行的具体动作,也可以调用在页面其他地方定义的脚本。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//在HTML中使用onclick直接调用JS代码
//修改时需要同时修改HTML和js代码
<input type="button" value="点一下" onclick="dian()">
<script type="text/javascript">
function dian(){
alert('晚好')
}
</script>
</body>
</html>
HTML事件处理程序的三大缺点
1.时差问题
2.浏览器兼容问题
3.代码耦合
3.3.2 DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性
优势:一是简单,二是可以跨浏览器使用
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//HTML中给按钮标注id,
//此时修改js中对应的方法只需要修改js中的代码
<input type="button" value="点一下" id="dian">
<script type="text/javascript">
var dian=document.getElementById('dian');
dian.onclick= function(){
alert('午好')
}
</script>
</body>
</html>
注意:
如果js代码位于html代码之前,按钮不会运行
第四章 JavaScript对象
代码块
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
标签:语句,运算符,console,精简版,JavaScript,2024,var,log From: https://blog.csdn.net/qq_56376552/article/details/124073365