JS基础

平平无奇的小天才
424 阅读10分钟

js的全称是JavaScript，它是一种轻量级的面向对象的编程语言，既能用在浏览器中控制页面交互，也能用在服务器端作为网站后台（借助Node.js），因此JavaScript是一种全栈式的编程语言。

JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：

  • HTML用来定义网页的内容，例如标题、正文、图像等等；
  • CSS用来控制网页的外观，例如颜色、字体、背景等等；
  • JavaScript用来实时更新网页中的内容，例如从服务器中获取数据并更新到网页中，修改某些标签的样式或者其中的内容等，可以让网页更加的生动。

JavaScript通常由以下部分组成

  • 核心（ECMAScript）：提供语言的语法和基本对象
  • 文档对象模型（DOM）：提供操作html网页内容的方法和接口
  • 浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口，例如弹出移动，关闭窗口
  • 事件处理：用来响应用户的各种操作，如点击、滑动、键盘输入等，这就是事件处理

引入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script type="text/javascript"> /*第一种方法*/

    </script>
</head>
<body>
<script type="text/javascript" src="one.js"></script> <!--第二种方法-->
</body>
</html>

js基础语法

1.注释

js中单行注释以双斜杠//开头，多行注释用/开头，/结尾。js还能识别html的注释。

2.变量

在 JavaScript 中，变量名称并不能随便定义，需要遵循标识符的命名规则，如下所示：

  • 变量名中可以包含数字、字母、下划线_、美元符号$；（跟python比多了一个美元）
  • 变量名中不能出现汉字；
  • 变量名中不能包含空格；
  • 变量名不能是 JavaScript 中的关键字、保留字；
  • 变量名不能以数字开头，即第一个字符不能为数字。

JavaScript关键字：

image.png

变量的定义 在JavaScript中，定义变量需要使用var关键字，语法格式如下：

var 变量名;
// 定义变量时，可以一次定义一个或多个变量，若定义多个变量，则需要在变量名之间使用逗号,分隔开。
// 变量定义后，如果没有为变量赋值 那么这些变量会被赋予一个初始值——undefined

let 变量名
const 变量名

// ES6 新增了 let 和 const 两个关键字来声明变量
let name = '张三' //关键字声明的变量 不允许重名
const age= 18    //关键字声明的变量  不允许重名 并且值定义之后不能修改

赋值 使用等号=来为变量赋值，等号左边的为变量的名称，等号右边为要赋予变量的值

var num;    // 定义一个变量 num
num = 1;    // 将变量 num 赋值为 1

也可以直接写成【var num=1】

3.数据类型

JavaScript 中的数据类型可以分为两种类型：基本数据类型（值类型） 和 引用数据类型

基本数据类型：

<body>
<script>
    var str = "helloworld" //字符串
    console.log(typeof str)

    var num1 = 123;     // 整数
    var num2 = 3.14    //小数
    console.log(typeof num1)
    console.log(typeof num2)

    var a = true;   // 定义一个布尔值 true
    var b = false;  // 定义一个布尔值 false
    console.log(typeof a)
    console.log(typeof b)

    // Undefined 类型
    var num;
    console.log(typeof num);  // 输出 undefined
</script>

</body>

输出结果：

image.png

引用数据类型

<body>
<script>
    // Object类型  由键、值组成的无序集合，定义对象类型需要使用花括号{ }
    var person = {name:"张三",age:24,sex:'男'}  // 对象类型的键都是字符串类型的，值则可以是任意数据类型
    // 获取对象中的值可以使用 对象名.键  或者  对象名[键]
    console.log(person.name)
    console.log(person["name"])
    console.log(person.age)

    // Array类型  一组按顺序排列的数据的集合,数组中的每个值都称为元素
    var a1 = [1,'hello', true, 34.2]
    console.log(a1[0])  // 输出索引为0的元素， 即1
    console.log(a1[1])  //输出索引为1的元素，即'hello'

    // function类型  函数是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行
    // 函数还可以存储在变量、对象、数组中，而且函数还可以作为参数传递给其它函数，或则从其它函数返回
    function sayHello(name){
        return "Hello, " + name;
    }
    var res = sayHello("Peter");
    console.log(res);
</script> 
</body>

输出结果：

image.png

注意：js中的object类型与python中的字典类型类似；Array类型跟列表类似，只是Array没有负向索引；

4.运算符

算术运算符

运算符（描述）实例
+（加法运算符）x + y 表示计算 x 加 y 的和
-（减法运算符）x - y 表示计算 x 减 y 的差
*（乘法运算符）x * y 表示计算 x 乘 y 的积
/（除法运算符）x / y 表示计算 x 除以 y 的商
%（取余运算符）x % y 表示计算 x 除以 y 的余数

赋值运算符

image.png

算术运算符和赋值运算符跟python中的算术运算符和赋值运算符没有多大区别

自增自减运算符

运算符（名称）影响
++x（自增运算符）先将x加1，再返回x的值
x++（自增运算符）先返回x的值，再将x的值加1
--x（自减运算符）先将x减1，再返回x的值
x--（自减运算符）先返回x的值，再将x的值减1
<script>
    var x=1
    console.log(x++)
    console.log(x)

    var y=2
    console.log(++y)
    console.log(y)
</script>

输出结果：

image.png

比较运算符

image.png

以上【===】比【==】多一个【=】的影响是，当只有元素一样的时候是【==】，而元素和乐类型都一样的时候是【===】，例如：

<body>
<script>
    var x="123"
    var y=123
    if (x===y){
        console.log("对了")
    }else{
            console.log("错了")
    }
</script>
</body>

输出结果：

image.png

逻辑运算符 image.png

  • &&类似于python中的and
  • ||类似于python中的or
  • !类似于python中的not

js输出语句

1.alret()函数

在浏览器中弹出一个提示框

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
    var a = 11,b = 5;
    alert("a * b = " + (a + b));
</script>
</body>
</html>

输出结果：

image.png

2.confirm()函数

confirm() 函数与 alert() 函数相似, 都可以在浏览器窗口弹出一个提示框。confirm() 函数创建的提示框中，除了包含一个“确定”按钮外，还有一个“取消”按钮。如果点击“确定”按钮，那么 confirm() 函数会返回一个布尔值 true，如果点击“取消”按钮，那么 confirm() 函数会返回一个布尔值 false

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
    var res = confirm("这里是要显示的内容");
    if(res == true){
        alert("你点击了“确定”按钮");
    }else{
        alert("你点击了“取消”按钮");
    }
</script>
</body>
</html>

3.console.log()函数 console.log() 可以在浏览器的控制台输出信息,要看到 console.log() 的输出内容需要先打开浏览器的控制台。以 Chrome 浏览器为例，要打开控制台您只需要在浏览器窗口按 F12 快捷键，或者点击鼠标右键，并在弹出的菜单中选择“检查”选项即可。最后，在打开的控制台中选择“Console”选项

var str = 'helloworld'
console.log(str);

4.document.write() 使用 JS document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
    document.write("<p>现在的时间是：</p>");
    document.write(Date());
</script>
</body>
</html>

输出结果：

image.png

分支、循环语句

1.if-else分支语句

类似于python中的if-else语句

if(条件表达式){
  // 当表达式成立时要执行的代码
}else{
  // 当表达式不成立时要执行的代码
}
// 
<html lang="en">
<head>
    <meta charSet="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
    let age = prompt("请输入你的年龄")
    if (age>=18) {
      console.log("欢迎光临");
    } else {
      console.log("你未成年哦");
    }
</script>
</body>
</html>

2.if-else if-else语句

类似于python中的if-elif-else语句

if (条件表达式 1) {
  // 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
  // 条件表达式 2 为真时执行的代码
}
  ...
else if (条件表达式N) {
  // 条件表达式 N 为真时执行的代码
} else {
  // 所有条件表达式都为假时要执行的代码
}

3.while循环语句

while (条件表达式) {
    // 要执行的代码
}

// 示例代码
var i = 1
var sum1 = 0
while( i <= 5) {
    sum1 += i
    i++
}

例如：用while循环实现1-10的循环

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<script>
    var n=0
    while(n<=10){
        document.write(n+'<br>')
            n++
    }
</script>
</body>
</html>

输出结果：

image.png 4.do while循环

do {
// 需要执行的代码
} while (条件表达式);

案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<script>
    do{
        console.log('do while循环体')
    }while(4>9)
</script>
</body>
</html>

输出结果：

image.png

5.for循环

for(变量初始值; 判断条件; 更新变量值的表达式) {
// 要执行的代码
}
// 实例代码
for (var i = 1; i <= 10; i++) {
document.write(i + " ");
}

// for in循环语句
for(变量 in object){
//要执行的代码
}
// 实例代码
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
console.log(prop)
}

案例：

<script>
    for(var i=1;i<=10;++i){
        console.log(i)
    }
</script>

注意：对键值对使用for循环的时候，是【for(X in XX)】，对数组和字符串使用for循环的时候，是【for(X of XX)】 输出结果：

image.png

6. switch case语句 在 switch 语句中，case 子句只是指明了执行起点，但是没有指明执行的终点，如果在 case 子句中没有 break 语句，就会发生连续执行的情况 为了避免这种情况 可以在case语句后面添加break语句 终止条件

switch (表达式){
  case value1:
    statements1  // 当表达式的结果等于 value1 时，则执行该代码
    break;
  case value2:
    statements2  // 当表达式的结果等于 value2 时，则执行该代码
    break;
    ......
  case valueN:
    statementsN  // 当表达式的结果等于 valueN 时，则执行该代码
    break;
  default :
    statements  // 如果没有与表达式相同的值，则执行该代码
}

例如：

<script>
    grade = 94
    var flag
    if(grade>=90){
        flag="A"
    }else if(grade>=75){
        flag="B"
    }else if(grade>=60){
        flag="C"
    }else{
        flag="D"
    }
    
    switch(flag){
        case 'A':
            console.log('非常棒')
            break
        case 'B':
            console.log('不错，继续加油')
            break
        case 'C':
            console.log('勉强过关')
            break
        case 'D':
            console.log('还需努力')
            break
        default:
            console.log('以上条件都不满足')
    }
</script>

输出结果：

image.png

7.break和continue语句

默认情况下循环会在表达式结果为假时自动退出循环，否则循环会一直持续下去。某些情况下，我们不用等待循环自动退出，可以主动退出循环，JavaScript 中提供了 break 和 continue 两个语句来实现退出循环和退出（跳过）当前循环。JavaScript中的循环控制语句跟python中是一样的

JS函数

1.定义函数

JS 函数声明需要以 function 关键字开头，后面跟上空格以及函数名，函数体用花括号括起来 格式如下：

function 函数名(参数) {
    // 函数中的代码
}

// 示例代码  函数声明
function numAdd(num1,num2){
        return num1+num2
    }
var res = numAdd(2,6)
console.log(res)

// 函数表达式   类似于 python中的匿名函数
var numAdd1 = function(num1, num2) {
    return num1+num2
}

2.调用函数

调用函数非常简单，只需要函数名后面加上一个括号即可

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('python');

JS事件

事件描述
onclick点击鼠标时触发此事件
ondblclick双击鼠标时触发此事件
onmousedown按下鼠标时触发此事件
onmouseup鼠标按下后又松开时触发此事件
onmouseover当鼠标移动到某个元素上方时触发此事件
onmousemove移动鼠标时触发此事件
onmouseout当鼠标离开某个元素范围时触发此事件
onkeypress当按下并松开键盘上的某个键时触发此事件
onkeydown当按下键盘上的某个按键时触发此事件
onkeyup当放开键盘上的某个按键时触发此事件
onabort图片在下载过程中被用户中断时触发此事件
onbeforeunload当前页面的内容将要被改变时触发此事件
onerror出现错误时触发此事件
onload页面内容加载完成时触发此事件
onmove当移动浏览器的窗口时触发此事件
onresize当改变浏览器的窗口大小时触发此事件
onscroll当滚动浏览器的滚动条时触发此事件
onstop当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
oncontextmenu当弹出右键上下文菜单时触发此事件
onunload改变当前页面时触发此事件
onblur当前元素失去焦点时触发此事件
onchange当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus当某个元素获得焦点时触发此事件
onreset当点击表单中的重置按钮时触发此事件
onsubmit当提交表单时触发此事件

案例：

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript" src="one.js"></script>
    <style>
        #d1{
            height:200px;
            width:200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
<!--<div id="d1"></div><br>-->
<div id="d1" onmousemove="ch()"></div><br>
<button onclick="change()">改变</button>
</body>

one.js文件：

var change=function(){
    var d1 = document.getElementById('d1')
    d1.style.backgroundColor = 'green'
    // d1.innerHTML = '这是通过change函数完成的写入'
}

function ch(){
    var d1 = document.getElementById('d1')
    d1.innerHTML = '这是通过ch函数完成的写入'
}

输出结果：

image.png

点击改变之后：

image.png

avatar
文章
阅读
粉丝