JavaScript 介绍

Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript 代码。

JS 是Netscape 网景公司的产品，最早取名为LiveScript;为了吸引更多java 程序员。更名为JavaScript。（与Java无关）
JS 是弱类型，Java 是强类型。
特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释JS 的浏览器都可以执行，和平台无关）

JavaScript 和html 代码的结合方式

第一种方式

只需要在head 标签中，或者在body 标签中，使用script 标签来书写JavaScript 代码
注：JS脚本插入在主体时，JavaScript语句能够被立即执行。也可以定义成函数，但必须引用才能执行。
示例代码：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// alert 是JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello javaScript!");
</script>
</head>
<body>
  <script type="text/javascript" >
    alert(“JS放置在主体中，直接运行！”);
  </script>
</body>
</html>

第二种方式

使用script 标签引入单独的JavaScript 代码文件
文件目录：

在这里插入图片描述
html 代码内容：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
现在需要使用script 引入外部的js 文件来执行
src 属性专门用来引入js 文件路径（可以是相对路径，也可以是绝对路径）
script 标签可以用来定义js 代码，也可以用来引入js 文件
但是，两个功能二选一使用。不能同时使用两个功能
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert("xx现在可以帅了");
</script>
</head>
<body>
</body>
</html>

第三种方式

放置-事件处理代码

<!-- edu_14_1_4.html -->
<html>
  <head>
  <title>直接在事件处理代码中加入JavaScript代码</title>
   </head>
  <body>
   <form>
    <input type="button" onclick="alert('直接在事件处理代码中加入JavaScript代码')" value="直接调用JavaScript代码">
    </form>
   </body>
</html>

消息对话框

1.警告框
alert (message);
2.确认框
var yn=confirm (message);
3.提示框
var s1=prompt (text, defaultText);

关键字

在这里插入图片描述

变量

什么是变量？变量是可以存放某些值的内存的命名。
JavaScript 的变量类型：

类型	名称
数值类型：	number
字符串类型：	string
对象类型：	object
布尔类型：	boolean
函数类型：	function

JavaScript 里特殊的值：

类型	含义
undefined	未定义，所有js 变量未赋于初始值的时候，默认值都是undefined.
null	空值
NaN	全称是：Not a Number。非数字。非数值。

JS 中的定义变量格式：
var 变量名;
var 变量名= 值;
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i;
// alert(i); // undefined
i = 12;
// typeof()是JavaScript 语言提供的一个函数。
// alert( typeof(i) ); // number
i = "abc";
// 它可以取变量的数据类型返回
// alert( typeof(i) ); // String
var a = 12;
var b = "abc";
alert( a * b ); // NaN 是非数字，非数值。
</script>
</head>
<body>
</body>
</html>

关系（比较）运算

等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
</script>
</head>
<body>
</body>
</html>

逻辑运算

逻辑	运算符
且运算：	&&
或运算：	`\|\|`
取反运算：	!

在JavaScript 语言中，所有的变量，都可以做为一个boolean 类型的变量去使用。0 、null、undefined、””(空串) 都认为是false；

/*
&& 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且&& 与运算和||或运算有短路。
短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行
*/

var a = “abc”;
var b = true;
var d = false;
var c = null;

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/* 在JavaScript 语言中，所有的变量，都可以做为一个boolean 类型的变量去使用。
0 、null、undefined、””(空串) 都认为是false；*/
// var a = 0;
// if (a) {
     
     
// alert("零为真");
// } else {
     
     
// alert("零为假");
// }
// var b = null;
// if (b) {
     
     
// alert("null 为真");
// } else {
     
     
// alert("null 为假");
// }
// var c = undefined;
// if (c) {
     
     
// alert("undefined 为真");
// } else {
     
     
// alert("undefined 为假");
// }
// var d = "";
// if (d) {
     
     
// alert("空串为真");
// } else {
     
     
// alert("空串为假");
// }
/* && 且运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/
var a = "abc";
var b = true;
var d = false;
var c = null;
// alert( a && b );//true
// alert( b && a );//true
// alert( a && d ); // false
// alert( a && c ); // null
/* || 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
// alert( d || c ); // null
// alert( c|| d ); //false
// alert( a || c ); //abc
// alert( b || c ); //true
</script>
</head>
<body>
</body>
</html>

数组（*****重点）

数组定义方式

JS 中数组的定义：

格式：
var 数组名= []; // 空数组
var 数组名= [1 , ’abc’ , true]; // 定义数组同时赋值元素

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = [true,1]; // 定义一个空数组
// alert( arr.length ); // 0
arr[0] = 12;
// alert( arr[0] );//12
// alert( arr.length ); // 0
// javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[2] = "abc";
alert(arr.length); //3
// alert(arr[1]);// undefined
// 数组的遍历
for (var i = 0; i < arr.length; i++){
     
     
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>

for-in循环

该循环用来对数组或对象的属性进行操作的。基本语法：
for (变量 in 对象){ 执行代码； }

//2.遍历stu数组对象的所有元素

var stu=new Array("王春平","张宏伟","金一鑫","李大为","任小月","储忠庆");
var j=1;//定义计数器j
document.write("<h3>数组的元素分别为：</h3>");	
for (var student in stu)
{
  document.write(j+"."+stu[student]+"&nbsp;&nbsp;");
   if (j % 2 ==0) {document.write("<br/>");} //每行输出两对
   j++;
}

Array

Array对象用于在单个的变量中存储多个相同类型的值，其值可以是字符串、数值型、布尔型等，但由于JavaScript是弱类型的脚本语言主，所以数组元素也可以不一致。通过声明一个数组，将相关的数据存入数组，使用循环等结构对数组中的每个元素进行操作。
1.创建Array对象

基本语法
var stu1=new array();
var stu2=new Array(size);
var stu3=new Array(element0, element1, …, elementn);
var str4=[“C++程序设计”,“HTML开发基础”,“数据库原理”"];
参数说明
参数size定义数组元素的个数。返回的数组的长度stu2.length等于size。
使用数组对象的属性和方法

length：数组对象长度；
join(separator)：把数组各个项用某个字符(串)连接起来，但并不修改原来的数组，默认用逗号分隔。
例如：
var cn=stu1.join(’-’); //短横线作为分隔符
Cn的值为“张有为-蒋丽娟-王一新-李大为”。

pop()：删除并返回数组的最后一个元素。
例如: var cn=stu.pop();
则变量cn获得的值是“李大为”。

push(newelement1,.,newelementX):可向数组的末尾添加一个或多个元素，并返回新的长度。例如：
var length=stu.push(“张丽丽”,“付天舒");
则变量length获得的值6。

shift()：用于把数组的第一个元素从其中删除，并返回第一个元素的值。
var ss=stu.shift();

unshift(newelement1,newelement2,....,newelementX)：向数组的开头添加一个或更多元素，并返回新的长度。
var s= stu.unshift(“储国王”)；s=5

其它方法:sort()、reverse()、toString()等。

函数(*****重点)

函数的二种定义方式

第一种，可以使用function 关键字来定义函数。

使用的格式如下:

function 函数名(形参列表){
函数体
}

在JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用return 语句返回值即可！
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 定义一个无参函数
function fun(){
     
     
alert("无参函数fun()被调用了");
}
// 函数调用===才会执行
// fun();
function fun2(a ,b) {
     
     
alert("有参函数fun2()被调用了a=>" + a + ",b=>"+b);
}
// fun2(12,"abc");
// 定义带有返回值的函数
function sum(num1,num2) {
     
     
var result = num1 + num2;
return result;
}
alert( sum(100,50) );
</script>
</head>
<body>
</body>
</html>

函数的第二种定义方式，格式如下：

使用格式如下：

var 函数名= function(形参列表) { 函数体}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun = function () {
     
     
alert("无参函数");
}
// fun();
var fun2 = function (a,b) {
     
     
alert("有参函数a=" + a + ",b=" + b);
}
// fun2(1,2);
var fun3 = function (num1,num2) {
     
     
return num1 + num2;
}
alert( fun3(100,200) );
</script>
</head>
<body>
</body>
</html>

注：在Java 中函数允许重载。但是在JS 中函数的重载会直接覆盖掉上一次的定义

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun() {
     
     
alert("无参函数fun()");
}
function fun(a,b) {
     
     
alert("有参函数fun(a,b)");
}
fun();
</script>
</head>
<body>
</body>
</html>

函数的arguments 隐形参数（只在function 函数内）

就是在function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。

隐形参数特别像java 基础的可变长参数一样。
public void fun( Object … args );
可变长参数其他是一个数组。
那么js 中的隐形参数也跟java 的可变长参数一样。操作类似数组。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fun(a) {
     
     
alert( arguments.length );//可看参数个数
alert( arguments[0] );
alert( arguments[1] );
alert( arguments[2] );
alert("a = " + a);
for (var i = 0; i < arguments.length; i++){
     
     
alert( arguments[i] );
}
alert("无参函数fun()");
}
// fun(1,"ad",true);
// 需求：要求编写一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2) {
     
     
var result = 0;
for (var i = 0; i < arguments.length; i++) {
     
     
if (typeof(arguments[i]) == "number") {
     
     
result += arguments[i];
}
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
</script>
</head>
<body>
</body>
</html>

JS 中的自定义对象（扩展内容）

Object 形式的自定义对象

对象的定义：

var 变量名= new Object(); // 对象实例（空对象）
变量名.属性名= 值; // 定义一个属性
变量名.函数名= function(){} // 定义一个函数

对象的访问（调用）：
变量名.属性/ 函数名();
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 对象的定义：
// var 变量名= new Object(); // 对象实例（空对象）
// 变量名.属性名= 值; // 定义一个属性
// 变量名.函数名= function(){} // 定义一个函数
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
     
     
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
// 对象的访问：
// 变量名.属性/ 函数名();
// alert( obj.age );
obj.fun();
</script>
</head>
<body>
</body>
</html>

{}花括号形式的自定义对象

对象的定义：

var 变量名= { // 空对象
属性名：值, // 定义一个属性
属性名：值, // 定义一个属性
函数名：function(){} // 定义一个函数
};

对象的访问：
变量名.属性/ 函数名();

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 对象的定义：
// var 变量名= { // 空对象
// 属性名：值, // 定义一个属性
// 属性名：值, // 定义一个属性
// 函数名：function(){} // 定义一个函数
// };
var obj = {
     
     
name:"国哥",
age:18,
fun : function () {
     
     
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
};
// 对象的访问：
// 变量名.属性/ 函数名();
alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>

JavaScript基础（变量，数组，函数，对象）

JavaScript 介绍

JavaScript 和html 代码的结合方式

第一种方式

第二种方式

第三种方式

消息对话框

关键字

变量

关系（比较）运算

逻辑运算

数组定义方式

for-in循环

Array

函数(*****重点)

函数的二种定义方式

第一种，可以使用function 关键字来定义函数。

函数的第二种定义方式，格式如下：

函数的arguments 隐形参数（只在function 函数内）

JS 中的自定义对象（扩展内容）

Object 形式的自定义对象

{}花括号形式的自定义对象

猜你喜欢