04 JavaScript
时间:2021-07-21
本文章向大家介绍04 JavaScript,主要包括04 JavaScript使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
JavaScript 介绍
特点:
- 交互性(它可以做的就是信息的动态交互)
- 安全性(不允许直接访问本地硬盘)
- 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无
一、 JavaScript 和 html 代码的结合方式
1.1 第一种方式
只需要在 head 标签中,或者在 body 标签中, 使用 script 标签 来书写js代码
html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//alert是JavaScript语言提供的一个警告函数
//它可以接收任意类型的参数,这个参数就是警告框的提示信息
alert("hello js")
</script>
</head>
<body>
</body>
</html>
1.1 第二种方式
使用 script 标签引入 单独的 JavaScript 代码文件
js内容
alert("起飞")
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
现在需要使用script引入外部的js文件来执行
src属性专门用来引入js文件路径(可以是相对路径,也可以是决定路径)
script标签可以用来定义js代码,也可以用来引入js文件
但是,两个功能二选一使用,不能同时使用两个功能
-->
<script type="text/javascript" src="01.js"></script>
</head>
<body>
</body>
</html>
二、变量
实例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i;
i=12;
//typeof()是js语言提供的一个函数
//可以返回变量的数据类型
//alert(typeof (i));number
i = "abc";
//alert(typeof (i));String
var a = 12;
var b = "abc";
alert(a * b);//MaN是非数字、非数值
</script>
</head>
<body>
</body>
</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
示例代码:
<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 a = "abc";
var b = true;
var c = null;
var d = false;
//alert(a && b); true
//alert(b && a); abc
//alert(a && d);false
//alert( a && c); null
//alert(a && d && c);false
/*|| 或运算
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值*/
//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]; // 定义数组同时赋值元素
示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr =[];//定义一个空数组
//alert(arr.length);//0
arr[0] = 12;
//alert(arr[0]);//12
//alert(arr.length);//1
//JavaScript语言中的属猪,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作
arr[2] = "abc";
//alert(arr.length);//3
// alert(a[1]);//undefined
//数组的定义
for (var i=0;i < arr.length;i++){
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
五、函数(重点)
5.1 函数的二种方式
使用的格式如下:
function 函数名(形参列表){
函数体
}
在 JavaScript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用 return 语句返回值即可!
示例代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定义一个无参函数
function fun(){
alert("无参函数");
}
//函数调用才会被执行
//fun();
function fun2(a,b){
alert("有参函数 a-->" + a + "b--->"+b);
}
//fun2(1,2);
function fun3(num1,num2){
var result = num1 + num2;
return result;
}
alert(fun3(100,200))
</script>
</head>
<body>
</body>
</html>
5.2 函数的第二种定义方式
使用格式如下:
var 函数名 = function(形参列表) { 函数体}
示例代码:
<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){
var result = num1 + num2;
return result;
}
alert(fun3(50,41));
</script>
</head>
<body>
</body>
</html>
原文地址:https://www.cnblogs.com/flypigggg/p/15041336.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法