JavaScript基础语法

x33g5p2x  于2021-10-07 转载在 JavaScript  
字(13.0k)|赞(0)|评价(0)|浏览(416)

JavaScript基础语法

javaScript 的基本结构

javaScript代码都是用<script>标签嵌入到html文档中

游览器在遇到<script>标签时会逐行读取内容 知道遇到</Script>为止

<script type="text/javascript">
    
  JavaScript 语句 ; 
    
</script>

document.write(“”); 用来 向页面输出, () 内可以包含html的标签

<script type="text/javascript">

document.write("初学/javaScript");
document.write("<h1> hello ,javaScript </h1>")

</script>

多条也可以用 + 号拼接 和java 一样

document.write(1=="1","<br>");  //用逗号隔开不同数据 防止 相互访问

javaScript 的执行原理

游览器客户端(通过地址) 向服务器索要页面,
1.
服务器将数据读取出来进行整理
1.
服务器将javaScript,和html,等文件发给 客户端游览器 ,

由客户端 游览器来逐条解析 然后将页面显示出来

好处 减轻服务器的压力

在页面中引用javaScript 的3种方式

如果将javaScript 代码都写在 head 里 那么网页加载的时候 就会先将 javaScript 代码解析完 然后 在 加载body 里的 这样 会造成 网页加载的时候长时间的空白

如果将javaScript 代码放在 body 内 最后面 就会 网页加载就会先显示 整体框架 然后在 显示 javaScript 这样符合正常的用户体验 推荐

内部javaScript代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        
<script type="text/javascript"> </script>
        
	</body>
</html>

外部javaScript文件

创建一个后缀名为js的文本 文件  使用 src 导入    
<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   	
   	<script type="text/javascript" src="../javaScript/基础.js"> </script>
   </head>
   <body>

   
   </body>
</html>

行内javaScript

直接在html标签中 必须前面加上 javascript: 代码 才能使用js 语句

比如:<input type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');">

使用场景

内部javaScript 用于javaScript 代码量少的 仅限于单个页面

外部javaScript 用于javaScript代码较多 重复应用多个页面

行内havaScript 适用于javaScript代码极少 只适用于当前标签

变量的声明和赋值

语法:

var 变量名 ;
var 是声明变量所使用的关键字,

变量名不能是 首字母数字, 和关键字 来命名

声明变量的同时进行赋值(赋初始化值)

由于js 是弱类型语言 ,因此不用声明变量类型 ,系统会自动声明该变量,

var wid=20; //在声明变量wid ,的同时将20 赋给了wid

同时声明多个变量

var w,x,y=1,c=20; 在一行代码中声明多个变量.各变量之间用逗号隔开

注意 事项

在js中是区分大小写的 所以大小写不同的相同变量 表示不同的变量
1.
变量名 要注意 大小写 和 关键字 的区分 等 这种错误很难找的 一般关键字是 驼峰命名的
1.
变量名可以不经过声明而直接使用,但这种方法很容易出错,也很难查找排除错误,因此不推

还有就是 不止 var 可以声明变量 还有let const(常亮)

var 和let的区别就是 var 设置的变量 是全局变量 如果不注意 这样很容易就造成 变量重名 ,数据被修改 等问题

而 let 关键字可以将变量绑定到所在的作用域中 你是局部变量那么就是局部作用域 …

const 变量一旦被赋值,就不能再改变了, 而且const 声明的变量必须经过初始化。

空格的三种方式

&nbsp;  
\t     (一个tab键  也就是3个空格)
\xa0\xa0\xa0\xa0\xa0\xa0\xa0

数据类型

尽管在声明变量时不需要声明变量的数据类型,而由赋给变量 的值来决定的

在js中提供了常用的基本数据类型

undefined(未定义类型) 没给初始值
*
null(空类型) (一般都是自己定义的) js不会默认 在java中字符串会默认为null

在prompt() 中点击取消返回的是null (类型判断是object)
*
number (数值类型)
*
String(字符串类型) 单引号 和双引号 括起来的
*
boolean(布尔类型) true false

可以通过typeof运算符来判断 一个值或变量究竟是那种类型

其返回的结果有以下几种:

undefined: 如果变量没有付初始值 返回undefined
1.
number: 如果变量是数值类型返回number

数值类型包括 整数 ,小数 和 8进制 ,16进制, 2进制

比如 var num=23; var num=23.0;

var num=070 ; // 2进制 会爆红不用管 等于10进制 56;

var num=0x1f; //16进制 等于10进制31
1.
String: 如果变量是字符串类型,(不区分字符和字符串) ,返回String
1.
object: 如果变量时null类型(值为空) ,或者变量时引用类型( 对象,函数,数组)都返回object

列:

var a,b=10,c="haha",d=new Date(),e=new Array();
    document.write(typeof (a)+"<br>");
    document.write(typeof (b)+"<br>");
    document.write(typeof (c)+"<br>");
    document.write(typeof (d)+"<br>");
    document.write(typeof (e)+"<br>");
    document.write(typeof (null));
	document.write(typeof (true)+"<br>");

结果

undefined
number
string
object
object
object

boolean

null和undefined 是相等关系 但是 他们代表的含义不一样

alert(null==undefined); //返回true

判断NaN

特别注意 如果 一个变量 参加了 计算 如果其中有一个为空(没赋值) 那么返回的就是NaN 非数值类型

我们可以使用 isNaN(内容) 来捕捉

如果不是数值 就是 true 是数值就是false

列 :

var a;

var b=1;
document.write( a+b);

结果:NaN

应为 a没有值 js中的数据类型是根据值来判断的

a没有赋值不知道他是什么数据类型 所以 结果NaN

也就是 变量在计算之前 必须有值 才能 进行运算 否则都是 NaN 也可以为了方便在创建的时候就 赋值

字符串的属性和方法

javaScript 和java中的字符串使用方法差不多

方法介绍
str.length获取字符串长度
str.charAt(index)返回指定位置字符
str.indexOf(str,index)查找字符串中指定字符串首次出现的位置找到了返回下标,没找到返回-1
str.lastIndexOf(str,index);方法返回指定文本在字符串中最后一次出现的索引: 没找到返回-1
str.toLowerCase()把字符串转换成小写
str.toUpperCase()把字符串转换成大写
str.substring(index1,index2)返回指定索引 index1 和index2之间的字符串 包括index1 不包括index2如果省略第二个参数,则该将截取index1右边字符串的部分
str.slice(-13,-7);如果某个参数为负,则从字符串的结尾开始计数。
str.split(str)将字符串分割为字符串数组
str.replace()只替换首个匹配: 形成新的字符串替换全部要加 上/ /g 下面有示例
str = str1.concat(str2,?,?);连接两个或多个字符串
str.trim()方法删除字符串两端的空白符:
str.includes(?)返回布尔值,表示是否包含
str.startsWith(?)返回布尔值,是否以??开头
str.endsWith(?)返回布尔值,是否以??结尾

常用的案例:

将字符串 分割为字符串 数组 然后遍历结果

var  arr=str.split(",");
    for ( var  c in arr) {
        document.write(arr[c]+"<br>");
    }

替换

var str="{'name':'胡','age':'20'}";
		var s=str.replace(/'/g,"\"");  //全局将单引号替换成 双引号
		var sb=str.	replace("'","\"")   //将第一个单引号替换成双引号

获取文件名称 和获取文件后缀名

var pa=$(this).val();
 var index=pa.lastIndexOf('\\')+1;
 var  align=pa.substring( index,pa.length);
 alert( align)   //文件名称

  //获取文件后缀 不加点
var aszd=align.lastIndexOf('.')+1;
var  alaad=align.substring(aszd,aszd.length);  //文件名称

判断是否是小数和整数

var total = 1.223;	   
		var y = String(total).indexOf(".") + 1;//获取小数点的位置
		var count = String(total).length - y;//获取小数点后的个数
		if(y > 0) {  
		//小数
		} else {
		//整数
		}

数组

在js中的数组都是可变长度的 和java中的 ArrayList 集合 用法差不多

语法:

var arr=new Array(5); //表示创建数组arr 长度5

可以不指定长度 var arr0=new Array();

还可以直接初始化:var arr1=new Array(“1” , ”2” , ”3”); 也可以是[ ]

赋值:

下标赋值
var arr2=new Array(3);

arr2[0]=”1”;

arr2[1]=”2”;

arr2[2]=”3”;

除了new Array()定义 还可以 直接 [ ]

var arr =[“1” ,”2”,”3”];

数组的常用方法和属性

方法介绍
length返回数组元素个数 从1开始
arr.join("?")把数组中所有元素放在一个字符串里 通过一个分隔符进行分割
arr.sort()对数组进行排序 (从小到大)
arr.reverse();将值倒过来 比如 123 结果 321
array.push("?")向数组末尾添加一个或者多个元素,返回新的长度
array.pop()删除最后一个元素
array.includes(str)判断元素是否在数组中存在
array.splice(index,howmany,item1,…)添加/删除元素/替换,然后返回执行前的元素
eval("?")将字符串格式的数组转为 数组对象

使用splice

index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, …, itemX 可选。向数组添加的新项目。

var arr = new Array(6)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    arr[3] = "James"
    arr[4] = "Adrew"
    arr[5] = "Martin"
替换指定位置元素       从下标从0开始
    arr.splice(2,1,"AAAA")
   	alert(arr)
删除指定位置元素
    arr.splice(2,1)
删除多个元素
    arr.splice(2,3)  //从第二个位置开始删除往后3个元素

后端传来的数组格式字符串转换为数组对象

将后端传来的数组格式字符串"[1,2,3,4]" 
var str=data.substring(1,data.length-1);
var array=str.split(",");

或者  使用 eval  将字符串格式的数组转为 数组对象
	var a="[1,2,3,4]"
	var a1=eval(a)
	alert(a1[0])

map

var map = new Map();
只能通过此方法进行 设置值  
map.set("key","value");
取值
map.get("key");
判断key是否存在
map.has("key");
删除key
map.delete("key");

一般情况下 在js中map 用的比较少 都是使用json

循环

循环有两种 一种 是

for (var i=0;i<对象或数组.length;i++){

	}

	while(条件){

	内容

	}

	do{

	内容

	}while(条件)

另一种

for(var has in 对象或数组 ){

}
这一种 只能获取 数组的下标    而不是值

演示:

var str=["a","b","c","d"]			
			for (var i = 0; i <  str.length; i++) {
				document.write(str[i])
			}
var str=["a","b","c","d"]			
			for (var i in str) {
				document.write(str[i])
			}
## 运算符
算数运算符+ - /* / % ++ –
比较运算符>,< , >=,<=,== ,!= ,=, !=
逻辑运算符&&!
赋值运算符= += -=

其中==表示等于 === 表示恒等 !==表示不恒等 都是用于比较

但是 ==时比较 是否 一样 而 ===还包括是不是一个类型的

比如 字符123 和 数值123

用== 返回 true 而用=== 返回false 应为数据类型不匹配

在计算加减乘除的时候 一定要用(?+?) 括起来 否则结果不对

逻辑控制语句

和java一样 分为 if else , if else if 和 switch

if(条件){

内容

}else{

内容

}

if(条件1){

内容

}else if(条件2){

内容

}else if(条件3){

内容

}else{

}

switch(条件){

case 值:

内容

break;

case 值:

内容

break;

default:

内容

break;

}

注释

分为 单行注释 //

多行注释 //* /*/

js中的关键字和保留字

不能以关键字 和保留字作为 变量 和函数名 否则找错都不好找

关键字
break do instanceof typeof

case else new var

catch finally return void

continue for switch while

debugger/* function this with

default if throw delete

in try let const

保留字

abstract enum int short

boolean export interface static

byte extends long super

char final native synchronized

class float package throws

const goto private transient

debugger implements protected volatile

double import public

常用的输入和输出(代码检测)

在网页上 经常会弹出对话框 提醒信息 如注册时候弹出的提示信息 或弹出一个用户等待输入 数据的 对话框 这样的 输入,输出 在js 中叫做警告和对话框

输出alert

语法

​ alert(“提示信息”);

里面有一个确认的按钮 和 提示文字的输出

可以用来检测 流程是否 运行 和if for 等是否进入等 流程控制

输入prompt

语法:

prompt(“提示信息”,”输入框的默认信息”)

第一个属性是提示信息

第二个属性是 输入框内默认的显示信息 可以不加 用””代替

如果点击确认那么 文本框内的数据 就给了 str变量 如果点击了取消 那么 就返回null给str

注意 文本框内的数据 是字符类型 如果参与计算需要转换为数值类型

代码检查console

相比alert他的优点是:

  1. 他能看到结构化的东西,如果是alert,弹出一个对象就是[object object],但是console能看到对象的内容
  2. console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

基本用法

console.log('最常见用法\n换行');

console.error('输出错误信息 会以红色显示');

console.warn('打印警告信息 会以黄色显示');

console.info('打印一般信息');

console.clear();//清空上面的console显示

按f12 在控制台中 查看

打印 感觉控制台内容太多了 可以使用

console.clear() 清空控制台

函数

在js中的函数类似于java中的 方法 是执行特有功能的代码块

但是js中的函数使用更为简单 ,不用定义函数 类型 , 调用时也不需要对象.方法名

而是直接 函数名称 就可以了

系统函数

系统函数就是 js内部写好的函数 不用在自己写了

比如: js 中提供了 二个数据类型 转换 将 字符串转换成数值类型

1.parseInt()

​ 解析一个字符串 返回一个整数

​ 语法parseInt(“字符串”);

2.parseFloat()

​ 解析一个字符串 返回一个浮点数

注意

parseInt(),和parseFloat() 处理字符串之前会先解析 他们首先查看位置0处的字符

判断他是否有一个数字,如果不是则返回NaN,然后不在继续执行了,如果该字符是有效数字

则将继续解析直到发现非有效数值, 此时将返回之前解析过的数值

//使用parseInt
var strs="41233";
document.write(parseInt(strs)+"<br>");//结果41233
var str="412ccsa";
document.write(parseInt(str)+"<br>");//结果412
var str1="41.61ccsa";
document.write(parseInt(str1)+"<br>");//结果41
var sra="aa1234";
document.write(parseInt(sra)+"<br>");//结果NaN
//使用parseFloat 只会解析第一个 点 
var st="123.23";
document.write(parseFloat(st)+"<br>");//结果123.23
var st1="123.76.1415ads"
document.write(parseFloat(st1)+"<br>");//结果123.76
var st2="12412asd";
document.write(parseFloat(st2)+"<br>");//结果12412
var st3="aad123.412.213.3";
document.write(parseFloat(st3)+"<br>");//结果NaN

保留指定小数位

var num=12.333333

var jieg=num.toFixed(2);  

alert(jieg) //结果 12.33

自定义函数

语法:

function 函数名 (参数1,参数2,参数3){

			内容				

	return 返回值;  //可选

}

介绍

function 是定义函数的关键字 必须有

参数: 可无参 ,可以有参 ,可有参默认值 js中不用定义参数类型

{ } 是开始和结束

return 是函数执行完返回的值

调用函数

调用函数时,必须指定函数名和括号 比如 butt();

如果有参数 : 方法内部没有调用参数的话 可以不用 指定 或者是参数设置了默认值也不用指定

否则就会报错 undefined

一般方法和元素事件配合使用

语法 事件=”函数名()”;

列:

<!--定义一个按钮-->
<input type="button" value="显示5次欢迎" onclick="butt()">
    
<script type="text/javascript">
    //定义无参函数
function butt(){
    for (let i = 0; i <5 ; i++) {
        document.write("<h1>欢迎欢迎 </h1>");
    }
}
</script>

还可以利用prompt 来写入值

<!--定义一个按钮-->
<input type="button" value="显示5次欢迎" onclick="butt(prompt('请输入显示的次数',''))">
<script type="text/javascript">
    
    //定义带参函数
function butt(count){
    for (let i = 0; i <count ; i++) {
        document.write("<h1>欢迎欢迎 </h1>");
    }
}

定义带默认值参数 函数

function butt(num=1){
        alert(num)
    }
butt()  //调用

定义 有返回值 函数

function butt(){
  return 100;
}

var a=butt();
alert(a)  //结果100

编写一个 四则运算 也就是 加减乘除

<!--定义一个按钮-->
<input type="button" value="计算" onclick="butt(prompt('请输入第一个数',''),prompt('请输入运算符',''),prompt('请输入第二个数',''))">
<script type="text/javascript">
    //定义带参函数
function butt(count,str,count1){
    //将字符 转换为 数值
	count=parseFloat(count)
	count1=parseFloat(count1)
   switch (str) {

       case "+":
           document.write(count+str+count1+"="+(count+count1));
           break;
       case"-":
           document.write(count+str+count1+"="+(count-count1));
           break;
       case"*":
           document.write(count+str+count1+"="+(count*count1));
           break;
       case"/":
           document.write(count+str+count1+"="+(count/count1));
           break;
       default:
           document.write("输入有误")
           break;
   }
}
</script>

变量的作用域

全局变量

js 的变量作用 范围 也是分为 全局变量和 局部变量

js全局变量时在所有函数之外的脚本中声明的变量 ,作用范围是该变量之后的所有语句

包括其后函数中的代码,以及其后的 新的<script></script>标签中代码

局部变量

js中的局部变量,是在{ } 内声明的变量, 只有在该{ }中的语句可以使

如果在其他{ } 中声明的同名的局部变量 那么他们之间 没有关系

<script type="text/javascript">
var c = 20;
function butt(){
  var c = 5;
    for (var i = 0; i < c; i++) {  //未使用 全局变量的 c=20 使用的是 c=5
        document.write("&nbsp;&nbsp;&nbsp;"+i);
    }

}
</script>

常用的内置对象

Date事件对象

getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getFullYear()从 Date 对象以四位数字返回年份。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。

获取当前系统时间 切记 月份 比实际的时间少一个月 所以要getMonth()+1的

//获取当前时间 年月日 时分秒 并且数据库可以存储的 
var c=new Date();
var riqi=(c.getFullYear()+"-"+(c.getMonth()+1)+"-"+c.getDate())  //获取年月日
var shij=(c.getHours()+":"+c.getMinutes()+":"+c.getSeconds())  //获取时分秒
var ti=riqi+" "+shij
alert(ti)

获取第二天 0点时间 ?年 ?月 ?日 0:0:0

var tie= new Date().getTime()+86400000-(new Date().getHours()*60*60+new Date().getMinutes()*60+new Date().getSeconds())*1000
var c=new Date(tie);
var riqi=(c.getFullYear()+"-"+(c.getMonth()+1)+"-"+c.getDate())
var shij=(c.getHours()+":"+c.getMinutes()+":"+c.getSeconds())

比较时间大小

//数据库中的时间 
//data 的格式 可以是 ?-?-? 也可以是?/?/? 只要是能存到数据的时间类型 直接获取出来 就能转换成时间戳
var c_mysql=new Date(data);
//本地的时间
var c=new Date();
var da1=new Date(c).getTime();  //本地时间戳
var da2=new Date(c_mysql).getTime();  //数据的时间戳
console.log(da1+"--"+da2)
    if(da1>=da2){

特别注意 在有些 游览器中Data(带参) 不支持- 只支持/ 会报错invalid date 只能通过alert打印出来 不会在控制台中显示 (比如微信 IE)

所以需要进行转换

if(data.indexOf('.',15)===-1){  //如果返回-1 就表示没有.0
    data=data.replace(/-/g,"/")
}else{ //否则就需要 进行去掉
    data=data.replace(/-/g,"/")
    data=data  .substring(0,data.length-2)
}

这里为什么有个 . 进行判断呢 因为 有些数据库 中传来的 包括 年/月/日 00:00:00.0

而这最后的.0 是无法被识别的

虽然数据库中是00:00:00 但是传递到前端就会多了.0了

Math数学对象

ceil() 对数进行上舍入Math.ceil(25.4):返回26Math.ceil(-15.4) 返回-25
floor() 对数向下取整和ceil相反
round() 四舍五入满5进 否则 退
?.toFixed(数量)保留指定的几位小数 var a=2.333333;var b=a.toFixed(1) 结果 2.3
random() 返回0-1中的随机数Math.random();例如0.5760975427063045
random()方法返回的随机数包括0  但是不包括1, 而且都是小数 
//如果想随机1-100 的 包括1 和100 (小数)
var c=Math.random()*100+1

//如果希望是整数 1~100 包括 1 和 100
var c= Math.floor( Math.random()*100+1);    
//从1000开始 到9999结束 包括 1000 和 9999 (4位整数)以此类推
var c= Math.floor( Math.random()*9000+1000);  
	
//从1 到100 (包括1 和100)
var c= Math.ceil( Math.random()*100);		
//从1001到10000结束 包括 1001 和 10000
var c= Math.ceil( Math.random()*9000+1000); 

//如果希望从0开始到100结束 包括0 和100
var c= Math.floor( Math.random()*100+0.1);
//如果是0~99就把 后面的+0.1 去掉就行
//如果希望从1000开始 到10000结合 并且包括1000 和10000
var c= Math.floor( Math.random()*9000+1000.1);  

//以此类推

相关文章