前端入门(一)JavaScript语法、数据类型、运算、函数

文章目录

概念

  • JavaScript是用于浏览器交互操作的脚本语言。
  • 为了确保不同的浏览器上运行的JavaScript标准一致,所以几个公司共同制定了JS的标准命名为ECMAScript

JavaScript编写的位置

  • 写在HTML中的script标签中
  • 写在.js文件中,然后在script标签中使用src引入
  • 写在按钮标签的"onclick"属性中
  • 写在超链接标签"href"属性中

JS既有专门的.js文件,在html文件中使用script标签,添加src属性引入js文件,也可在html文件中直接使用,用script标签,script标签必须成对出现

三个简单的JavaScript语句:

  • alert("弹窗信息"):控制浏览器弹出一个警告框
  • document.write():让计算机在页面中输出一个内容,即向body输出一个内容
  • console.log("控制台输出内容"): 向控制台输出一个内容

js代码也可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护。

基本语法

  • JS中严格区分大小写
  • JS中每一条语句都以分号(;)结尾,如果不写分号,浏览器会自动添加,但是会消耗一定的系统资源
  • JS中忽略多个空格和换行

JS中只有var类型变量,语句类似于Java。

在浏览器中调试JS需要注意:

Element:元素(html框架)

Console:命令控制台,如console.log(""/var),控制台输出,相当于print

Sources:源码

Network:抓包

Application:应用,查看缓存等

数据类型

  • number: 数字类型,JS中不分小数和整数
  • string:字符串类型
  • boolean:布尔值类型
  • object:对象类型
  • function:函数类型
  • undefined:未定义类型

变量声明var、let、const

letconst是ES6新增的关键字

var、let、const的区别在于:

  • let和var用来声明变量,而const用来声明常量,但是const声明的引用类型是可以改变的
  • var是函数作用域,let是块作用域
    • var是函数作用域,在整个函数内都是有效的,在for循环内定义一个var变量,实际上在for循环外,函数内,都是可以访问的
    • let和const是块级作用域,只在代码块内有效,例如for循环内定义的,for循环外不可访问。 所谓块级作用域,就是用{}包含的区域,我们常用的有for,while,if等。但是在块级作用域中用let声明变量,那么此变量就有了块级作用域,就必须只有在此块级作用域才能访问此变量。
    • const实际保证的并不是变量的值不可变,而是变量指向的内存地址不可变,有点类似Java中的final,因此,对象不可变,对象的属性是可变的。
    • 如果在全局作用域使用var声明变量,此变量会默认成为window的一个属性
    • var声明的变量有变量提升特性,let声明则没有这个特性,所谓变量提升,就是js引擎把变量的声明部分和函数的声明部分提升到代码开头的行为;变量提升后,会给变量默认赋值为undefined

例如下边代码:

javascript 复制代码
console.log(a)
var a = 1

这里会打印undefined,这是因为变量提升后,实际代码是下边这个样子:

javascript 复制代码
var a
console.log(a)
a = 1

undefined与null的区别

  • undefined表示只定义了变量,并没有给变量赋值
  • null表示数值为空值,给变量赋了null

字符串类型

  • 字符串类型用单引号或者双引号包裹
  • 可以使用转译字符'',或者字符模板${变量名},在字符串中引用字符串
  • JS中的字符串是不可变的

数组


Map和Set

函数定义与参数传递


关键字throw,抛出异常,类似汇报异常报告

关键字:arguments,一个包含所有函数输入参数的数组

变量的作用域let、const



全局变量绑定在window的下边

方法的定义与调用


方法.apply(对象1,参数)

apply修饰方法,可以将方法中的this指向为apply的第一个参数,对象名,apply的第二的参数是给方法输入参数赋值

常用内部对象

typeof()

Date()

注:Date(timestamp)可由时间戳返回时间

json

json是数据在传输时的存在形式,在抓包中可以看见。

对象原型

.proto :指向某个对象作为原型,类似父类对象

其实proto只是指向了原型对象,并不是真正意义上的继承,如果对象指定一个原型对象后,当对象再指定第二个原型时,对象有的第一个原型的属性会丢失,即不再与第一个原型有指向关系。。

既然类似Java的继承父类,JS后来引入了class关键字

使用class定义的对象,可以使用new关键字直接继承这个类的属性

也可用extend,在构建子类时继承父类

操作BOM对象

浏览器对象模型(Browser Object Model (BOM))允许 JavaScript 与浏览器对话。

document


操作DOM对象

DOM为网页的文档树,全称是Document Object Model,翻译过来是文档对象模型的意思


  • 在已有节点下追加节点
    使用append给父级节点追加新节点:
  • 创建新的节点

表单操作(验证)+MD5算法检验密码

  • 获取表单信息
  • 表单提交绑定事件
    onsubmit = function/class
html 复制代码
<form action="" method="post" onsubmit="functionName() "></form>

<script>
    function functionName(){
        alert(1)
    }  
  • 按钮绑定事件

onclick = function/class

html 复制代码
<p>
    <input type="button" onclick="functionName()">
</p>


jQuery


jQuery CDN加速

jQuery中文文档

jQuery 使用公式:$选择器().action()

/"拿钱给人办事"/



相关推荐
无责任此方_修行中1 分钟前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
黑子哥呢?12 分钟前
安装Bash completion解决tab不能补全问题
开发语言·bash
青龙小码农17 分钟前
yum报错:bash: /usr/bin/yum: /usr/bin/python: 坏的解释器:没有那个文件或目录
开发语言·python·bash·liunx
大数据追光猿23 分钟前
Python应用算法之贪心算法理解和实践
大数据·开发语言·人工智能·python·深度学习·算法·贪心算法
彳卸风1 小时前
Unable to parse timestamp value: “20250220135445“, expected format is
开发语言
dorabighead1 小时前
JavaScript 高级程序设计 读书笔记(第三章)
开发语言·javascript·ecmascript
风与沙的较量丶2 小时前
Java中的局部变量和成员变量在内存中的位置
java·开发语言
水煮庄周鱼鱼2 小时前
C# 入门简介
开发语言·c#
编程星空3 小时前
css主题色修改后会多出一个css吗?css怎么定义变量?
开发语言·后端·rust
软件黑马王子3 小时前
Unity游戏制作中的C#基础(6)方法和类的知识点深度剖析
开发语言·游戏·unity·c#