Js 入门

最新推荐文章于 2023-10-26 13:36:31 发布

有何不可有

最新推荐文章于 2023-10-26 13:36:31 发布

阅读量160

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/qq_43542011/article/details/118371497

版权

Js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简介：

全称：JavaScript，是一种脚本语言

动态页面：可以人机交互

静态页面：不能人机交互

不需要安装：浏览器自带JS脚本

BOM：浏览器对象模型

DOM：文档对象模型

二、使用方法：

1.内置：

<body>
  <script type="text/javascript">

  </script>
</body>

2.引用外部JS文件

<script type="text/javascript" src="xx.js"></script>

可以在任何位置写，在head内或body内都行。

弹窗：

<script type="text/javascript">   /*习惯写在head里*/ 
		alert("haha");
</script>

三、Js变量：

是弱数据类型：

创建时无数据类型的区分：法① var x=1,y="11111";

法②var x; x=1;

而赋值时会区分。

四、控制台调试：

var x;
x="123+1";
console.log(x+1);

五、自定义函数：

1.创建：

法①可以先使用后定义

function 函数名(){
	代码段；
	return ***；   /*根据需要，不是必须的*/
}

法②函数表达式，必须先定义后使用

var 函数名=function(){
	return ***;
}

2.练习：

①注意函数必须要调用！

function add(){
	alert("s");
}
add();  /*调用*/

②需要时要写实参！

function add(x,y){
	alert(x+y);
}
add(1,2);  /*要写实参与形参对应*/

③需要时要写返回值

var m=function(x,y){
	var z=x+y;
}
alert(m(1,2));

出错：

修改：

var m=function(x,y){
	var z=x+y;
	return z;   /*注意*/
}
alert(m(1,2));

六、数据类型及转换

定义时不区分，使用时要区分。

类型	作用
number	数字类型（包括整型和浮点型）
string	字符串类型（必须放在单引号或双引号中）
boolean	布尔类型（值有2种：true，false）
underfine	未定义（一般指已声明但未赋值的变量）
null	空对象类型，var x=null和var x=" "有区别
object	对象类型，在js里常见的有window，document，array等
NaN	是Number的一种特殊类型，isNaN()，若是数字返回 false，否则返回 true

1.分类：

①强制类型转换：

parseFloat() 转换为浮点型

Numver() 包括整型和浮点型

Boolean() 布尔类型

parseInt() 转换为整型

②自动类型转换（即隐式类型转换）

2.练习：

①

var str="233";
console.log(parseInt(str)+1);
console.log(str+1);

②

var str="233";
console.log(parseInt(str)+1);
console.log(str*1+1);  /*“ str*1 ”是自动转换为数值类型*/

③字符串为字母

var str="abc";
console.log(parseInt(str));

var str="abc";
console.log(isNaN(str));

var str="123";
if(isNaN(str)==false){     /*判断条件可简化为：!isNaN(str)==false*/
	console.log(parseInt(str));
}else{
	console.log("错误");
	str=0;
}

③

a.全是数字

var str="123";
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(Number(str));

b.全是字母

var str="abc";
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(Number(str));

c.数字开头，字母结尾：

var str="123abc";
console.log(parseInt(str));   /* 会忽略后置的字母*/
console.log(parseFloat(str));   /* 会忽略后置的字母*/
console.log(Number(str));   /* 不会忽略后置的字母*/

d.以0开头的数字

var str="0123";
console.log(parseInt(str));   /* 会忽略后置的字母*/
console.log(parseFloat(str));   /* 会忽略后置的字母*/
console.log(Number(str));   /* 不会忽略后置的字母*/

e.小数

var str="0123。654";
console.log(parseInt(str));   /*不会四舍五入*/
console.log(parseFloat(str));   /*不会四舍五入*/
console.log(Number(str));    /*不会四舍五入*/

f. null

var str=null;
console.log(parseInt(str));   /*不会四舍五入*/
console.log(parseFloat(str));   /*不会四舍五入*/
console.log(Number(str));    /*不会四舍五入*/

g. “ ”

var str="";
console.log(parseInt(str));   /*不会四舍五入*/
console.log(parseFloat(str));   /*不会四舍五入*/
console.log(Number(str));    /*不会四舍五入*/

总结：字符向数值转换常用且易出错

④

var str="";
console.log(Boolean(str));

var str=null;
console.log(Boolean(str));

对字符串，有内容为true，无内容为false。对数值，除0外皆为true。

七、变量作用域：

全局变量：函数内部创建，其他函数不能使用
局部变量：函数外部创建，函数之间可以共享

八、比较运算符

1. 包括：

>、 ≥、!=、＜、≤

2.优先级：

自上而下——由高到低

运算符优先级
符号	描述
（）
++、--	自加自减
* / %	乘除取模
+ -
< 、<=、>、>=
==、!=	等于、不等于
&&
\|\|
?:	三目运算符
=	赋值

九、程序控制语句

if(){

}else if(){

}else{
	
}

switch(判断对象){
	case a:  
	       xxxx;
	      break;
	case b:  
	       xxxx;
	      break;
        default:  
	       xxxx;
	      break;
}

注意：case判断的只能是等于关系。

for (var i = 0; i <= 0; i++) {
	
}

while(){

}

do{

}while();

十、内置函数

1.字符函数

①

var str="abcdefghigklmnopqrstuvwyz";
console.log(str.substr(0,3));  /*参数1：起始位置
                                 参数2：截取长度*/

console.log(str.substring(0,3));   /*参数1：起始位置
                                  参数2：结束位置
                                  左闭右包*/
console.log(str.charAt(6)); /* 获取某位字符   */      

console.log(str.length);   /*求长度*/

console.log(str.indexOf("s"));    /*查找s第一次出现的位置*/
console.log(str.indexOf("f",4));    /*查找编号为4的位置开始查找参数1第一次出现的位置，没有则返回-1*/

注意从0开始。

②

var str="aa,ttt,k,aa,bb";
var arr=str.split(",");  /*以console.log(arr);,为分割将该字符串存到arr这个数组中*/
console.log(arr);
console.log(arr[0]);
console.log(str.concat("，cx","，j","x","2"));    /*将参数连接起来添加到字符串str中*/
console.log(arr.concat("cx","j","x",2));    /*将参数连接起来添加到数组arr中*/
console.log(str.replace("aa","cxj"));    /*用参数2替只替换一个参数1*/

2.日期函数

Date	对日期初始化，获取当前系统日期或指定一个日期
getDate	获取当前几号
getDay	获取当前周几，0表示周一
getMonth	获取当前月
getFullYear、getYear	获取当前年份，getYear现在不怎么用
getHours、getMinutes、getSeconds	获取当前小时、分钟、秒
getTime	获取毫秒数

var x=new Date();  /*获取当前系统时间*/
console.log(x);
var y=new Date("2021-7-3 9:10:59");  /*指定时间*/
console.log(y.getDate()); 
console.log(y.getMonth()+1);   /*月份从0开始：0——11*/
console.log(y.getFullYear()); 
console.log(y.getHours()); 
console.log(y.getMinutes()+1);   /*月份从0开始：0——11*/
console.log(y.getSeconds()); 
var z=new Date("2022-6-15");
var m=z.getTime()-y.getTime();   /*距离2022.6.15还有多少毫秒*/
console.log(parseInt((m/(24*3600*1000))));    /*转换为天数的整数*/

/*自定义函数，规定日期格式*/
function fun1(){ 
	var x=new Date(); 
	var yyyy,mm,dd,hh,mm,ss;
	yyyy=x.getFullYear();
	mm=x.getMonth()+1;
	dd=x.getDate();
	hh=x.getHours();
	mm=x.getMinutes();
	ss=x.getSeconds();
    var time=yyyy+"-"+mm+"-"+dd+" "+hh+"-"+mm+"-"+ss;
	return time;
}               
console.log(fun1());

3.数学函数

var x=15.68354;
console.log(Math.round(x));    /*四舍五入*/
console.log(x.toFixed(2));     /*保留2位小数，四舍五入*/
console.log(x.toFixed(0));
console.log(Math.min(2,6,8,1));
console.log(Math.max(2,6,8,1));
console.log(Math.abs(-4));

4.数组

var arr1= new Array();  /*实例化创建：声明或创建了一个不指定长度名为arr1的数组*/
var arr2= new Array(5);  /*声明或创建了一个长度为5名为arr2的数组*/
var arr3= new Array(2,5,"e","f",8);   /*声明或创建了一个带默认值的数组*/
var arr4=[2,5,"e","f",8];  /*创建一个数组并赋值的简写，又称隐式创建数组*/
console.log(arr4[0]);
console.log(arr4[5]);   /*下标超界*/

/*专门遍历数组的for循环*/
for(var x in arr4){  /*x保存的是数组的下标*/
	console.log(x);
	console.log(arr4[x]);
}

/*普通for循环*/
var n=arr4.length;
for(var i=0;i<n;i++){
	console.log(arr4[i]);
}

有何不可有

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js 入门

一、简介：全称：JavaScript，是一种脚本语言动态页面：可以人机交互静态页面：不能人机交互不需要安装：浏览器自带JS脚本BOM：浏览器对象模型DOM：文档对象模型二、使用方法：1.内置：<body> <script type="text/javascript"> </script></body>2.引用外部JS文件<script type="text/javascript" src="xx.j
复制链接

扫一扫