1 JS 概述
1 简称JS,是一种浏览器解释型语言,代码嵌套在HTML页面中,将由浏览器解释执行
作用:主要用来实现页面的动态效果,实现用户交互,实现网页中的网络请求
2 JS 组成 :
1 ECMAScript
2 内置对象:BOM DOM 其他内置对象
3 自定义对象:
3 JS使用方式
1 元素绑定
给具体的元素绑定JS的事件
事件:由用户行为触发的操作
语法:
<标签 事件函数名=‘JS代码’>
et:
onclick:单击事件
alert(' '); 网页弹框显示信息
2 文档内嵌:
使用<script></script>在文档中嵌入JS代码
可以书写在任意位置,出现任意多次
常用的JS语句: alert() console.log('在控制台输出一句话')
3 外部JS文件
1 创建外部 .JS文件
2 使用script标签引入外部的JS文件
<script src></script>
注意:script标签用来引入外部文件时,标签中不能再书写js代码
如果脚本标签做引入操作,那么标签内不能再书写JS代码
4 常用JS语句
1 alert();以警告框的形式提示信息
2 prompt();接收用户输入的弹框,输入结果会以函数返回值的形式给出
3 consoe.log() 在控制台输出,常用于调试
4 document.write(); 在网页中输出
注意:
1 document.write()方法会根据当前的书写位置在网页中插入内容
2 如果以元素绑定事件的方式在网页中写入内容,onclick='document.write();'会清空当前页,只显示写入的内容
3 使用document.write()方法写入内容,可以识别html标签
JS 基础语法
1 .js代码是由语句组成的,每一条语句以分号结尾;
语句是由关键字,运算会,表达式组成的
2 JS代码严格区分大小写
console.log();正解
Console.log();错误
3 所有的标点都是英文的
4 JS中的注释
// 表示单行注释
/* 注释内容 */ 多行注释
4 JS中的变量与常量
1 变量:
1 创建变量
1 。先声明,后赋值 使用var关键字进行变量的声明,自定义变量名
2 声明的同时赋值
2 命名规范
1 由数字,字母,下划线和$组成,禁止以数字开头,
2 避免与关键字,保留字冲突
3 做到见名知意
4 严格区分大小写
5 多个单词组成变量名,采用小驼峰标识
3 使用注意
1 变量声明可以省略关键字var,直接使用变量名赋值,
不推荐省略关键字,涉及到变量作用域,
2 变量如果只声明,未赋值,默认值为undefined
3 赋值符号表示将右边的值赋给左边变量,要求左边必须是变量
2 常量
变量可以在程序任何地方修改,常量一经定义就不能更改
1 创建
使用const关键字创建常量,声明的同时必须赋值
2 语法规范
为了区分变量与常量,一般变量名采用小写或驼峰标识常量采用全大写的形式
3 小数位的操作
1 小数在计算机的存储中是不精确的,存在误差
2 指定保留小数位
方法:toFixed(n);n表示需要保留的小数位数
5 JS中的数据类型
1 基础数据类型(基础)
1 number 类型
数值类型,包含整数和小数
整数在内存中占4个字节(32位),小数占8个字节(64位)
1 整数
可以使用十进制,八进制,十六进制表示整数
八进制:以0开头
8为基数,取值0-7,逢8进1
et:
var a=010;
十六进制:以0x 为前缀
et:
var c= 0x25;//37
注意:
不管是哪一种进制表示的整数,在使用控制台输出时,都会转换为10进制输出显示
2 小数 也叫浮点数
2 科学计数法
var b = 1.5e3
e 表示10为底
e 后面的数值,表示10的次方数
计算方式:
1.5*10(3)
2 string类型
1 js 中字符串使用引号引起来,单双引号都可以
2 字符串有每个字符都有对应的Unicode码值
1 查看字符的Unicode码
方法:charCodeAt(index)
字符串中每个字符都对应一个下标,从0开始
2 Unicode码
Unicode码值中前128位与ASC码对应一致
中文字符的范围(十六进制表示)
"\u4eoo - \u9fa5"
3 将汉字的Unicode码转换为汉字字符
1 Unicode码转换为十六进制
toString(16); 将十进制数字转换为十六进制,,返回字符串
2 在十六进制字符串前添加\u转义,转换为汉字
4 转义字符
\n 换行
\t 制表符
\\ 表示\
\" 表示"
\' 表示'
3 boolean类型
只有真和假 true false;表达式进行关系运算的结果一定是布尔类型
4 undefined
1 变量声明未赋值,默认为undefined
2 访问对象不存在的属性时,也为undefined
5 null
空类型,一般用来解除对象的引用
2 复杂数据类型(引用)
对象 函数
3 判断数据类型
操作符typeof typeof()
var a = 10;
6 JS 中数据类型转换
1 自动类型转换(隐式)
1 number+string类型
字符串使用+参与运算,都视为字符串的拼接,不再是数学运算
转换规则:
将参与运算的非字符串内容,自动转换为string规则,再进行字符串的转换
2 boolena + string
涉及字符串的+操作,都为字符串拼接
true + '10' // true10
3 number + boolean
将布尔值转换为number类型,再进行相加运算
true =1 ;
false =0;
2 强制类型转换
1 字符串转换number类型
1 Number(string)
可以将非数字类型转换为number
1 数字字符串‘100’可以使用该方法转换类型
2 包含非数字的字符串‘100a',转换结果为NaN
not a number,表示转换失败
3 布尔类型转换number,对应1 和0
2 从字符串中解析数字
1 parseInt(str)
1 用来解析字符串中的整数,参数如果不是字符串,会自动转换为字符串再进行解析
2 只对字符串开头部分进行采摘,如果首个字符不是数字,直接返回NaN
2 parseFloat(str)
用来解析字符串中的整数和小数部分
2 将非字符串类型转换为 string类型
7 运算符
1 算术运算
+ - * / %
++ -- 自增加和自减运算
1 + - * / %
1 字符串+,表示拼接
2 数字字符串参与数学运算(- * / % ),会自动转换数据类型,转成number后参与运算,
3 布尔类型的数据会自动转换为number 1或0 参与数学运算
2 ++ --
1 自增运算符,自减运算符,表示在自身基础上进行+1 -1 的操作
2 只有变量能使用++ -- ,常量不能自增或自减
3 单独使用++ -- 与变量结合,做前缀或后缀没有区别,都是对变量进行+1 或 -1操作
et :
var a = 10;
++a;
--a;
4 如果与其他运算符结合,前缀和后缀会影响结果
et:
与赋值符号结合
var a = 10;
var r = a++;// 先赋值,后自增
var r1 == ++a;//先自增,后赋值
2 比较运算符(比较运算符)
> >= < <= == != === !==
1 数字与数字之间的比较
2 字符串之间的比较
1 string 与 number 之间进行关系运算
自动将string 转换为number,再进行比较;
如果string无法转换为number,则进行NaN与number的比较,结果永远为false
2 string 与 string 之间进行关系运算
进行每一位字符Unicode码值的比较,从前往后,如果第一位字符可以比较出结果,就直接获取结果,
如果无法出结果,依次进行后一位字符的比较
3 判断相等与恒等
== 判断相等,只进行值得比较,包含数据类型转换
=== 判断恒等,不允许数据类型转换,比较类型与值判断相等时,会发生自动类型转换,最终结果相等,即为true
判断恒等,要求操作数据类型一致,值相等,才返回true
4 判断不等和不恒等
!= 判断不等,两个操作数的值不相等时返回true
!== 判断不恒等,两个操作数类型与值之间只要有一项不同,都返回true
3 逻辑运算
逻辑与:&&
逻辑或:||
逻辑非:!
逻辑运算与关系运算的结果都为布尔类型
1 逻辑与
两个表达式同时为真,逻辑运算的结果才为真。
条件1 条件2 结果
&& true true true
&& false true false
&& true false false
2 逻辑或,
只要有一个主真,逻辑或的结果就为真。
3 逻辑非:
非真即假。对表达式的结果进行取非操作
1 运算符
1 位运算符
程序中的数据在计算机中都是以二进制形式存储的,位去处实际上是对二进制的每一位进行操作
1 按位与 &
将操作数转换二进制之后,按位与,相同则为1 ,不同则为0
3 &5 =1
使用,常用于判断整数的奇偶,将一个操作数与1做位与,结果为1 ,该操作数为基数,结果为0说明操作数为偶数
3 & 1 =1
2 & 1 = 0
2 按位或:|
将操作数转换为二进制之后,做位或,相同.
3 异或操作可以在不借助三方变量的情况下互换两个变量的值
2 三目运算符
语法:
表达式1 ? 表达式2: 表达式3
使用:
1 判断表达式1 的结果(布尔值)
2 如果表达式1 结果为true,执行表达式2
3 如果表达式1结果为false ,执行表达式3
2 流程控制
控制代码的执行顺序
流程控制语句:
1 顺序结构:代码自上至下一行一行执行
2 选择结构(分支)
3 循环结构
1 选择结构:
根据条件判断的结果选择执行某一段代码
语法:
1 if(判断条件){
条件为真执行的代码段,条件为假时,会跳过
}
注意:
1{}可以省略,省略之后,认为if()后面的第一条语句是条件成立时待执行的语句
2 判断条件必须是布尔类型的结果
3 非零值都为真,零为假
以下条件都为假:
if(0){}
if(0.0){}
if(''){}
if(NaN){}
if(undefined){}
if(null){}
2 if-else语句
语法:
if(){'条件为真执行'}
else{'条件为假执行'}
3 if-else if语句
多重分支结构
if(条件1){条件1成立时执行}
else if(条件2){条件2成立时执行}
else if(...){}
else{条件不满足时执行}
2 swith语句
语法:
switch(值)
{case 1:值匹配恒等时,执行的语句
break;
case 2:值匹配待执行的语句
break;}
注意:
1 switch一般用于值得匹配,()中表示的是值
2 case可以使用多个,每个case对应一种情况
3 case 后面直接写要对应匹配的值
et:
var a= 20;
switch(a){
case 1:console.log('a=1');break;
case 10:console.log('a=10');break;
default: console.log('查询不到');
}
4 如果case给出的值匹配成功,执行当前的case:后面的语句
5 break用于跳出匹配,不再向下执行匹配
6 default 表示所有的case都匹配失败之后默认执行语句;
其他情况:
1 default关键字一般写在switch的末尾,匹配失败之后最终执行的操作,可以省略
2 break表示跳出switch语句,可以省略,如果省略break ,
2 循环结构
重复执行某一段代码
1 循环语句的三要素
1 循环变量
2 循环条件
3 循环体
2 语法:
1 while 循环
while(循环条件){条件成立时,执行循环体}
执行流程:
1 定义循环变量
2 判断循环条件
3 条件成立,执行循环体
4 更新循环变量(重点)
5 重复步骤234,直到条件不成立跳出循环
2 do-while循环
do{
循环体
}while(循环条件);
执行流程:
1 定义循环变量
2 执行do操作,循环体
3 循环体中更新循环变量
4 判断循环条件,决定是否继续执行循环体
特点:
do-while循环不管条件是否成立,都至少执行一次循环体
3 for 循环
for(定义循环变量;循环条件;更新循环变量){
循环体
}
for循环与while循环:
1 循环的执行流程相同
2 for 循环常用于确定循环次数的场合
while循环常用于不确定循环次数的场合
4 循环控制
1 continue 跳出本次循环,开始下一次循环
2 break结束循环,break直接结束循环,
3 循环的嵌套
可以在循环中再次嵌套其他循环
生成样式代码、
*
***
*****
<script type='text/javascript'>
var aa = Number(prompt('输入整数'))
var a = aa+1 ;
for(var i=1;i<a;i++){
var show='';
for(var jj=0;jj<a-i;jj++){show+=' '}
var _ = i*2-1
for(var ii=0;ii<_;ii++){show+='*'}
console.log(show)
document.write(show+'<br>')
}
</script>
乘法表
<script type='text/javascript'>
var a = 10 ;
for(var i=1;i<a;i++){
var show=''
for (var ii=1;ii<=i;ii++){
show+=i;
show+='*';
show+=ii;
show+='='
show+=i*ii;
show+=' '; }
console.log(show)
// console.log(i,'*',ii,'=',i*ii,'')
}
</script>
不是所有的成功都是坐享其成