JavaScript基础语法

本文主要是介绍JavaScript基础语法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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 的执行原理

游览器客户端(通过地址) 向服务器索要页面,
服务器将数据读取出来进行整理
服务器将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中是区分大小写的所以大小写不同的相同变量表示不同的变量
变量名要注意大小写和关键字的区分等这种错误很难找的一般关键字是驼峰命名的
变量名可以不经过声明而直接使用,但这种方法很容易出错,也很难查找排除错误,因此不推

还有就是不止 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
number: 如果变量是数值类型返回number

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

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

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

var num=0x1f; //16进制等于10进制31
String: 如果变量是字符串类型,(不区分字符和字符串) ,返回String
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他的优点是：

他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容
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);  

//以此类推

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

这篇关于JavaScript基础语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程