JavaScript基本语法

最新推荐文章于 2023-05-09 19:08:55 发布

黑球啊

最新推荐文章于 2023-05-09 19:08:55 发布

阅读量145

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52563771/article/details/116566106

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、浏览器组成部分

1.shell部分
2.内核部分：

渲染引擎（语法规则和渲染）包括HTML与CSS在内的部分。
js引擎

web的标准构成

标准	内容及说明
结构	HTML 网页元素的结构与位置
表现	CSS 网页元素的外观和位置
行为	JavaScrip 网页模型的定义与交互

二、JS组成

核心：ECMAscrpt
文档对象模型 (DOM)
浏览器对象模型（BOM）

三、JS 特点

解释性语言。
先说编译语言与解释语言的区别

编译语言：通篇翻译，翻译后生成翻译文件，然后执行翻译文件（C语言翻译为.obj文件，后系统执行.obj翻译文件）

优点：翻译速度快（用于开发底层如：游戏引擎等）
缺点：移植性不好(不跨平台，一般不用于服务端）

解释语言：翻译一行，系统执行一行，不会生成翻译文件

优点：移植性好，跨平台
缺点：翻译速度慢

JS 引擎单线程
同一时间接受一个用户
兼容于ECMA标准（故又称为EcmaScript)
面向对象

四、JS引入方法

内部JS
在页面内使用 <script></script>标签包含代码内容
实例：利用内部js 输出"Halloworld"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        document.write('Halloworld')
    </script>
</body>
</html>

外部JS文件
新建JS文件，通过<script src="URL"></script>来引入外部JS文件
实例：运用外部JS文件输出"Halloworld"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="外部JS.js">
    </script>
</body>
</html>

在web标准（开发标准）中，要实现结构、样式、行为相分离，通常会采用外部引入方法

注意：如果采用外部JS文件，那么<script></script>标签中不能再写内容，会被系统忽略。

五，JS 数据类型

引用类型

对象（Object）

可以用 typeof 运算符来确定 JavaScript 变量的数据类型。

原始值数据类型

基本数据类型	说明
Number	JavaScript 支持整数和浮点数类型。`infinity`表示无穷大大于任何数值，`-infinity`表示无穷小，小于任何数值，`NAN`（not a number) 代表一个非数值
String	用单引号或双引号来说明，可以用字符串类型的`length`来获取字符串的长度，掌握字符串引号嵌套原理
Boolean	值只能为’true’ 和’false’
Undefined	指在变量被创建后，但未给该变量赋值以前所具有的值。
Null	没有任何值,不表示什么

数据类型转换

在这里插入图片描述

转换为字符串

方式	案例
`toString()`	`var num = 1; alert(num.toString());`
`String()`强制转换	`var num = 1; alert(String(num));`
加号拼接字符串	`var num = 1; alert(num+ ' ')`

转换为数字型

方式	案例
`parseInt(变量)`只能取整数	`parseInt('12')`
`parseFlaot(变量）`可以取浮点数	`parseFloat('12.11')`
`Number()`强制转换	Number(‘12’)

函数

JavaScript 函数通过function关键词进行定义，其后是函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号，规则与变量名相同

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

说明：
在函数调用时，利用return语句，来使函数停止，将返回值返回给调用者。

数组

JavaScript 数组用于在单一变量中存储多个值。数组是一种特殊的变量，它能够一次存放一个以上的值。

在这里插入图片描述

数组方法

在这里插入图片描述

六、JS的输出

显示方式：

使用 window.alert()写入警告框

<script>
window.alert(5 + 6);
</script>

使用 document.write() 写入 HTML 输出

<script>
document.write(5 + 6);
</script>

使用 innerHTML 写入 HTML 元素

<script>
document.getElementById("demo").**innerHTML** = 5 + 6;
</script>

说明：
JavaScript 可使用document.getElementById(id) 方法来访问HTML元素。id为HTML元素的类名

使用console.log()写入浏览器控制台
prompt(info）浏览器弹出输入框，用户可以输入

七、JS 基本语法

变量

在JavaScript中使用var关键词来声明变量，通常使用变量来存放数据，放于内存之中

var x;

x = 7;

说明:定义了一个变量x，并且给x赋值为7
注意：

在声明时就给变量赋给了初值，叫做初始化。
同时声明多个变量时，只需要写一个var,多个变量之间用英文逗号隔开，如下：

<script>
	var age = 10,
		name = lx,
		sex = 0;
</script>

变量的命名是严格区分大小写，不能使用关键字和保留字做变量名
变量名遵守驼峰命名法：首字母小写，后面的单词首字母需要大写。例如：myFirstName

标识符

在 JavaScript 中，标识符用于命名变量,可由数字，字母，下划线(_)以及美元符号($)构成.

注意首字符必须是字母、下划线（_）或美元符号（$），数字不能作为标识符的开头。

运算操作符

加法运算符（+)

可以进行数字运算，以及字符串的连接
任何数据类型加字符都等于**字符串*

其它运算符( / , * , -, % )用法与C语言中的相同

自增(++)，自减(–)运算符的前置与后置与c语言相同：

置自增与后置自增在单独使用时，效果相同。
与其他代码组合使用时效果不同，前置自增为先先自增，再返回值，后置自增为先返回值，再自增，

比较(关系)运算符

比较运算的返回值要么为false要么为true两种结果

符号	说明
<	小于
>	大于
>=	大于等于
<=	小于等于
==	等于
!=	值不相等
===	值相等并且类型相等
!==	值不相等或类型不相等

`==`与`===`的区别

==在比较过程中不会比较数据类型，其会进行类型的隐式转换，例如：比较 2==‘2’ ,时返回的是true
===在比较的过程中会进行数据类型的比较，当其两边数据类型不同时返回的是false

逻辑运算符

&& 与and、 ||与 or 、! 三个逻辑语言与C语言用法相似。

逻辑运算的短路(中断)情况:
当与运算的表达式一为假时，不用再管表达式二的真假值。
当或运算的表达式一为真时，不用再管表达式二的真假值。

位运算符

位运算符详解

运算符	名称与描述
`&`	AND 如果两位都是 1 则设置每位为 1
`\|`	OR 如果两位之一为 1 则设置每位为 1
`^`	XOR 如果两位只有一位为 1 则设置每位为 1
`~`	NOT 反转所有位
`<<`	零填充左位移通过从右推入零向左位移，并使最左边的位脱落。
`>>`	有符号右位移通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。
`>>>`	零填充右位移通过从左推入零来向右位移，并使最右边的位脱落。

赋值运算符

符号	说明
`=`	直接赋值
`+=`	x=x+y
`-=`	x=x-y
`*=`	x=x*y
`/=`	x=x/y
`%=`	x=x%y

运算符优先级

运算符	顺序
小括号	()
一目运算符	`++ -- !`
算数运算符	`* / % + -`
关系运算符	`> >= < <=`
相等运算符	`!== != === !==`
逻辑运算符	`&& \|\|`
赋值运算符	`=`
逗号运算符	`,`

条件运算符

在这里插入图片描述

八、作用域

在JavaScript 中有两种作用域类型：

局部作用域
全局作用域

局部作用域

在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量的作用域是局部的：只能在函数内部访问它们。

// 此处的代码不能使用 carName 变量

function myFunction() {
    var carName = "porsche";

    // 此处的代码能使用 carName 变量

}

全局作用域

函数之外声明的变量，会成为全局变量。
全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

var carName = " porsche";


// 此处的代码能够使用 carName 变量

function myFunction() {

    // 此处的代码也能够使用 carName 变量

}

九、分支结构

顺序结构

就是之前学过的顺序结构

分支结构

if条件语句
if-else结构
switch-case机制（记得break）

循环结构

while 循环
do-while循环（break，continue关键字）
for循环
注意循环嵌套，以及三种循环的区别

黑球啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript基本语法

Javascrip基本语法一，浏览器组成部分二， js特点一，浏览器组成部分1.shell部分2.内核部分：渲染引擎（语法规则和渲染）包括HTML与CSS在内的部分。js引擎二， js特点解释性语言。先说编译语言与解释语言的区别编译语言：通篇翻译，翻译后生成翻译文件，然后执行翻译文件（C语言翻译为.obj文件，后系统执行.obj翻译文件）优点：翻译速度快（用于开发底层如：游戏引擎等）缺点：移植性不好(不跨平台，一般不用于服务端）解释语言：翻译一行，系统执行一行，不会生成
复制链接

扫一扫