JavaScript
JavaScript基础知识详解
初始JavaScript 实现交互效果，数据收发，表单验证
JavaScript的引入方式：
1.行内式（基本不用）
⾏内式 是将JavaScript代码作为HTML标签的属性值使⽤。
下⾯示例展示了⾏内JS代码的使⽤，单击“点我有惊喜”链接时，弹出⼀个弹框显示“Surprise~”：
Document
点我有惊喜
2.嵌入式
嵌⼊式 就是把
JavaScript代码，具体操作如下：
-
新建⼀个 HTML⽂档
-
在 和 标签之间插⼊⼀个
Document
3.外链式（工作时常用）
JavaScript 不仅可以直接放在HTML⽂档中，也可以在JavaScript脚本⽂件
中。 JavaScript 脚本⽂件是⽂本⽂件，扩展名为 .js ，时候⽤任何⽂本编辑器都可以编辑。
具体操作步骤如下：
-
新建⽂本⽂件，后缀名为 .js ，它表示该⽂本⽂件是JavaScript类型的⽂件
-
打开js⽂件，在⽂件中直接编写JS代码，不需要写
JavaScript⽂件的路径。示例如下：
Document
调试模式
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('
');
}
//菱形
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("
")
}
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("
")
}
对象
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)