JavaScript基础知识详解
初始JavaScript 实现交互效果,数据收发,表单验证
JavaScript的引入方式:
1.行内式(基本不用)
⾏内式 是将JavaScript代码作为HTML标签的属性值使⽤。
下⾯示例展示了⾏内JS代码的使⽤,单击“点我有惊喜”链接时,弹出⼀个弹框显示“Surprise~”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ⾏内式 -->
<a href="javascript:alert('Suprise~')">点我有惊喜</a>
</body>
</html>
2.嵌入式
嵌⼊式 就是把
JavaScript代码,具体操作如下:
-
新建⼀个 HTML⽂档
-
在 和 标签之间插⼊⼀个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript">
// 此处编写JavaScript代码
</script>
</html>
3.外链式(工作时常用)
JavaScript 不仅可以直接放在HTML⽂档中,也可以在JavaScript脚本⽂件
中。 JavaScript 脚本⽂件是⽂本⽂件,扩展名为 .js ,时候⽤任何⽂本编辑器都可以编辑。
具体操作步骤如下:
-
新建⽂本⽂件,后缀名为 .js ,它表示该⽂本⽂件是JavaScript类型的⽂件
-
打开js⽂件,在⽂件中直接编写JS代码,不需要写
JavaScript⽂件的路径。示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script src="./textJS.js"></script>
</html>
调试模式
console.log("输出一条日志");
console.info("输出一条信息");
console.warn("输出一条警告");
console.error("输出一条异常");
基本知识
标识符 :就是变量的 函数的 属性的 函数参数的名字
注意事项:第一个字:必须是 字母 下划线 一个美元符号 其余字可以是 字母 下户线 美元符号 数字
5种基本类型 Object 6种类型
- String 字符串类型
- Number 数值类型
- Boolean 布尔类型
- undefined undefined类型
- Null (null) 》》》 Object
查看变量类型
console.log(typeof 123);
console.log(typeof 'Hello');
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
转义符
转义符
\n 换行 \\ 斜杠 \t 制表
\r 回车 \b 空格 \' \"
数据类型和返回值
- Number 整数 和 浮点数
- Boolean 布尔类型 true false
- undefined 只有一个值 undefined 在使用 var 声明变量 单位赋值(未初始化时) 变量的值就是undefined
- null 类型是第二个只有值的数据类型 就代表null
强制类型转换
-
转换为String类型
var a = 123; console.log(typeof a); //Number a = a.toString(); //第一种方式 a = String(a); //第二种方式 a = a+''; //第三种方式
如果将 undefined 类型转换为 String 类型,将变成“undefined ”
var b = undefined; b = String(b); console.log(b); // String undefined console.log(typeof b); //string 类型的值为undefined
如果将null类型转换为String类型,将变成“null”
var c = null; c = String(c); console.log(c); //string null console.log(typeof c); //string 类型 的值为null
-
转换为Number 类型
转换为Number 类型 Number() parseInt() parseFloat() Number() 可以转换任意的类型的数字 parseInt()(int类型) parseFloat()(Float类型) 只能转换字符串为数值 转换浮点数 到 整数 会精度缺失 var num = parseInt("12.9"); console.log(num) 布尔类型的值 true false true 转换为 1 false 转换为 0 null 转换为 0 undefined >> NAN(非法数字) console.log(Number(undefined));
-
转换为Boolean 类型只能通过Boolean()函数
转换为 Boolean 只能通过 Boolean()函数 数值 ===> 布尔 除了 0 和 NaN 其他都是true console.log(Boolean(0)); 字符串 ==>布尔 除了空串 其他的都是true undefined null 都会转换为false 对象 转换为true
循环结构
//九九乘法表
for(let i =1;i<=9 ;i++){
for(let j =1;j<=i;j++){
document.write(i+'*'+j+'='+(i*j)+'  ');
}
document.write('<br>');
}
//菱形
for(let i =1; i<=10; i++){
for(let j = 1; j<=10-i;j++){
document.write(" ");
}
for(let j =1; j<=i;j++){
document.write("*  ");
}
document.write("<br>")
}
for(let i =9; i>=1; i--){
for(let j = 1; j<=10-i;j++){
document.write(" ");
}
for(let j =1; j<=i;j++){
document.write("*  ");
}
document.write("<br>")
}
对象
object在js中是引用数据类型,可以有属性和方法
创建方法一:
var person=new Object();
为person 附加name属性并赋值
person.name='张三';
person.age= 30;
console.log(person);
创建方法二:
var person = {
name: '张三',
age: 21
}
获取对象的方法:
console.log(person);
//通过.访问对象的属性
console.log(person.name);
//通过[属性名]获取属性值
console.log(person['age']);
注意事项:
基本数据类型
js中变量包含两种不同的属性类型的值
基本数据类型 引用数类型
基本数据类型 String Number Boolean Null undefined
引用数据类型 是存在内存中的对象
当一个变量是一个对象时,实际上变量中保存的
不是对象本上,而是对象的引用
函数
函数:函数时一连串子程序(语句的集合)组成的,可以被外部程序调用,向函数内传入参数可以返回定义的值
函数的创建方法一:
var funA = new Function("alert('测试数据')");
调用函数:
funA();
函数的创建方法二:
function 函数名(形参1,...) {
语句 return xxxx;
}
带参数函数
示例:
function sum(num1,num2,num3) {
return num1+num2;
}
let res = sum(1,2);
匿名函数:
var fun = function (){
console.log("执行了函数");
}
fun();
嵌套函数:
嵌套函数: 在函数内声明了一个函数就是嵌套函数,嵌套函数只能在当前函数中访问
function fu() {
console.log("我是父函数")
function zi() {
console.log("我是儿子")
}
zi();
}
fu();
//立即执行函数
(function (str){
console.log("这是一个立即执行的函数",str);
})('这是一个参数');
对象中的函数
对象的属性可以是任何数据类型,可以是一个函数(方法)
var person = {
name:'zhangsan',
age:20,
sayHello:function () {
console.log(this.name)
console.log("这是person的方法:name属性:"+name)
}
}
调用对象的方法:
person.sayHello();
- this对象,解析器在调用函数时每次都会向函数内部传递一个隐含的参数(this),this指向的是一个对象,这个对象我们称为上下文对象
- 根据调用者的不同,this会执行不同的对象
- 如果以函数方式 调用 this指向的是window
- 如果是以方法的方式调用 this指向的是当前对象
function sayHello(){
console.log(this);
console.log("这是person的方法:name属性:"+name)
}
sayHello(); >>>> this >window
案例:
function createPerson(name, age, sex) {
let obj = new Object();
obj.name = name;
obj.age = age;
obj.sex = sex;
obj.sayHello = function () {
console.log(this);
console.log("这是person的方法:name属性:" + name)
}
return obj;
}
let p1 = createPerson('zhangsan', 20, '男');
let p2 = createPerson('lisi', 20, '男');
let p3 = createPerson('wangwu', 22, '女');
console.log(p1,p2,p3)
构造函数创建对象
构造函数就是一个普通函数,创建方式和普通函数没有区别,不同的是构造函数,首字母习惯大写,构造函数和普通函数的区别在调用方式的不同,普通函数直接调用构造函数需要new关键字调用
- 调用构造函数 ,会立刻创建一个新的对象
- 将新对象的设置为函数中的this 在构造函数中可以使用this来引用新的对象
- 逐行执行构造函数中的代码
- 将新的对象作为返回值 返回
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayName = function () {
console.log(this.name)
}
}
// 创建Person对象
let p1 = new Person('张三',20,'男');
let p2 = new Person('李四',20,'男');
console.log(p1,p2)
function NewPerson(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayName = function () {
console.log(this.name)
}
}
let p3 = new NewPerson('张三',20,'男');
//判断 对象时那个构造创建的
console.log(p1 instanceof Person)
console.log(p1 instanceof NewPerson)