【JavaScript】学习笔记1

TC_FANCY

已于 2024-01-21 10:10:43 修改

阅读量31

点赞数

分类专栏： javaweb 文章标签：前端

于 2023-08-08 18:12:02 首次发布

本文链接：https://blog.csdn.net/qq_59400558/article/details/132152472

版权

javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是JavaScript？

JavaScript JavaScript(Java脚本)是一种基于对象（Object）和事件驱动（ Event Driven）并具有安全性能的脚本语言，使用JavaScript可以轻松的实现与HTML的互操作，并且完成丰富的页面交互效果，它是通过嵌入或调入在标准的HTML语言中实现的，它的出现弥补了HTML的缺陷，是java与HTML折衷的选择。

基于对象：

指的是程序的内部已经为用户提供好了若干个对象，用户直接使用这些对象即可。

面向对象：

java属于面向对象的语言，面向对象是指用户自己定义类，对象需要用户自己产生。

引入方式

1.第一种方式

在head标签中或着在body标签中使用script标签来写script代码

必须写在<script type="text/javascript">和</script>中间

2.第二种方式

引入外部的JavaScript 文件

外部JavaScript文件是将JavaScript写入一个外部文件中，以*.js为扩展名保存，然后将该文件指定给<script>标签中的“src”属性，这样就可以使用这个外部文件。

js文件
document.write("使用JavaScript脚本语言循环输出hello!")

    for(var i=0;i<3;i++){
             document.write("<h1>hello</h1>");
     }

html文件
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>JavaScript</title>
        </head>
        <body>
        </body>
        <script type="text/javascript"src="hello.js"></script>
//hello.js是运用代码的位置
</html>

3.第三种方式

在HTML属性中直接引入。

直接在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，属性指元素的“事件属性”。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>JavaScript</title>
        </head>
        <body>
                <input type="button"value="弹出消息框"οnclick="alert('hello')"/>
        </body>
 </html>

变量

定义变量格式：

var 变量名；

变量=值；（或var 变量名=值）

逻辑运算

&&运算

当表达式全为真的时候，返回最后一个表达式的值

有一个为假时，返回第一个表达式为假的表达式的值

||运算

当表达式全为假的时候，返回最后一个为假表达式的值

有一个为假时，返回第一个表达式为真的表达式的值

数组

js中数组定义：

格式：

var 数组名=[]；//空数组

var 数组名=['a','b','c'];//定义数组的同时赋值元素

函数

第一种定义方式

使用function关键字来定义函数

格式如下：

function 函数名（参数列表）{

函数体

}

//定义一个无参函数
function fun(){
    alert("无参函数被调用了");
}
fun();//调用才会执行

第二种定义方式

使用格式：

var 函数名=function（形参列表）{

函数体

}

var fun=function(){
    alert("无参函数");
}

js不允许函数重载，后面方法名相同的会覆盖前面那个js不允许函数重载

对象

第一种定义对象的方法（object形式的自定义方式）

var 对象变量名 = new Object();//对象实例（空对象）；

对象变量名.属性名=值；//定义一个属性

对象变量名.函数名=function(){};//定义一个函数

对象变量名.属性/函数名（）；//对象访问；

var obj = new Object(){
obj.name="威哥";
obj.age="21";
obj.fun=function(){
    alert("姓名"+this.name+"年龄"+this.age)
}

第二种定义对象的方法（{}花括号形式的自定义对象方式）

var 对象变量名 = {

属性名：值，

函数名：function（）{}

}

对象访问：对象变量名.函数名/属性名

var obj={
    name:"威哥";
    age:21;
    fun:function(){
        alert("this.name"+"this.age");    
    }
}

原型

<script>
var Student = {
    name:"wcw001",
    age:3,
    run:function(){
        console.log(this.name+"run...");    
    }
};
var xiaoming = {
    name:"wcw002";
};
wcw002.__proto__=Student;
</script>

class

//定义一个类、属性和方法
class Student{
    constructor(name){
        this.name=name;    
    }
    hello(){
        alert('hello')    
    }
}
var xiaoming=new Student("xiaoming");
var wcw=new Student("wcw");
//继承
class XiaoStudent extents Student{
    constructor(name,grade){
        super(name);
        this.grade=grade;    
    }
    myGrade(){
        alert("我是一名小学生");    
    }
}