03前端第三章Javascript_前端中subform-CSDN博客

本文链接：https://blog.csdn.net/m0_51996043/article/details/123085656

本文详细介绍了JavaScript的基础知识，包括JavaScript的历史、作用、与HTML和CSS的关系，以及基本语法、函数、内置对象、事件处理和DOM操作。JavaScript主要用于网页动态效果、响应用户事件、表单验证和操作页面元素，它是一种解释性语言，无需编译，由浏览器直接执行。文章还讲解了如何使用JavaScript进行对话框操作、变量声明、数据类型、算术运算符、控制语句，以及如何操作字符串、数组、日期等内置对象。

摘要由CSDN通过智能技术生成

html是网页内容（骨架），css是网页样式（皮肤），JavaScript是网页行为（动作）。

JavaScript概述

JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript不需要编译，是有解释器逐行解释执行。

例如，SQL，JavaScript，Python
java是先编译，后交给JVM

javaScript历史:

JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。

Netscape公司将这种脚本语言命名为LiveScript，与java一样,也是面向对象的语言,而且无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。

Netscape公司见LiveScript大有发展前途，而SUN公司( java)也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB开发工具。

作用

为网页添加动态效果。

响应客户端鼠标和键盘事件

onclick 当点击标签时，标签会产生一个事件（动作），可以通过事件调用js函数（完成某个操作）
<input type-"button" οnclick="alert()">

客户端页面表单数据验证

在前端把一些无效数据过滤掉，减轻服务器端压力（工作量大）。
动态的改变页面标签的样式（动态操作）

JavaScript与html,css关系

JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互。弥补了HTML的缺陷。

基本语法

脚本写在哪里

javaScript脚本写在一组

对话框

alert(‘welcome!’); 提示对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部的js脚本文件 -->
		<script src="js/out.js" type="text/javascript" charset="utf-8">
		/* 这里不能写脚本 */
		</script>
		
		<script type="text/javascript"> //这里可以写js脚本
			//单行注释
			/* 多行注释 */
			alert("你好，JavaScript"); //调用js中的全局函数，对话框（弹出框）
		
		</script>
	</head>
	<body>
	</body>
</html>

alert("你好，我是外部的JavaScript");

变量的声明

● 声明变量用var关键字

例如 var name;

● 声明变量的同时对其赋值

var test=“THIS IS A BOOK”

/* 基本语法：只讲与java中不同，js特有的 */
/* 变量的声明 variable  命名规则遵循java中的标识符的命名规则 
    js是弱类型语言，声明变量，可以给他赋任何类型的数据
*/
var a = 10;
var b = "abc";
b = true;

数据类型

JavaScript支持的数据类型

1、数值型(number)：其中包括整型数和浮点型数。

2、布尔型(boolean)：即逻辑值，true或flase。

3、字符串型：由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。（使用单引号来输入包含引号的字符串。）

4、undefined类型

5、 Object类型

/* 数据类型 */
//数值型  整数、浮点
//boolean型  true false
//字符串
var s = "abc";
s1 = 'abc';  //单引号表示的也是字符串
typeof(s1); //返回s1的类型
alert(typeof(s1)); //alert对结果进行输出
//undefined类型 声明后未赋值的变量
var c;
alert(c);  返回undifined
//Object类型 对象型 js对象结构与java对象结构不同
var date = new Date();
alert(date);

算数运算符

/* 运算符 */
var x = 10;
var y = 5;
var z = "5";
console.log(x+y);  //15 log日志:将其打印到浏览器控制台
console.log(x+z); //105 数值+字符串（不会转换）   +是连接功能
console.log(x-y); //5
console.log(x*z); //50
console.log(x-z); //5 数值-*/字符串数字（隐式的进行转换）=数值
console.log(x-"a"); //返回NaN not a number
//比较运算  =（赋值）  ==（比较值是否相等）  ===(比较值和类型)
console.log(x>y); //true
console.log(x>z); //true 遵循隐式转换    数值>字符串数字（隐式转换），然后比较
console.log(y==z); //true 只比较值是否相等
console.log(y===z); //false 值相等类型不等

控制语句

/* 流程控制 */
/* if else
switch(a){
    case1:break;
    case2:break;
    default;
} */

/* for(var i = 0;i<10;i++){
    console.log(i);
} */

/* while(){

} */

/* do{

}while(); */

/* break;
continue; */

函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
			虽然js是面向对象的语言，但是函数可以独立的定义
			函数：为完成某一个特定功能，定义的函数，可以重复多次调用
			java中的方法必须写在类中，对象调用
			*/
		   /* 如何定义函数 */
		   function demo(){
     
			   alert("hello function");
		   }
		   /* 调用函数 */
		   //demo();
		</script>
	</head>
	<body>
		<input type="button" value="测试按钮" onclick="demo()"/> //也可通过按钮调用
	</body>
</html>

/* 如何定义函数 */
/* function demo(){
   alert("hello function");
} */
/* 调用函数 */
//demo();

/* 定义有参的方法，不需要var声明 */
/* function demo(a,b,c){
   alert(a+":"+b+":"+c);
} */
//demo(10,"abc",true); //可以接收任意类型

/* 有返回值  不需要声明有返回值的类型 */
function demo(a,b){
   
   return a+b;
}
var res = demo(10,5);
console.log(res);

全局函数

parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。

parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。

typeof (arg)返回arg值的数据类型。

eval(arg) 可运算某个字符串。

/* js函数库中提供的全局函数 函数库在浏览器中，我们可以直接使用
    parseInt("字符串") 把字符串转化为整数
*/
    //var a = "10.5"; //15
    //var a = "10"; //15
    //var a = "1a0"; //6 把开头的数字部分转换
    //var a = "q0"; NaN 字母开头无法转换
    //console.log(parseInt(a)+5); 

    // var b = 10.5; //15.5
    // var b = "10.5"; //15.5
    //var b = "10a.5"; //15
    // var b = "a10a.5"; //NaN
    /* console.log(parseFloat(b)+5); */

    /* 返回变量的数据类型 */
    /* console.log(typeof(10));
    console.log(typeof("1o"));
    console.log(typeof(true)); */

    console.log("5+5"); //5+5
    /* eval()运算某一个字符串 可以把字符串当做脚本执行 */
    console.log(eval("5+5")); //10
    var a = 10;
    console.log(eval("a+5")); //15

内置对象

String字符串

属性

length 用法：返回该字符串的长度.

方法

charAt(n)：返回该字符串位于第n位的单个字符.

indexOf(char)：返回指定char首次出现的位置.

lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.

substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.

split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

例如：‘1&2&345&678’.split(’&’)返回数组：1,2,345,678。

/* 
java有自己的标准（jdk）
前端五花八门，每一个浏览器的标准不同的，写的一个网页，在不同的浏览器效果不同的。
一个页面可以在不同的终端运行PC端、手机端、pad端
在所有的前端开发工具中，.提示都是不太准确的 */
var s = "ab:cdefg";
//s.big() //文字变大一倍
console.log(s.length);
console.log(s.substring(1,4)); //bcd substring(开始的位置，结束的位置)
console.log(s.substr(1,4)); //bcde substr(开始的位置，截取的长度)
console.log(s.split(":")); //['ab', 'cdefg']

Array组

数组的定义方法：var <数组名> = new Array();

这样就定义了一个空数组。以后要添加数组元素，就用：<数组名>[下标] = 值;

如果想在定义数组的时候直接初始化数据，请用： var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);

还可以var <数组名> = [<元素1>, <元素2>, <元素3>…];

属性

length ：数组的长度，即数组里有多少个元素。

方法

concat() 用于连接两个或多个数组。arrayObject.concat(arrayX,arrayX,…,arrayX)

pop() 用于删除并返回数组的最后一个元素。

push() 可向数组的末尾添加一个或多个元素，并返回新的长度。

join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。

reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数组变成：[3, 2, 1]。

sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列。

对数字排序需要调用排序函数。

function sortNumber(a,b){

return a - b;

}

/* 数组 */
/* var a = new Array(); //创建一个数组
a[0]=1;
a[1]="abc";
a[2]=true;
a[3]=new Date();
console.log(a); */
/* var a = new Array(1,2,3,true,"abc");
console.log(a);
console.log(a[3]); */
/* var a = [1,2,3,4,5,6,7];
var b = [8,9,10];
console.log(a.concat(b)); //连接
console.log(a.pop()); //删除并返回最后一个
console.log(a.push(11)); //向末尾添加元素并返回新长度
console.log(a); */

/* var s = a.join(":"); //将数组转为字符串，用指定的符号连接每一个元素
console.log(s); */

//sort()默认按照字符的编码排序 支持自定义排序规则
var c