js基本用法
1. 在HTML里面加入JavaScript
方法非常简单,就是通过一对<script></script>标签,然后在标签里面书写代码即可

2. 标签位置
按照以前传统的方法,我们的script标签都是放在head标签里面的。但是由于浏览器进行渲染的时候是由上往下进行渲染,这样会导致浏览器在呈现页面的时候出现延迟。延迟的时候就是空白,影响用户体验。所以现在的方法,都是讲script标签写body里面,元素的后面。

3. 外部JS文件
1)可维护性高
2)可缓存:例如有两个HTML文件(A,B)都是用的同一个JS文件。当用户请求A页面的时候,A页面的HTML文件和JS文件一起被下载到本地。接下来用户再请求B页面的时候,只需要下载B页面的HTML页面即可,因为JS文件已经有了。


4. JavaScript语法
1)JavaScript区分大小写
test和Test表示不同变量
2)标识符
JavaScript里面的标识符由数字,字母,下划线(_)和$组成,不能以数字开头
3)注释
JavaScript注释有两种:多行注释和单行注释

4)关键字
所谓关键字,就是系统已经定义好了的标识符。我们不能够使用关键字来作为我们的标志符。
关键字与保留字:所谓保留字,就是目前还没有成为关键字,但是有可能在下一个版本成为关键字的一些标识符。我们也不能使用保留字来作为我们的标识符
5)变量
JavaScript是一门弱类型语言。JavaScript里面申明任何数据类型都用一个var就可以了

5. JavaScript里面的数据类型
JavaScript支持5种简单的数据类型:number,string,boolean,undefined,null。
number:数字类型
string:字符串类型
boolean:布尔类型
undefined:定义了一个变量但是没有被赋值
null:表示是一个空
undefined:表示一个变量定义了但是没有被赋值

效果:

null:表示是一个空的对象。事实上我们的undefined就是从null上派生而来的。
boolean:布尔类型
布尔类型的值只有两个:true和false。这两个值是区分大小写。
number类型:这个数据类型包含了整数和实数,NaN

八进制一般以0开头,十六进制一般以0x开头
在JavaScript里面,无论几进制,最终计算结果都是以十进制来呈现

结果:最终都是以十进制的形式来显示结果

实数:所谓实数,通俗的讲,就是小数,当然也被称之为浮点数。我们的浮点数有两种表示方法:小数型,科学计数型

数值范围:由于我们的内存是有限的,所以并不能保存所有的数。


如果超出我们JavaScript所支持的数值范围,则会变成无穷大(infinity)或者无穷小(-infinity)

结果:

所谓NaN,英语全称Not a number,表示不是一个数。如果任何一个数和NaN进行操作的话,返回的会是NaN

会弹出NaN。注意:NaN的数据类型也是number
NaN与任何值都不相等,包括它自己本身

结果:弹出false
isNaN():判断一个参数是否不是一个数
例如:

返回结果会是false。因为1234是一个数,所以它不是NaN,所以返回false
数值转换
number(),parseInt(),parseFloat()
number():将一个非数值转换为数值
如果是一个布尔值,要么被转换为1,要么被转换为0
如果是数字,那么该是多少,就是多少
如果是null值,会被转换为0
如果是undefined,会被转换为NaN

字符串转换为数字:
如果字符串里面只包含数字,那么只会被转换为十进制

如果字符串为空,将会被转换为0
如果有字母,那么就将会被转换为NaN
如果字符串是八进制,那么会忽略前面的0,但是如果是16进制的话,会转换为相应的十进制数

parseInt():该函数会更多的看是否有数字。如果有就会被转换为数字。如果字符串为空,将会被转换为NaN。还有一点就是,如果是3.14,那么会被转换为3

事实上,我们parseInt()函数提供了第二个参数。指定转换为几进制

示例2:

parseFloat():该函数只能解析10进制,所以没有第二个参数。会将带有小数点的字符串转换为小数。

string数据类型
string就是字符串数据类型。在JavaScript里面,字符串既可以用单引号也可以用双引号

字符串内容本身如果含有单引号,那么外层就必须是双引号,如果内容本身是双引号,外层就需要是单引号

如果想内容和外层都是单引号或者双引号,那么就需要加上转义字符

字符串数据类型非常的霸道。只要字符串数据类型和其他数据类型一相加,就都变为了字符串数据类型

最终i的数据类型变为了string。
所以,这里有一个技巧,如果想让其他数据类型变为字符串数据类型,只需要加一个空字符串就可以了。

toString():就是将其他数据类型转换为字符串数据类型(但是不能转换null和undefined)

String():5种数据类型都可以转换为string类型

运算符
1. 一元运算符
只能操作一个值的操作符就被称为一元运算符。自增和自减就是典型的一元运算符。
a++(a--)和++a(--a)
a++:先进行运算,然后再自增1
++a:先自增1,然后再参与运算

在JavaScript里面,自增自减不仅仅局限于数值,其他类型也可以。
如果是一个包含有效数字的字符串,会先将其转换为数字,再执行加1或者减1的操作。字符串变量变为了数值变量。

如果运用于一个包含字母的字符串的时候,会被转换为NaN
如果是布尔值false,会被转换为0,然后再执行加1或者减1的操作。最终得到的数据类型number型

如果是布尔值true,会被转换为1,然后再执行加1或者减1的操作。最终得到的数据类型number型
浮点型数据,和数学计算一样。

2. 布尔运算符
1)非
非真即假,非假即真,相当于一个取反的过程。
2)与
就是两个条件都要满足。在JavaScript中,与运算符存在短路现象。第一个操作数为假的话,就不会再对第二个操作数进行判断。
与操作符不一定返回的是真或者假,而是返回第二个操作数

如果第一个操作数是null,则返回null
如果第一个操作数是NaN,则返回NaN
如果第一个操作数是undefined,则返回undefined
3)或
或运算符也存在短路现象,如果第一个操作数为真,那么就不会再对第二个操作数进行判断。
如果两个都为真,则返回第一个操作数

如果都是null,则返回null
如果都是NaN,则返回NaN
如果都是undefined,则返回undefined
3. 乘性运算符
1)乘法

2)除法

3)取模
所谓取模,就是取一个数的余数

4. 加性运算符
1)加法
着重强调:字符串数据类型和其他类型进行相加时,最终得到字符串数据类型
2)减法
JavaScript里面会进行自动的数据类型转换。

5. 关系运算符
大于,小于,大于等于,小于等于
如果是数的比较,那就不用说了

主要需要注意:字符串之间的比较,是按照ascii进行比较的。

如果是字符串和数字进行比较,如果字符串是有效数字,那么会将字符串转换为数字

如果是字母,那么会先将其转换为NaN

6. 相等运算符
1)==和!=
1. null和undefined是相等的。
2. 如果有一个操作数是NaN,那么返回false,另外NaN也不等于自己本身
3. 如果是数字的字符串和数字进行比较,会先将字符串转换为数字
4. 布尔值里面true转为1,false转为0

2)===和!==
数值和数据类型都必须相等才会为true,否则为false

7. 条件运算符
条件运算符又被称为三元运算符或者三目运算符
语法: 变量 = 表达式1 ? 表达式2 : 表达式3

8. 赋值运算符
=:和数学里面的=不一样,这里代表赋值。
*=
/=
+=
-=
%=

9. 逗号运算符
使用逗号运算符可以在一条语句中执行多个操作。

逗号运算符总会返回表达式的最后一项。

语句
① 判断语句
if语句的单分支情况
if(条件)
{
//代码
}
if语句的双分支情况
if(条件)
{
//代码
}
else{
//代码
}
if语句的多分支情况
if(条件)
{
//代码
}
else if{
//代码
}
else if{
//代码
}
else{
//代码
}
多分支的if语句存在一个跳楼现象

② 循环语句
1. for 循环
for(表达式1;表达式2;表达式3)
{
//代码
}
//如果有什么冲突请见谅。
js基本用法的更多相关文章
- Javascript模块化编程(三):require.js的用法
Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...
- JS 正则表达式用法
JS 正则表达式用法简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或 ...
- toastr.js插件用法
toastr.js插件用法 toastr.js是一个基于jQuery的非阻塞通知的JavaScript库.toastr.js可以设定四种通知模式:成功.出错.警告.提示.提示窗口的位置.动画效果等都可 ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- jQuery each和js forEach用法比较
本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- (转)Javascript模块化编程(三):Require.js的用法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
- 【笔记】关于require.js 的用法
最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化. 网上有不少很好的学习文章这 ...
- rem.js的用法及在浏览器端的适配
首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...
- Moment.js常见用法总结
Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率. 日常开发中,通常会对时间进行下面这几个操作:比如获取时 ...
随机推荐
- npm WARN deprecated fsevents windows
更新下 使用yarn貌似会帮助跳过这个问题: info fsevents@2.1.2: The platform "win32" is incompatible with this ...
- [原][GIS]ARCGIS投影坐标系转换
ARCGIS投影坐标转换步骤: 1.在ARCGIS中加入需要转换投影坐标的数据 2.打开“工具组”中的 “数据管理工具组”(Data Management Tools) 3.打开“数据管理工具组”中的 ...
- 重启WMS服务
一.重启API服务 查看进程ps ef|grep java 进入目录 cd /usr/local/tomcat-api/bin ./shutdown.sh ps –ef|grep 查看服务是否真的停止 ...
- Spring cloud微服务安全实战-4-9Zuul网关安全开发(二)
把在微服务里面写的安全的相关逻辑挪到网关里面来.这样把安全逻辑和业务逻辑解耦开.那么这些问题就都解决了. 先来看下之前的安全的代码,首先在之类做了认证,认证服务器去认证,拿这个token去换用户信息. ...
- Qt编写自定义控件67-通用无边框
一.前言 在之前的一篇文章中写过一个通用的移动控件,作用就是用来传入任意的widget控件,可以在父类容器中自由移动.本篇文章要写的是一个通用的无边框类,确切的说这不叫控件应该叫组件才对,控件是要看得 ...
- 安卓 android studio 报错 All flavors must now belong to a named flavor dimension. Learn more at https://d.android.com
这个问题是Android studio升级到3.0之后,运行的时候会提示gradle要升级到3.5版本才能编译.于是我把我的gradle升级到了 gradle-4.1-milestone-1 版本,是 ...
- PLSQL集合类型的使用总结
PLSQL集合类型的使用总结 在pl sql 中,集合(collection) 是一组有序的元素组成的对象,这些元素的类型必须一致. pl sql 将collection 分成3 类,分别为Assoc ...
- C语言中结构体的构造函数
示例代码: #include <iostream> using namespace std; struct Node { int x, y, z; Node(int _x, int _y, ...
- C#给图片加水印,可设置透明度
C#给图片加水印,可设置透明度,设置水印的位置可以看一下上一篇哈 /// <summary> /// Creating a Watermarked Photograph with GDI+ ...
- 基于vue-cli、elementUI的Vue简单入门例子
vue-cli.elementUI的安装教程请看: https://www.cnblogs.com/joe235/p/12013818.html 把HelloWorld.vue文件修改为: <t ...