JavaScript

发布时间：2024年01月13日

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)+'&nbsp  ');
        }
        document.write('<br>');
    }

    //菱形
    for(let i =1; i<=10; i++){
        for(let j = 1; j<=10-i;j++){
            document.write("&emsp;");
        }
        for(let j =1; j<=i;j++){
            document.write("* &emsp;");
        }
        document.write("<br>")
    }
    for(let i =9; i>=1; i--){
        for(let j = 1; j<=10-i;j++){
            document.write("&emsp;");
        }
        for(let j =1; j<=i;j++){
            document.write("* &emsp;");
        }
        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)

文章来源:https://blog.csdn.net/2302_78070106/article/details/135487331
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！