JavaScript基础语法(Web前端开发笔记第三期)

p.s.这是萌新自己自学总结的笔记，如果想学习得更透彻的话还是请去看大佬的讲解

JavaScript是一种运行在客户端(浏览器)的编程语言，实现人机交互效果

作用：

网页特效(监听用户的一些行为让网页做出对应的反馈)

表单验证(针对表单数据的合法性进行判断)

数据交互(获取后台的数据。渲染到前端)

EMCAScript:规定了js基础语法核心知识，如：变量、分支、循环语句、对象等

Web APIs：

DOM操作文档：对页面元素进行移动、大小、添加删除等操作

BOM操作浏览器：比如页面弹窗、检测窗口宽度、存储数据到浏览器等

书写位置

内部js：直接写在html里，用script标签包住

规范：script标签写在</body>上面

我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML

如果先加载的JavaScript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失效

因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略

。

。

外部js：代码写在以.js结尾的文件

语法：通过script标签，引入到html页面中

script标签中间无需写代码，否则会被忽略

外部js会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读

。

。

内联js

。。

alert("hello js!")页面会弹出警告对话框

输入输出语法

输出语法：document.write("hello js!")

作用：向body内输出内容

注意：如果输出的内容写的是标签，也会被解析成网页元素

举例

html 复制代码

<script>
    // 文档输出内容
    document.write("hello js!")
    document.write("<h1>一级标题</h1>")
    // 控制台打印输出给程序员
    console.log("这是一条日志")
</script>

输入语法：``

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
alert()和prompt()会跳过页面渲染先被执行

变量&常量

变量声明变量语法：let 变量名

变量名只能由下划线、字母、数字、$组成，且字母不能开头

变量区分大小写，命名遵循驼峰规则

let取代var原因

var声明：可以先使用在声明(不合理)

var声明过的变量可以重复声明(不合理)

变量提升、全局变量、没有块级作用域等

常量声明变量语法：const 变量名

数据类型

js是弱数据类型语言，赋值后才知道是什么数据类型

分为基本数据类型和引用数据类型

基本数据类型：

number 数字型

string 字符串型

boolean 布尔型

undefined 未定义型：声明一个变量但未赋值(我们开发中经常声明一个变量，等待传送过来的数据。，如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。)

null 空类型：声明一个变量且赋值为null

用单引号和双引号和反引号都是声明的字符串类型，推荐单引号

拼接字符串有两种

js 复制代码

let age = 18
document.write(`我今年${age}岁了`)

document.write('我今年'+age+'岁了')

运算符

由于js与java的许多运算符相同，在此不过多赘述

比较运算符

<: 左边是否小于右边

=: 左边是否大于或等于右边

<=: 左边是否小于或等于右边

==: 左右两边值是否相等
===: 左右两边是否类型和值 都相等
!==: 左右两边是否不全等

类型转换

隐式类型转换

+号两边只要有一个是字符串，都会把另外一个转成字符串

除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

+号作为正号解析可以转换成数字型

任何数据和字符串相加结果都是字符串

js 复制代码

let num = +prompt('请输入商品数量：')
let address = prompt('请输入收获地址：')
// 2. 计算总额
let total = price * num
// 3.页面打印渲染
document.write(`
<table>
  
    商品名称
    商品价格
    商品数量
    总价
    收货地址
  
  
    小米
    ${price}元
    ${num}
    ${total}元
    ${address}
  </table>

`)

if-else;switch;for;while与java写法相同，不过多赘述

详情看这里

数组

声明语法:let arrary = [数据1,数据2,数据3]

arr.push(num) 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
arr.unshift(num) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
arr.pop() 方法从数组中删除最后一个 元素，并返回该元素的值
arr.shift() 方法从数组中删除第一个 元素，并返回该元素的值
arr.splice(start, deleteCount)：start ：指定修改的开始位置（从0计数）；deleteCount:表示要移除的数组元素的个数，可选;如果省略则默认从指定的起始位置删除到最后

函数

js 复制代码

function test(a=0,b=0){
    return a+b;
    //函数可以没有return，此时函数的默认返回值为undefined
}

在Javascript中实参的个数和形参的个数可以不一致

➢ 如果形参过多会自动填上undefined (了解即可)

➢ 如果实参过多那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)

注意:如果函数内部，变量没有声明，直接赋值，也当全局变量看，

匿名函数

js 复制代码

//函数表达式
let fn = function() {
    return 1;
}

//--------------------
//不需要调用，立即执行，避免污染全局变量
(function () { console.log(11) })();

对象

js 复制代码

let person= {
name: 'zhangsan',
age: 18,
gender: '男'，
say:function test(a=0,b=0){
    return a+b;
   
}
}

//删除属性
delete person.name

//属性查的另外一种写法
//对于多词属性或则 - 等属性，点操作就不能用了。
//我们可以采取： 对象['属性'] 方式

//遍历属性
for (let key in person) {
    console.log(key)   // 打印属性名
    console.log(obj[key ])  // 打印属性值value
}

//生成0-10的随机数
Math.floor(Math.random() * (10 + 1))
//生成N-M的随机数
Math.floor(Math.random() * (M - N + 1)) + N

JavaScript基础语法(Web前端开发笔记第三期)

目录

书写位置

输入输出语法

变量&常量

数据类型

运算符

类型转换

if-else;switch;for;while与java写法相同，不过多赘述

数组

函数

匿名函数

对象