JavaScript初学笔记

lolo大魔王

已于 2024-04-15 19:28:40 修改

阅读量471

点赞数 17

文章标签： javascript 笔记开发语言

于 2024-04-13 22:53:06 首次发布

本文链接：https://blog.csdn.net/m0_72664637/article/details/137613149

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* border: 1px solid green; */
            /* border-radius: 50%; */
        }
    </style>
</head>
<body>
    text1
    <!-- 单击事件  事件名=“方法名”-->
    <input type="button" value="按钮" onclick="test()">
    <div id="mydiv">

    </div>
    
    <script>
        var num1=0;
        // alert("1111")
        //实现： 能够弹出一个警告框，内容为“这是一个警告框”
        //函数：function 方法名(){方法体}
        function test(){
            //弹出警告框
            // alert("这是一个警告框")
            //提示框
            // prompt("请输入姓名")
            //在控制台输出
            // console.log("按钮被点击了")
            //输出到浏览器
            // document.write("1111111111111")
            var num=1;
            //给div增加边框
            //1.拿到div //2.设置css样式
           var a= document.getElementById("mydiv").style.border="5px solid green"
            console.log(a)
            //把div红色背景改成蓝色
            document.getElementById("mydiv").style.backgroundColor="blue"  

        }
        //事件绑定
        // document.getElementById("mydiv").onclick=function(){
        //     console.log("事件绑定成功")
        // }
        //添加事件监听.addEventListener
        // document.getElementById("mydiv").addEventListener("click",function(){
        //     console.log("添加事件监听成功")
        // })


        //当鼠标移动到方形div上时，方形div变成圆形
        document.getElementById("mydiv").onmouseover=function(){
            // alert("11111")
            document.getElementById("mydiv").style.borderRadius="50%"

        }
        //鼠标溢出，变回方形
    </script>
//text2
    <script>
       var arr1= new Array("1","2","3")
       var arr2=[1,2,3]
       console.log(arr1[0])
       console.log(arr1.length)
       //遍历数组数据
       for(var i=0;i<arr1.length;i++){
        console.log(arr1[i])
       }
    </script>
//text3
    <input type="button" value="点击跳转百度" onclick="test()">
    <script>
        //设置一个定时器
        //参数一：执行的操作（函数）
        //参数二：定时的时间--单位毫秒
        //5s后弹出一个警告款
        // setTimeout(function(){
        //     alert("这是一个警告框")
        // },5000)//5s
        function test(){
            //跳转
            console.log(location.href)
            location.href="https://www.baidu.com"
        }
    </script>
//text4
    <script>
       var mydate= new Date();
       console.log(mydate)
       console.log(mydate.getHours())
       console.log(mydate.getMonth()+1)
    </script>

//text5
<!-- 1.加法运算 -->
    <!-- 在浏览器输入两个数据（文本框控件输入） -->
    <!-- 将输入的两个数据相加，并将相加后的结果渲染在浏览器上   1+1=2 -->
    <input type="text" id="input1" value="">+<input type="text" id="input2" value="">=
    <span id="myspan"></span><br>
    <input type="button" value="相加" onclick="add()">



    <script>
        function add(){
            //获取数据1
            //字符串解析
          var num1= parseInt(document.getElementById("input1").value) 
        //   console.log(num1)
          //判断数据类型
        //   console.log(typeof(num1))
          //获取数据2
          var num2=parseInt(document.getElementById("input2").value)
        //   console.log(num2)
          //数据1和数据2相加
          var sum=num1+num2;
        //   console.log(sum)
          //把结果渲染到浏览器 innerHTML innerText
          document.getElementById("myspan").innerHTML=sum

        }
    </script>

<!-- 2. 根据用户输入的数据判断成绩等级 -->
<!-- 如果成绩大于90分，则输出优秀 -->
<!-- 如果成绩为80-90分，则输出良好 -->
<!-- 如果成绩为60-80分，则输出及格 -->
<!-- 如果成绩小于60分，则输出不及格 -->
</body>
</html>

1.认识JavaScript

2.JavaScript的语法规则

2.1执行顺序

JavaScript程序按照在HTML文件中出现的顺序逐行执行。

如果某些代码（例如函数、全局变量等）需要在整个HTML文件中使用，最好将其放在HTML文件的<head>…</head>标签中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。

2.2大小写敏感

JavaScript严格区分字母大小写。

在输入关键字、函数名、变量以及其他标识符时，都必须采用正确的大小写形式。例如，变量username与变量userName是两个不同的变量。

2.3结尾分号

在JavaScript中，每行结尾的分号可有可无。

JavaScript语言并不要求必须以分号（;）作为语句的结束标签。如果语句的结束处没有分号，JavaScript会自动将该行代码的结尾作为语句的结尾。但是，通常习惯在每行代码的结尾处加上分号，来保证代码的严谨性、准确性。

2.4注释

JavaScript中主要包括两种注释：单行注释和多行注释。

单行注释使用双斜线“//”作为注释标签，将“//”放在一行代码的末尾或者单独一行的开头，它后面的内容就是注释部分。

多行注释可以包含任意行数的注释文本。多行注释是以“/*”标签开始，以“*/”标签结束，中间的所有内容都为注释文本。

3.关键字

JavaScript关键字（Reserved Words），又被称为“保留字”，是指在JavaScript语言中被事先定义好并赋予特殊含义的单词。但是，JavaScript关键字不能作为变量名和函数名使用，否则会使JavaScript在载入过程中出现编译错误

4.JavaScript的引入方式

4.1行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。

单击网页中的一个按钮时，就会触发按钮的单击事件

4.2嵌入式

在HTML中运用<script>标签及其相关属性可以嵌入JavaScript脚本代码。

语法格式：

<head>

</script>

</head>

4.3外链式

外链式是将所有的JavaScript代码放在一个或多个以.js为扩展名的外部JavaScript文件中，通过<src >标签将这些JavaScript文件链接到HTML文档中

基本语法格式：

</script>

外链式的优势

1.利于后期修改和维护

2.减轻文件体积、加快页面加载速度

5.JavaScript方法

5.1alert()方法

alert()用于弹出一个警告框，确保用户可以看到某些提示信息。利用alert()可以很方便的输出一个结果，因此alert()经常用于测试程序。

基本语法格式：

window.alert(提示信息);

或

alert(提示信息);

5.2prompt()方法

prompt()方法用于弹出一个提示框，可以显示和提示用户输入信息。

基本语法格式：

window.prompt(提示信息);

或

prompt(提示信息);

6.DOM简介

网页文档在浏览器上进行解析时会自动转换为一个模型，这个模型就是DOM。DOM（Document Object Model）是浏览器对象模型也称文档对象模型，通过该模型我们就可以使用JavaScript脚本代码对网页文档的内容进行增删减改的操作，提供了一系列对象用于与浏览器窗口进行交互。

5.1window

5.2screen

5.3location

5.4 history

7.对象

在计算机世界中，不仅包括来自于客观世界的对象，还包含为解决问题而引入的抽象对象。例如，一个用户可以看做一个对象，它包含用户名、用户密码等特性，也包含注册、注销等动作。一个web页可以看做一个对象，它包含背景色、段落文本、标题等特性，同时又包含打开、关闭和写入等动作。

在JavaScript中有若干对象，这里我们介绍网页制作中最常用的document对象。document表示文档对象，包含了大量的属性和方法，代表整个HTML文档。每一个载入浏览器的HTML文档都会成为document对象，只有通过document对象，才能获取某个HTML文档中的对象。

结论：

对象就是一组属性与方法的集合

8.访问节点

访问节点常用方法及使用方式：

9.设置节点样式

style对象可以用来设置节点的样式，通过style对象可以动态调用节点的内嵌样式，从而获得所需要的的效果

格式：

对象.style.属性='属性值';

style对象的属性和CSS的样式属性用法基本相似，但部分属性的拼写不同。

例如：

#test{width:200px;} //CSS样式设置宽度

#test{background-color:#000;} //CSS样式设置背景颜色

test.style.width='200px'; //style对象属性设置宽度

test.style.backgroundColor='#000'; //style对象属性设置背景颜色

在JavaScript中，通过设置元素的class属性，也可以更改某个节点的样式。节点的“className”属性用于为节点指定更新的类名。

10.变量

当一个数据需要多次使用时，可以利用变量将数据保存起来。变量就是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。

变量基本语法格式：

var 变量名;

var unit, room; // 声明变量

var unit = 3; // 为变量赋值

var room = 1001; // 为变量赋值

var fname = 'Tom', age = 12; // 声明变量的同时赋值

在声明变量时，我们也可以省略var关键字，通过赋值的方式声明变量，这种方式称为“隐式声明变量”。

11.函数

在JavaScript程序中，经常会遇到需要多次重复操作的情况，这时就需要重复书写相同的代码。

JavaScript提供了函数，它可以将程序中繁琐的代码模块化，提高程序的可读性，并且便于后期维护。

在JavaScript中，函数使用关键字function来定义

function 函数名 ([参数1,参数2,……])｛

函数体｝

</script>

function：在声明函数时必须使用的关键字

函数名：创建函数的名称，函数名是唯一的。

参数：外界传递给函数的值，它是可选的，当有多个参数时，各参数用“，”分隔。

函数体：函数定义的主体，专门用于实现特定的功能。

函数的调用非常简单，只需引用函数名，并传入相应的参数即可。

调用函数基本语法格式：

函数名称(参数1,参数2,……)

外界传递给函数的值，它是可选的，因此可以为空。当有多个参数时，各参数用“,”分隔。

函数中的变量需要先定义后使用，但这并不意味着定义变量后就可以随时使用。变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域。

12.事件的简介

事件是指可以被JavaScript侦测到的交互行为，例如在网页中滑动、点击鼠标，滚动屏幕，敲击键盘等。当发生事件以后，可以利用JavaScript编程来执行一些特定的代码，从而实现网页的交互效果。

13.JavaScript常用事件

13.1鼠标事件

13.2键盘事件

13.3表单事件

13.4页面事件

14.数据类型

14.1数值型

数字（number）是最基本的数据类型。JavaScript和其他程序设计语言（如C和Java）的不同之处在于它并不区分整型数值和浮点型数值。

整型数据：123

十六进制：0x5C

八进制：023

浮点型数据：3.11（即小数）

14.2字符串类型

字符串(string)是由Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。

'name="myname"‘

"You can call me'Tom'!"

14.3布尔型

数值型数据类型和字符串型数据类型的值有无穷多个，但布尔型数据类型只有两个值，分别由“true”和“false”表示。

JavaScript的if…else语句就是在布尔值为true时执行一个动作，而在布尔值为false时执行另一个动作。

14.4特殊类型

空型（Null）用于表示一个不存在的或无效的对象与地址，它的取值只有一个null。并且由于JavaScript对大小写字母书写要求严格，因此变量的值只有是小写的null时才表示空型。

未定义型（Undefined）用于声明的变量还未被初始化时，变量的默认值为undefined。与null不同的是，undefined表示没有为变量设置值，而null则表示变量（对象或地址）不存在或无效。

15.运算符

运算符是程序执行特定算术或逻辑操作的符号，用于执行程序代码运算。JavaScript中的运算符主要包括算数运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符五种。

15.1算术运算符

15.2比较运算符

15.3赋值运算符

15.4逻辑运算符

15.5条件运算符

表达式是一个语句集合，像一个组一样，计算结果是一个单一的值，该值可以是boolean、number、string、function或者object数据类型之一。一个表达式本身可以很简单，如一个数字或者变量。另外，它还可以包含许多连接在一起的变量关键字以及运算符。在定义完变量后，可以对其进行赋值、更改、计算等一系列操作，这一过程需要通过表达式来完成。例如，表达式x=7将值7赋给变量x，整个表达式的计算结果为7，因此在一行代码中使用此类表达式是合法的。一旦将7赋值给x的工作完成，则x也将是一个合法的表达式。除了赋值运算符，还有许多可以形成一个表达式的其他运算符，如算术运算符、字符串运算符、逻辑运算符等。

15.6运算符的优先级

16.条件语句

所谓条件语句就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。条件语句主要有两类：一类是if判断语句；另一类是switch多分支语句。

16.1if语句

16.2switch语句

17.Date对象

18.数据类型的转换

18.1隐试类型转换

18.2显式类型转换

19.循环控制语句

在JavaScript中有一种特殊的语句叫做循环控制语句，它可以实现将一段代码重复执行。

19.1while循环语句

19.2do while循环语句

19.3 for循环语句

20.跳转语句

20.1 break语句

20.2 continue语句

21.数组

数组的作用和变量类似，也是用于存储的容器。但不同的是，变量是一个容器，而数组由多个容器按照既定顺序组成，可以将数组理解为一组变量。

21.1创建数组基本语法格式：

var arrayname=new Array();

var arrayname=new Array(n);

var arrayname=new Array(元素1,元素2,元素3,...);

//“new Array()”创建数组

var arr1 = new Array(); // 空数组

var arr2 = new Array('苹果', '橘子', '香蕉', '桃子'); // 含有4个元素 // 使用“[]”字面量（字面量指固定值的表示方法，例如数字、字符串）来创建数组

var arr1 = []; // 空数组

var arr2 = ['苹果', '橘子', '香蕉', '桃子']; // 含有4个元素

21.2访问数组示例

var arr = ['苹果', '橘子', '香蕉', '桃子'];

document.writeln(arr[0]); // 输出结果：苹果

document.writeln(arr[1]); // 输出结果：橘子

document.writeln(arr[2]); // 输出结果：香蕉

document.writeln(arr[3]); // 输出结果：桃子

document.writeln(arr[4]); // 输出结果：undeﬁned

21.3遍历数组示例

var arr = [80, 75, 69, 95, 92, 88, 76];

var sum = 0; for (var i = 0; i < 7; i++)

{

sum += arr[i]; // 累加求和

}

var avg = sum / 7; // 计算平均分

console.log(avg.toFixed(2)); // 输出结果：82.14

lolo大魔王

关注

17
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
JavaScript初学笔记

例如，表达式x=7将值7赋给变量x，整个表达式的计算结果为7，因此在一行代码中使用此类表达式是合法的。DOM（Document Object Model）是浏览器对象模型也称文档对象模型，通过该模型我们就可以使用JavaScript脚本代码对网页文档的内容进行增删减改的操作，提供了一系列对象用于与浏览器窗口进行交互。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。在JavaScript中，通过设置元素的class属性，也可以更改某个节点的样式。
复制链接

扫一扫