4.JS基础(一)

JS:客户端脚本语言,运行客户端浏览器中,不需要编译就可以被解析了
可以增强用户和html页面的交互过程,可以控制html元素,让页面有些动态效果
一、基本使用
语法:1、与html结合:
内部JS:在head还是body(head中会执行的更早)中都可以,<script type="”text/javascript>,alert(“xxxxxx”)是一个提示作用
外部JS:设置个外部的JS文件,不是用line,而是用<script src=“xx.JS” type="”text/javascript(引入的文件格式) charset=“utf-8”>
JS里//为单行注释,/**/为多行注释,不要嵌套使用
数据类型(如alert(++b)显示到网页提示中):
原始数据类型:
1、number:数字
2、string:字符串
3、boolean:布尔类型
4、null:对象为空的表示
5、undefined:未定义(没赋值的变量,由null演变而来)
引用数据类型(对象)
object
定义变量:用var或let
方式1、var 变量=初始化值(数据类型)
2、var 变量;变量=初始化值(分步执行)
alert(typeof num)可以查看数据类型
一元运算符:只有一个运算数的运算符,++(自增,++a=a+1) – +(正号) -(负号)
++在变量前后有区别,var b=4
var c=++b
与var c=b++;4一样,从右到左
如果运算数不是运算符要求的类型,JS会自动进行转换
字符串转为number,按照字面值转换,NaN为不是数字的数值
算数运算符:±*/
赋值运算符:= += -=
比较运算符:>< ===(三等号是全等于的意思)
通过比较显示出ture或flase
类型不同的,先进行类型转换再进行比较
逻辑运算符:&& || !(与或非)
如true&&true才为true
!5先把5转成布尔类型再!true,转布尔类型中0或NaN为假,非0为真,字符串转布尔,除了空字符串为假,其他都真,null和under fined为假,对象转布尔都为真
!!5非两次
三元运算符:
条件表达式?表达式1:表达式2
如果表达式结果为true,则执行表达式1,如果为flase,执行表达式2
var a=1
var b=2
var c=a>b?100:200
最后为假,执行显示为200

流程控制语句:
1、判断结构 if语句
单个:if(){}
两个:if(){}else{},如果小括号的内容结果为true则执行第一个{}
多个:if(){}else if(){}else if(){}else if(){}else if(){}else{}(这里额外添加了一个else防止出现范围外的情况)

2、选择结构  switch
switch(){case:。。case:。。case:。。}
如var  a=2
switch(a){case1:alert(1)case2:alert(2)case3:alert(3)}这种情况会显示所有选项
switch(a){case1:alert(1) break  case2:alert(2) break case3:alert(3) break  default:alert(‘111’)  break }
这种情况有 break 跳出,选到了就跳出,后面的default是为了防止出现范围外的情况,default不管放在哪都是最后一个执行

3、循环结构  for循环  while循环  do  while循环
while(条件表达式){循环体},循环体里加变量递增式子可以到一定数就结束循环
do {循环体} while(条件表达式)不管while是否满足,do至少执行一次,循环体里加变量递增式子可以到一定数就结束循环
for(初始化表达式;循环条件表达式;循环后的操作表达式){循环体}
如for(var c=0;c<3;c++){alert(‘aaa’)}
for循环嵌套
for(){for(){}}不断满足不断层层进入执行,这里会把里面的for全执行完再执行第二次的外面的for,
和python的for嵌套for一样结果执行次数会是两个for执行次数相乘
可以用来做九九乘法表,外层for控制’行‘,内层for控制’列‘,如:有时,内层for的循环条件表达式设b<=a,小于外层变量,受外层限制
document.write(a+“ * ”+b+“=”+(a*b)+“&nbsp”)写在循环体中,
document.write可以将小括号内容打印出来,alert是提示,这里的是另一种函数,这里的“&nbsp”作字符串但是有特殊字符会被JS解析成空格
小括号的在这属于字符串的拼接,为了打印九九乘法表,为了换行可以在外层for的{加一个document.write(“<br>”)}达到让内层for换行的效果

box.onmouseenter鼠标划入事件(把鼠标移到框里会变的事件)
box.οnmοuseenter=function(){box.innerText=“xxxx”}
box.onmouseleave鼠标划出事件
box.οnmοuseleave=function(){box.innerText=“xxxx”}
btn.onclick鼠标设置事件(用户设置了什么,就会在用户的页面显示出来)
btn.οnclick=function(){var a=input1[0].value;
var b=input1[1].value;
box.setAttribute(“style”,a+“:”+b(这里是在style样式的属性:属性值))}这里的0和1是提取属性和属性值的索引
var box=document.getElementsByTagName(“div”)[0]后面加的0为从第一个开始,鼠标划入划出要显示什么的内容

alert是通过弹框打印数据
console.log是通过控制台来打印数据

猜你喜欢

转载自blog.csdn.net/qwe863226687/article/details/114015760
今日推荐