本文介绍了JavaScript的特性，如弱类型、浏览器执行、面向对象等，并阐述了其在表单验证、DOM操作等场景的应用。此外，还讲解了ECMAScript、JScript和实际JavaScript的区别，以及关键概念如DOM和BOM。
js
特点
- 弱类型
- 直接使用浏览器解析执行
- 面向对象
- 跨平台
- 简单
使用场景
- 表单校验
- 运算操作
- 操作DOM\BOM
- 特效
- 发送ajax请求
- 等等
组成
-
ECMAScript
- JScript
微软提供的实现ECMAScript的产物,只有ie浏览器才能执行,少用
-
JavaScript
需要掌握
-
DOM
用来操作HTML文档的
-
BOM
用来操作浏览器的
位置
- html标签【标记、节点、元素】中
- <script
- js文件中
入门案例
index.js
//document 代表 html的文档树
console.log(document);
document.writeln("xixi<br/>");
document.writeln("haha");
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//函数
function init(){
console.log("普通打印");
console.error("错误打印");
}
//body οnlοad="init()"
//当网页内容全部加载完会执行的代码
</script>
</head>
<body onload="init()">
<div onclick="alert(11)">点击</div>
</body>
</html>
注释
-
// 单行注释
-
/*
我是多行注释
我是多行注释
我是多行注释
*/
-
/**
* 我是文档注释一般用于函数
*
*/
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//单行注释
/*
多行注释
*/
/**
* @param {Object} one
* @param {Object} two
*/
function add(one,two){
return one+two;
}
var result = add(1,1);
console.log(result);
</script>
</head>
<body>
</body>
</html>
标示符
含义
组成代码的名称,比如:函数名、变量名、参数名等等
规则
-
字母、下划线（_）、美元符号（$）、数字组成
-
以字母、下划线（_）或美元符号（$）开头,余下的字符可以是下划线、美元符号或任何的字母、数字
-
最长为255个字符
-
不能有空格，大小写敏感
-
不能使用JavaScript中的关键字或保留字命名
语法
-
区分大小写
变量 myTest、myTEST是不同的变量
-
变量是弱类型
var声明变量
-
行结尾加分号
-
花括号表明代码块
-
注释【和java一样】
转义字符
和java一样,自行查看常见的
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="utf-8">
console.log("\\");
console.log("a\tb");
console.warn("a\nb");
console.error("\"");
console.error("\'");
</script>
</head>
<body>
</body>
</html>
debug
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function a(){
var xx = "hello";
b(xx);
}
function b(content){
console.log(content)
}
a();
</script>
</head>
<body>
</body>
</html>
常量、变量
常量
只有字面常量
变量
含义
一块有名字的内存地址,该内存地址的值可以多次修改也可以多次读取。
语法
- var 变量名; 变量名=赋值;
- var 变量名=赋值;
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" charset="utf-8">
//常量
//只有字面常量
//比如:console.log("11");
//变量
//含义:有名字的一块内存地址,该地址可以存储数据,并且可以反复修改和获取
//语法
//var 变量名;变量名=值;
//var 变量名=值;
var address;
address = "广州";
console.log(address);
var myName="zhangsan";
console.log(myName); //zhangsan
myName= 11;
console.log(myName); //11
</script>
</head>
<body>
</body>
</html>
执行顺序
执行流程从上到下,中间遇到了错误就不会往下执行了
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
document.write("js执行流程从上到下,中间遇到了错误就不会往下执行了.");
var test="zs";
console.log(xx);
console.log(test);
</script>
</head>
<body>
</body>
</html>
数据类型
分类
-
undefined
- var age; 此时age就是undefined
-
number
- 整数、小数
- NaN
- Infinity -Infinity
-
string
用单引号或双引号括起来的
-
object
-
创建的对象
-
null 也是的
-
-
function
函数类型
-
boolean
- 有两个值true和false
- true不一定等于1，false不一定等于0,具体可以看上面的转换表格
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//undefined
//number
//数字
//无穷
//nan not a number
//object
//对象 (new Object())
//null
//string
//用单引号或双引号
//boolean
//内置函数
//typeof(数据)
//console.log(xx); 直接报错
var myName;
console.log(myName);
console.log(typeof(myName));
console.log("--------------------number---------------");
console.log(typeof(11));
console.log(typeof(-11));
//console.log(typeof("11")); string
var result = 1/0;
console.log(result);
console.log(typeof(result));
result = -1/0;
console.log(result);
console.log(typeof(result));
result = "xx"/1; //NAN
console.log(result);
console.log(typeof(result));
console.log("--------------------object---------------");
var obj = new Object();
console.log(obj);
console.log(typeof(obj));
obj = null;
console.log(obj);
console.log(typeof(obj));
console.log("--------------------string---------------");
var myAddr = "gz";
console.log(typeof(myAddr));
var myPhone= '';
console.log(typeof(myPhone));
console.log("--------------------function---------------");
function say(content){
console.log(content);
}
console.log(typeof(say));
var zz = say;
console.log(typeof(zz));
</script>
</head>
<body>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//undefined
//number
//string
//boolean
//object
var age;
console.log(typeof(age)); //undefined
console.log(typeof(11)); //number
console.log(typeof("11")); //string
console.log(typeof(false)); //boolean
console.log(typeof(null)); //object
var user = new Object(); //创建一个对象
console.log(typeof(user)); //object
var say = function(){
}
console.log(typeof(say)); //function
//null
//含义:空对象(typeof(null)就是object)
//常见操作
//判断是否为空 user == null user!=null
//如何判断一个对象是否为空
user = null;
if(user!=null){
console.log("不为空");
}else{
console.log("为空");
}
//boolean
//含义:真假
//注意点
//有两个值true和false
//true不一定等于1，false不一定等于0
//转换
//Boolean(参数)作用:将参数转为true || false
//if(boolean)
//!!
console.log("------true-------");
console.log(Boolean(true)); //true
console.log(Boolean(1.1)) //true
console.log(Boolean(0)) //false
console.log(Boolean(0/0)) //false
console.log(Boolean(-1)) //true
//string
console.log(Boolean("null"));//true
console.log(Boolean("")); //false
//object
console.log(Boolean(null)); //false
var xxxx;
console.log(Boolean(xxxx)); //false
//number
//NaN
//console.log(typeof(0/0));
//console.log(1/0.0); //-Infinity
//console.log(typeof(0/0.0)); //number
</script>
</head>
<body>
</body>
</html>
常用内置函数
-
typeof
计算类型
-
Boolean(参数)
将参数转成boolean型的,规则如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VQiZ3YXx-1661164117509)(assets/1653550608325.png)] -
isNaN(参数)
判断参数是否为NaN
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//Boolean(参数)
//作用:将参数装成boolean类型
//规则
// true false
//boolean true false
//string 非空 空串
//object 非空对象 null
//number 非0和非NaN 0、NaN
//undefined undefined
console.log(Boolean(true),Boolean(false));
console.log(Boolean("11"),Boolean(""));
console.log(Boolean(new Object()),Boolean(null));
console.log("1"/1);
console.log(0/0);
console.log(Boolean(1/0),Boolean(-1/0),Boolean(-1),Boolean(0),Boolean("xx"/1));
var yy;
console.log(Boolean(yy));
if(yy){
console.log("成功");
}else{
console.log("失败");
}
console.log("--------------------------------isNaN------------------------------");
console.log("1"/1); //1
console.log("1"/0); //infinity
console.log(0/0); //NaN
console.log(isNaN("1"/1)); //false
console.log(isNaN("1"/0)); //false
console.log(isNaN(0/0)); //true
console.log(isNaN("xx"/1)); //true
console.log(isNaN("11")); //false,"11"--->11
console.log(isNaN("xx")); //true
console.log(isNaN("11xx")); //true
</script>
</head>
<body>
</body>
</html>
le.log(“成功”);
}else{
console.log(“失败”);
}
console.log("--------------------------------isNaN------------------------------");
console.log("1"/1); //1
console.log("1"/0); //infinity
console.log(0/0); //NaN
console.log(isNaN("1"/1)); //false
console.log(isNaN("1"/0)); //false
console.log(isNaN(0/0)); //true
console.log(isNaN("xx"/1)); //true
console.log(isNaN("11")); //false,"11"--->11
console.log(isNaN("xx")); //true
console.log(isNaN("11xx")); //true
</script>
</head>
<body>
</body>
扫一扫
1192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
