菜单 搜索
首页 前端知识 前端三大件速成 05 javascript（1）js组成、引入、基本语法

前端三大件速成 05 javascript（1）js组成、引入、基本语法

2024-08-25 23:08:06 前端知识 前端哥 531 807 我要收藏

文章目录

  • 一、js组成
  • 二、js的引入
  • 三、基本语法
    • 1、变量
    • 2、基本规范
    • 3、关键字
    • 4、数据类型
      • （1）基本数据类型
      • （2）引用数据类型
      • （3）数据类型转换
      • （4）typeof运算符
    • 5、运算符
    • 6、流程控制
      • （1）选择结构
      • （2）循环语句
    • 7、异常处理

一、js组成

核心(ECMAScript)：规定了js的基本语法、关键字等
文档对象模型(DOM)：整合js，css，html
浏览器对象模型(BOM)：整合js和浏览器

js在开发中绝大多数情况是基于对象的，也是面向对象的。

二、js的引入

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
</head>
<body>
 
<script>
    alert(123);
</script>
 
</body>
</html>
复制

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <script src="tset.js"></script>
 
</head>
<body>
 
</body>
</html>
复制

tset.js文件：

alert(666);
复制

注：script标签放在哪都行，不过代码是从上到下顺序解释的的，所以最好放在body标签最下面，否则找标签可能找不到。

三、基本语法

1、变量

（1）变量是弱类型的。
（2）声明变量时不用声明变量类型，全部使用var关键字。

var x;  //变量声明
x = 12;
alert(x);    //浏览器弹出一个弹框，输出x值
console.log(x); //在控制台输出x值
复制
var x=10;  //变量声明，同时赋值
console.log(x); //在控制台输出x值
复制

（3）声明变量时，不用关键字var，那么它是全局变量
（4）变量命名：首字母只能是字母、下划线、$ 三选一，且区分大小写。

2、基本规范

（1）语句结束以分号结尾，如果不加分号，浏览器会以换行符为语句结束标志，自动加上分号。规范上，建议分号不要省。
（2）注释：单行注释 //  多行注释 /* */
（3）使用{ }来封装代码块

3、关键字

在这里插入图片描述

4、数据类型

（1）基本数据类型

number： 整型和浮点型
string： 字符串，首尾用单引号或双引号括起。js没有字符类型，单个字符也是字符串。
常用转义字符： \n 换行  \’ 单引号  \" 双引号 \\ 右划线
boolean： 布尔型，仅有两个值，true和false，分别代表1和0
undefined： 只有一个值，即undefined。变量声明后没有赋值，或者函数没有返回值时，其值为undefined。
Null： 只有一个值null，表示尚未存在的对象。如果函数返回的是对象，那么找不到该对象时，返回的通常是null。注意：typeof null 返回值为object

（2）引用数据类型

数组等复合数据类型均为object

（3）数据类型转换

①隐式转换：
数字 + 字符串：数字转换为字符串
数字 + 布尔值：布尔值转换为数字
字符串 + 布尔值：布尔值转换为字符串true或false

var x=10,y="ab",z=true;
console.log(x+y)    //10ab
console.log(x+z)    //11
console.log(y+z)    //abtrue
复制

用一元加减法转化为数字

var n = "5"
n = +n
console.log(typeof n) // number
复制

②强制转换：

// 转换为整数
console.log(parseInt("123ab"))  // 123
console.log(parseInt("ab123"))  // NaN
console.log(parseInt("hello"))  // NaN
//NAN: not a number,属于Number的一种
console.log(typeof NaN)         //number
复制
console.log(parseInt("6.99ab")) // 6
// 转换为浮点数
console.log(parseFloat("6.99ab")) // 6.99
复制
console.log(eval("1+1")) // 2
console.log(eval("1<2")) // true
复制

（4）typeof运算符

typeof可以查看数据类型

function f() {
    // 相当于写了个html语句
    document.write("<h1>hello world！</h1>")
}
console.log(typeof f()) // undefined
console.log(typeof f)   // function
复制

5、运算符

①加 +  减 -  乘 *  除 /  取余 %

console.log(2+3) // 5
console.log(3*2) // 6
console.log(11/2) // 5.5
console.log(11%2) // 1
复制

②自增1: i++ ++i   自减1: i-- --i

var i =10
console.log(i++) // 10
console.log(++i) // 12
复制

③比较运算符
大于 >   小于 <
大于或等于 >=   小于或等于 <=
赋值 =
等于 ==  不等于 !=
完全等 ===

var n = 5
console.log(n == 5) // true
console.log(n == "5") // true
console.log(n === "5") // false
复制

比较运算符两侧如果一个是数字类型，一个是其他类型，会将其他类型转换为数字类型。
比较运算符两侧如果都是字符串类型，则从前往后按位比较字符对应的ascii码。

console.log(5>"3") // true
console.log("5">"31") // true
复制

④NaN只要参与比较，布尔值一定是false，除非 !=

var n = NaN
console.log(n>5) // false
console.log(n<5) // false
console.log(n==5) // false
console.log(n==NaN) // false
console.log(n!=NaN) // true
复制

⑤逻辑运算符
且 &&   或 ||   非 !
且 &&：
如果第一个操作数为真，返回第二个操作数。
如果第一个操作数为假，返回第一个操作数。
null，NaN，undefined，均为假

var x = 5, y = 0, z = true;
 
console.log(x && y) // 0
console.log(y && z) // 0
console.log(z && x) // 5
复制

或 ||：
如果第一个操作数为真，返回第一个操作数。
如果第一个操作数为假，返回第二个操作数。

console.log(0 || 10) // 10
console.log(11 || 0) // 11
复制

非 !：

console.log(!10) // false
console.log(!0) // true
复制

⑥位运算符
左移 <<：按位左移，后面补0
右移 >>：按位右移，前面补0
按位取反 ~
按位与运算 &
按位或运算 |
按位异或运算 ^

console.log(3<<1) // 6
console.log(3>>1) // 1
 
console.log(~6) // -7
 
console.log(2&1) // 0
console.log(2|1) // 3
console.log(2^3) // 1
复制

6、流程控制

（1）选择结构

if语句：

if (2>1){
    console.log(222)
}
复制
if (2>10){
    console.log(222)
}else {
    alert(10)
}
复制

此外，if语句还可以嵌套

switch语句：

var week=3;
 
switch (week){
   case 1:alert("星期一");break;
   case 2:alert("星期二");break;
   case 3:alert("星期三");break;
   case 4:alert("星期四");break;
   case 5:alert("星期五");break;
   case 6:alert("星期六");break;
   case 7:alert("星期日");break;
   default:alert("nothing");
}
复制

（2）循环语句

for语句：
for (初始化; 条件；增量) {
  循环体
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<p>hello1</p>
<p>hello2</p>
<p>hello3</p>
<p>hello4</p>
 
<script>
 
var elses_P = document.getElementsByTagName("p")
console.log(elses_P)
 
for (var i=0;i<elses_P.length;i++){
    console.log(i);
    console.log(elses_P[i]);
}
 
</script>
 
</body>
</html>
复制

for…in 语用于遍历对象的可枚举属性：

data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
 
 for (var i in data){
     console.log(i);
 }
复制

注意：for…in 这种语句有很多弊端，比如遍历数组时，返回是其索引值；遍历元素时，会输出一些其他内容。

while语句：
while (条件) {
 循环体
}

var x = 0,i = 1;
 
while (i<=100) {
    x += i;
    i++
}
 
console.log(x) // 5050
复制

7、异常处理

try {
    // 这段代码顺序执行，其中任何一个语句抛出异常，该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行
    // e是一个局部变量，用来指向Error对象，或者其他抛出的对象
}
finally {
    // 无论try中代码是否有异常抛出，甚至try代码块中有return语句，
    // finally代码块中始终会被执行。
}
// 主动抛出异常 throw Error("xxx")
复制

例：

try {
    console.log(123)
    throw Error("define error")
}
catch (e) {
    console.log(e)
}
finally {
    console.log("finally")
}
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/16833.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！