JavaWeb开发3
JavaScript
一门跨平台、面向对象的脚本语言，用来控制网页行为，能使网页可交互
js引入方式
-
内部脚本：将JS代码定义在HTML页面中
-
JavaScript代码必须位于< script >< /script >
-
在HTML文档中，可以在任意地方，放置任意数量的< script >
-
一般会把脚本置于< body >元素的底部，可以改善显示速度
-
-
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
-
外部JS文件中，只包含JS代码，不包含< script >标签
-
< script >标签不能自闭和
-
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点访谈</title>
<!-- 内部脚本-->
<!-- <script>-->
<!-- alert("hello");-->
<!-- </script>-->
<!-- 外部脚本-->
<script src="JS/deno.js"></script>
</head>
<body>
</body>
</html>
JS书写语法
-
区分大小写：与Java一样，变量名、函数名及其他一切东西都是区分大小写的
-
每行结尾分号可有可无
-
注释
-
单行注释：//
-
多行注释：/* */
-
-
大括号表示代码块
输出语句
-
使用window.alert()写入警告框
-
使用document.write()写入HTML输出
-
使用console.log()写入浏览器控制台
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点访谈</title>
</head>
<body>
</body>
<script>
window.alert("hello");
document.write("hellojs");
console.log("hello3")
</script>
</html>
JS变量
-
用var关键字来声明变量
-
弱类型语言，变量可以存放不同类型的值
-
变量名要遵循一定规则
-
组成字符可以是字母、数字、下划线或美元符号
-
数字不能开头
-
建议使用驼峰命名
-
ECMAScript6
新增了let关键字来定义变量。用法类似于var，但所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明
新增了const关键字，用来声明一个只读的变量。一旦声明，常量的值就不能改变
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点访谈</title>
</head>
<body>
</body>
<script>
// var a="zhangsan";
// alert(a);
// 作用域比较大，全局变量
// 可以重复定义
// {
// var x="ok";
// // alert(x);
// var x="aa";
// }
// alert(x);
// {
// let x=1;
// // alert(x);
// // let x=2;
// }
// alert(x);
{
const pi=3.14;
// pi=3.15;
alert(pi);
}
</script>
</html>
JS数据类型
-
JavaScript这分为原始类型和引用类型
原始类型
-
number：数字
-
string：字符串，单双引皆可
-
boolean：布尔，true、false
-
null：对象为空
-
undefined：当声明的变量未初始化时，默认为undefined
使用typeof运算符可以获取数据类型
-
运算符
==会进行类型转换，===不会
类型转换
-
字符串类型转数字
-
如果字面值不是数字，则转为NaN
-
-
其他类型转boolean
-
Number：0和NaN为false，其他为true
-
String：空字符串为false
-
Null和undefined：均转为false
-
流程控制语句
JS函数
-
函数是被设计为执行特定任务的代码块
-
通过关键字进行定义
function functionName(参数){ //要执行的代码 }
-
注意
-
形式参数不需要类型，JavaScript是弱类型语言
-
返回值不需要定义类型，可以直接return
-
-
调用：函数名称(实际参数列表)
-
定义方式二
var functionName=function(参数){ //要执行的代码 }
<!--文件类型为HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点访谈</title>
</head>
<body>
</body>
<script>
// function add(a,b) {
// return a+b;
// }
// var res=add(2,3);
// alert(res);
var add=function (a,b) {
return a+b;
}
var res=add(1,2);
alert(res);
</script>
</html>