前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >开始学习简单的JS

开始学习简单的JS

原创
作者头像
Mike_JioDan
发布2021-12-14 21:23:13
5K0
发布2021-12-14 21:23:13
举报
文章被收录于专栏:JS基础学习JS基础学习

1.认识JS

js概念:运行在浏览器(客户端)的解释性(一行一行得执行)脚本语言。

js引擎:执行js代码:从上往下一行一行执行,出现问题则终止。

js的作用:

代码语言:txt
复制
Html:结构,骨架
代码语言:txt
复制
css:表现,美化
代码语言:txt
复制
js:行为 动效(轮播图。tab切换。楼层。拖拽,百度搜索,表单验证)

js的核心:

<ECMA:规范JS语法>

<w3c:规范html和css>

1.ECAM-Script:制定了js的语法规范

2.BOM: (browser object model)浏览器对象模型,提供了一套操作浏览器的API如:打开关闭浏览器窗口,前进go1后退(go-1)

3.dom:(docuement object madel)文档对象模型,提供了一套操作页面(body里的东西的API。

代码语言:txt
复制
言而总之,BOM与DOM都是通过JS 来操作页面。

2.JS的基础语法

2.1.js代码的书写

代码语言:txt
复制
1.行内式
代码语言:txt
复制
	a标签的<a href="javascript:js代码;">百度</a>
代码语言:txt
复制
	非a标签的,<button 行为属性="js代码">按钮</button>
代码语言:txt
复制
	需要通过事件来触发,如onclick,当点击时触发。
代码语言:txt
复制
2.内嵌式
代码语言:txt
复制
	书写方式:<script></script>
代码语言:txt
复制
	书写位置:可以在任何位置书写JS代码(不推荐写在顶部,因为加载时从上往下,所以推荐写在最下面,可以有多对标签,有顺序的加载,不覆盖)
代码语言:txt
复制
3.外链式
代码语言:txt
复制
	书写方式:<script src="demo.js"></script>
代码语言:txt
复制
	注意:1.在外链式的引入中,标签内的样式忽略。
代码语言:txt
复制
				2.demo.js中直接写js代码。

2.2JS的注释

代码语言:txt
复制
	注释:多行注释和单行注释
代码语言:txt
复制
	作用:对代码的解释说明
代码语言:txt
复制
	单行注释:多行注释

2.3js变量

变量:在程序中保存数据的一个容器!

代码语言:txt
复制
	如何定义变量
代码语言:txt
复制
	a)最常用的方式:
代码语言:txt
复制
		var x = 20000;声明一个变量,同时给x赋值20000
代码语言:txt
复制
		var 声明变量用的(告诉计算机,x是一个新的变量)
代码语言:txt
复制
	b)其他方式
代码语言:txt
复制
		var x;声明一个变量
代码语言:txt
复制
		x=20;声明后在进行赋值
代码语言:txt
复制
		var a,b,c;声明多个变量
代码语言:txt
复制
		a=20;
代码语言:txt
复制
		b=20:
代码语言:txt
复制
		声明多个变量然后再在进行赋值。
代码语言:txt
复制
		var a=20,b,v;也可以在声明的时候加入赋值

2.4变量的输出语法

代码语言:txt
复制
		alert(内容)
代码语言:txt
复制
		作用:弹出内容
代码语言:txt
复制
		console.log(内容)
代码语言:txt
复制
		作用:在控制台输出内容
代码语言:txt
复制
		document.write(内容)
代码语言:txt
复制
		作用:在页面内输出

2.5JS的命名规则和规范

代码语言:txt
复制
		规则:
代码语言:txt
复制
		1.组成部分:数字、字母、下划线、¥
代码语言:txt
复制
		2.不得以数字开头
代码语言:txt
复制
		3.不可以是关键字(var if switch care for while do)或保留字
代码语言:txt
复制
		4.严格区分大小写
代码语言:txt
复制
		规范
代码语言:txt
复制
		1.驼峰命名法 例:appplePrice   redApplePrice
代码语言:txt
复制
		2.见名知意:
代码语言:txt
复制
		3.不推荐使用中文

2.6JS的数据类型以及类型转换

代码语言:txt
复制
		1.数值类型=number
代码语言:txt
复制
		一切数组都是数值类型(包括二进制、十六进制、八进制)
代码语言:txt
复制
		NaN 不是一个数字
代码语言:txt
复制
		-整数
代码语言:txt
复制
		-小数
代码语言:txt
复制
		-科学计数法 10e5
代码语言:txt
复制
		-十进制 八进制 十六进制 二进制
代码语言:txt
复制
		-NaN(not a number)不是数字
代码语言:txt
复制
		2.字符串类型=string
代码语言:txt
复制
		被引号包括的内容都是字符串
代码语言:txt
复制
		-”123“
代码语言:txt
复制
		-‘123’
代码语言:txt
复制
		3.布尔类型=boolean
代码语言:txt
复制
		只有两个(true和false)
代码语言:txt
复制
		-true 
代码语言:txt
复制
		-false
代码语言:txt
复制
		4.null类型=空类型
代码语言:txt
复制
		仅有一个null

注!:检测返回值为object

代码语言:txt
复制
		5.undefined类型=未定义类型
代码语言:txt
复制
		只有一个undefined,表示没有值
代码语言:txt
复制
		只声明未赋值:var a;
代码语言:txt
复制
		-声明变量可以赋值为 undefined

2.7数据类型

代码语言:txt
复制
检测要配合输出进行操作,如:console.log(typeof('123'))
typeof:关键字检测
代码语言:txt
复制
		语法:
代码语言:txt
复制
			typeof(要检测的值)
代码语言:txt
复制
			typeof要检测的值
代码语言:txt
复制
			返回值(所出现的结果)
代码语言:txt
复制
			1.某一种数据类型(number string undefined object boolean)
代码语言:txt
复制
			2.一字符串的形式返回

isNaN:(is not number)检测一个值是不是数字,如果是,输出为 false

代码语言:txt
复制
			var n1 = 100; console.log(isNaN(n1)); //=> false
代码语言:txt
复制
			var s1 = 'Jack' console.log(isNaN(s1)); //=> true

2.8数据类型的转换

代码语言:txt
复制
			数据类型之间的转换,各种数据类型之间的转换

2.8.1如把其他数据类型转成数值:

代码语言:txt
复制
			方法一:
代码语言:txt
复制
					number(变量)
代码语言:txt
复制
							可以把一个变量强制转换位数值
代码语言:txt
复制
							可以转换位小数,会保留小数
代码语言:txt
复制
							可以转换布尔值
代码语言:txt
复制
										遇到不可以转换的会返回NaN
代码语言:txt
复制
			方法二:
代码语言:txt
复制
					parseInt(变量)
代码语言:txt
复制
						从第一位开始检查,是数字就转换,知道第一个不是数字的内容,直到一个不是数字的内容。开头如果不是数字直接返回NaN。
代码语言:txt
复制
						不认识小数点,只能保留整数
代码语言:txt
复制
			方法三:
代码语言:txt
复制
					parseFloat(变量)
代码语言:txt
复制
						从第一位开始检查,是数字就转换,知道第一个不是数字的内容,开头就不是数字,直接放回NaN
代码语言:txt
复制
						区别:认识一次小数点

2.8.2其他数据类型转成字符串

代码语言:txt
复制
						-变量.toString()
代码语言:txt
复制
						-string(变量)
代码语言:txt
复制
						-使用+运算

2.8.3其他数据类型转布尔

代码语言:txt
复制
						-Boolean(变量)在js中只有‘’、0、null、NaN这些事false,其余都是啥true.

JS第一天续

运算符

1.数学运算符

1.+

代码语言:txt
复制
	只有符号两遍都是数字才会进行加法运算
代码语言:txt
复制
	只要符号任意一边是字符串类型,就会进行字符串拼接

2.-

代码语言:txt
复制
	会执行乘法运算
代码语言:txt
复制
	会自动把两遍的值转化成数字在进行运算

3.*

代码语言:txt
复制
	会执行乘法运算
代码语言:txt
复制
	会自动把两遍的值转化成数字在进行运算

4./

代码语言:txt
复制
	会进行除法运算
代码语言:txt
复制
	会自动把两遍的值转化成数字在进行运算

5.%

代码语言:txt
复制
	会进行取余计算
代码语言:txt
复制
	会自动把两遍的值转化成数字在进行运算

2.赋值运算符

1.=

代码语言:txt
复制
就是赋值操作,把等号右边的值赋给左边的变量

2.+=

代码语言:txt
复制
var a = 10;
代码语言:txt
复制
a += 10;
代码语言:txt
复制
console.log(a);
代码语言:txt
复制
//值为20
代码语言:txt
复制
a += 10等价于a= a + 10

3.-=

var a = 10;

a -=10;

console.log(a);//值为0

a -=10等价于a = a - 10;

4.*=

a =10等价于a = a 10;

5./=

a /=10等价于a = a / 10;

6.%=

a %=10等价于a = a % 10;

比较运算符

1.==

代码语言:txt
复制
	比较两边的值是否相等,不管数据类型
代码语言:txt
复制
	1=='1' 得到true

2.===

代码语言:txt
复制
	绝对等于号
代码语言:txt
复制
	比较两边的值是否完全相等,包括数据类型
代码语言:txt
复制
	1=='1' 得到FALSE

3.!=

代码语言:txt
复制
	不等于 比较两边的值是否相等,相等时得到FALSE
代码语言:txt
复制
	1!='1' 得到FALSE

4.!==

代码语言:txt
复制
	比较两边的值是否完全不相等,相等的时候得到FALSE
代码语言:txt
复制
	1!=='1'得到 TRUE

5.>=

代码语言:txt
复制
	比较两边的值是否左边大于等于右边

6.<=

代码语言:txt
复制
	比较两边的值是否左边小于右边

注:注意运算符的书写顺序

7.>

8.<

逻辑运算符

1.&&

代码语言:txt
复制
并且:左右两侧需要同时为true才可生效

2.||

代码语言:txt
复制
或:左右两次只需要一个为true即可生效

3.!

代码语言:txt
复制
取反运算,与本身的值相反

自增自减运算符

1.++

代码语言:txt
复制
	进行自增运算
代码语言:txt
复制
	分为前置++及后置++
代码语言:txt
复制
	var a=10;
代码语言:txt
复制
	前置++如,++a,输出为11;
代码语言:txt
复制
	后置++如,a++,输出为a 然后再把a的值变成11

2.--

代码语言:txt
复制
	进行自减运算
代码语言:txt
复制
	用法与自加相同

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.认识JS
  • 2.JS的基础语法
    • 注!:检测返回值为object
    • JS第一天续
      • 运算符
        • 1.数学运算符
        • 2.赋值运算符
        • 比较运算符
        • 逻辑运算符
        • 自增自减运算符
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档