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

2024-06-08 07:12

本文主要是介绍前端三大件速成 05 javascript(1)js组成、引入、基本语法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

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

一、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) // 1console.log(~6) // -7console.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>

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")
}

8、函数

//定义函数
function f(){console.log(123)
}//调用函数
f()

这篇关于前端三大件速成 05 javascript(1)js组成、引入、基本语法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1041497

相关文章

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++

springboot+dubbo实现时间轮算法

《springboot+dubbo实现时间轮算法》时间轮是一种高效利用线程资源进行批量化调度的算法,本文主要介绍了springboot+dubbo实现时间轮算法,文中通过示例代码介绍的非常详细,对大家... 目录前言一、参数说明二、具体实现1、HashedwheelTimer2、createWheel3、n

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题:应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案:提前预热各种资源1. Flowable

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交