01JavaScript基础

最新推荐文章于 2024-01-08 09:17:33 发布

朱尔斯Jules

最新推荐文章于 2024-01-08 09:17:33 发布

阅读量507

点赞数

分类专栏： JS+jQuery 文章标签： javascript 前端 html

原文链接：https://blog.csdn.net/qq_56886142/article/details/125106168

版权

JS+jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript基础

JavaScript简介

JavaScript是一种基于对象和事件驱动的、并具有全性能的脚本语言

JavaScript特点：

向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释

脚本（Script），是使用一种特定的描述性语言，依据一定的格式编写的可执行文件。

组成：

分别为核心(ECMAScript) 、文档对象模型(DOM)、浏览器对象模型(BOM)。这三部分分别描述了该语言的语法和基本对象、处理网页内容的方法和接口、与浏览器进行交互的方法和接口。

基本结构：

写在body标签后面

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

< script>…</ script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

JavaScript的执行原理：

浏览器输入—>发送请求包含JavaScript的请求页面---->到应用服务器（解析HTML标签*

和JavaScript）----->从服务器下载含JavaScript的页面---->返回浏览器响应

网页中引用JavaScript的方式

使用< Script >标签

外部JS文件

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

直接在HTML标签中

<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
<a href= "javascript:;" onclick="xxxxxxx"></a>  //先消除a标签自身的点击，添加js的点击事件

JavaScript核心语法

主要包含:变量、数据类型、数组、运算符号、控制语句、注释、输入/输出、语法约定等。

变量：

先声明变量在赋值。var—用于声明变量的关键字； width—变量名
```
var width;
width = 5;
```
同时声明和赋值变量，可以连续声明赋值s
```
var name = "xxx";
var x,y,z = 10;
```
不声明直接赋值
```
width = 5;
```
变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用

JavaScript区分大小写，特别是变量的命名、语句关键字等

数据类型：

undefined

var width; 变量width没有初始值，将被赋予值undefined
null：表示一个空值，与undefined值相等

number

var iNum=23;  	 //整数
var iNum=23.0;   //浮点数

boolean：true和false
string：一组被引号（单引号或双引号）括起来的文本
```
var string1 = "This is a string";
```

typeof运算符：

typeof检测变量的返回值
typeof运算符返回值如下
- undefined：变量被声明后，但未被赋值
- string：用单引号或双引号来声明的字符串
- boolean：true或false
- number：整数或浮点数
- object：javascript中的对象、数组和null

String对象：

属性：

字符串.length
方法
字符串对象.方法名（）；

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组

数组：

创建数组
```
var 数组名称 = new Array(size);
```
- Array：表示数组的关键字
- size：表示数组中可存放的元素总数，可以越界

为数组元素赋值：

var fruit= new Array("apple", "orange", " peach","banana");

访问数组：数组名【下标】

var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";

数组常用的属性和方法：

类别	名称	描述
属性：	length	设置或返回数组中元素的数目
方法：	join( )	把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
	sort()	对数组排序
	push()	向数组末尾添加一个或更多元素，并返回新的长度

其他方法：http://www.w3school.com.cn/js/jsref_obj_array.asp

运算符号：

类型	运算符
算术运算符	+ - ***** / % ++ —
赋值运算符	= += -=
比较运算符	> < >= <= == != === !==
逻辑运算符	&& \|\| !

逻辑控制语句：

if条件语句
switch多分支语句
for、while循环语句

for–in

var fruit = ["apple", "orange", "peach","banana"]; 
for(var i in fruit){
       document.write(fruit[i]+"<br/>");
}
//此处i不是接收的值，而是值的下标，值用fruit[i]

循环中断：

break

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
	if(i==3){
        break;
    }
    document.write("这个数字是："+i+"<br/>");
}
</script>
//输出：0 1 2

continue

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
    if(i==3){
        continue;
    }
    document.write("这个数字是："+i+"<br/>");
}
</script>
//输出：0 1 2 4 5

  
  

##### 注释：

- 单行注释以//开始，以行末结束
- 多行注释以 /\* 开始，以 \*/ 结束，符号 /\*…… \*/ 指示中间的语句是该程序中的注释



##### 常用的输入/输出：

- alert( )

  ```js
  alert("提示信息")

prompt( )

prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");

弹出可以输入内容的弹窗

confirm( )

confirm("内容确认或者取消弹窗……");

语法约定：

1、大小写的区分

1). JavaScript的关键字，永远都是小写的；
2). 内置对象，如Math和Date是以大写字母开头的；
3). 对象的名称通常是小写；若是多个单词，驼峰（Camel）命名法。

驼峰（Camel）命名法：开头单词小写，后面单词首字母大写。使用的很普遍，很多人习惯这种命名方法。示例：userName。

2、变量、对象和函数的名称命名

当声明变量、对象和函数的名称时大小写，数字，下划线，美元符号都可以，但是必须以字母，下划线，美元符号开头。否者会出现Uncaught SyntaxError类型的错误提示。

3、分号 “;”

JavaScript允许开发者自行决定是否以分号结束一行代码。
如果没有分号，JavaScript就将行代码的结尾看作该语句的结尾，不会报错。但最好每写完一行代码就加上";" 作为结尾。

程序调试

1. Chrome开发人员工具

停止断点调试
单步调试，不进入函数体内部
单步调试，进入函数体内部
跳出当前函数
禁用所有的断点，不做任何调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z73mGEAh-1661166260779)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1660726767700.png)]

2. alert( )方法

alert() 会阻塞 UI 和 alert() 以下的 javascript 代码的执行，必须点击 ‘确定’ 按钮才能继续，非常低效

函数

函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数和自定义函数

系统函数：

parseInt (“字符串”)

将字符串转换为整型数字
如: parseInt (“86”)将字符串“86“转换为整型值86

<script type="text/javascript">
	var num1 = prompt("提示","请输入第一个数");
	var num2 = prompt("提示","请输入第二个数");
	var sum = parseInt(num1) + parseInt(num2);
	document.write(sum);
</script>
//sum = 22

parseFloat(“字符串”)
- 将字符串转换为浮点型数字
- 如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
isNaN()
- 用于检查其参数是否是非数字(是否不是数字。为true不是数字)
```
if(isNaN(num1))
```

自定义函数：

定义函数：

function 函数名(参数1,参数2,参数3,…){	//无参或者有参
     //JavaScript语句
     [return 返回值]    //可有可无
}

调用函数：

函数调用一般和表单元素的事件一起使用，调用格式
```
事件名 = "函数名()"
```

调用无参函数：

<script>
    function study(){
        for(var i=0;i<5;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }
</script>

<input name="btn" type="button" value="显示5次欢迎学习JavaScript" onclick="study()" />

单击此按钮时，调用函数study( )，执行函数体中的代码

调用有参函数：

<script>
    function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }
</script>

<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
  	   onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />

单击此按钮时，调用函数study (count )，执行函数体中的代码

函数示例：

方法：

<script>
    //show();
	function show(){
        alter("张三");
    }
	show();  //在方法前，在方法后都能使用
</script>

<script>
	function show(name){   //参数定义不需要var
        alter("名字为"+name);
    }
	show(123);  //类型，根据自己输入的识别
</script>

<script>
	function show(name,age){   
        alter("名字为"+name);
    }
	show("张三",18,11);  //两个参数，三个值，不会报错，多的不输出
</script>

对象：

<script>
 function UserVo(){
     this,name = "张三";
 }
 var u = new UserVo();
    u.name = "李四";  //张三 被修改为李四
	alert(u.name);    //李四
</script>

<script>
 function UserVo(){   
     this,name = "张三";
     this.show = function(msg){   //传参msg
         alert(this.name);//调name要this 
         alert(msg);
     }
 }
 var u = new UserVo();
    u.name = "李四";  
	u.show("msg---传参");  //方法调用
</script>

构造方法：

<script>
 function UserVo(n){   
     this,name = n;
     this.show = function(){  
         alert(this.name); 
     }
 }
 var u = new UserVo("张三");   //构造方法
	u.show(); 
</script>

变量的作用域：

**形参：**顾名思义，形式参数，仅仅是声明了参数的类型和参数名称，未实际分配和赋值。

**实参：**实际参数，是指函数调用时，实际赋值和分配内存空间。

全局变量
局部变量

<body onload="second( )">
var i = 20;
function first( ){
    var i = 5;
    for(var j = 0; j<i; j++){
        document.write("&nbsp;&nbsp;&nbsp;&nbsp;"+j);
    }
}
function second( ){
    var t = prompt("输入一个数","")
    if(t > i)
        document.write(t);
    else
        document.write(i);
    first( );
}

事件：

名称	说明
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

onload的使用：

<script>
    function load(){
        var conent = document.getElementById("user");
        alert(conent);
    }
</script>
 //在此处，让div先加载，在加载方法。不加onload代码从上到下运行，获取不到user的值
<body onload="load()">  
    <div id="user">111</div>
</body>

onkeydown的使用：

<html onkeydown="down(event)">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script>
    //敲回车，登陆成功
	function down(e){
		//alert(e.keyCode);  //获得键盘的编码
		if(e.keyCode==13){
			login();	 //方法直接调用
		}
	}
	function login(){
		alert("登录成功！");
	}
</script>

eval()

eval("var a=1");//声明一个变量a并赋值1。

//执行加运算，并返回运算值。
var num = eval("2+3");
document.write(num);

eval("mytest()");//执行mytest()函数。
eval("{b:2}");//声明一个对象。如果想返回此对象，则需要在对象外面再嵌套一层小括如下：eval("({b:2})");

注：使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量

```

eval()

eval("var a=1");//声明一个变量a并赋值1。

//执行加运算，并返回运算值。
var num = eval("2+3");
document.write(num);

eval("mytest()");//执行mytest()函数。
eval("{b:2}");//声明一个对象。如果想返回此对象，则需要在对象外面再嵌套一层小括如下：eval("({b:2})");