JS 部分基础内容总结

JavaScript 是脚本语言

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

JS使用三种方式:
1、HTML页面内嵌JS代码(不提倡使用)
2、HTML页面中直接使用JS:
<script type="text/javascript">
JS代码
</script>
3、引用外部JS文件:
<script language="JavaScript" src="../../test.js"></script>
注意:
页面中JS代码与引用JS代码可以嵌入到HTML页面的任何位置,但位置不同会影响JS代码的执行顺序
例:如果<script> 在body前,会在加载前执行JS代码
页面中JS代码使用type="text/javascript",引用外部JS文件使用anguage="JavaScript"
引用外部JS文件的标签<script></script>,必须成对出现,且标签内部不能有任何代码

JS中的变量:
变量的命名:
由字母数字下划线和$符组成,开头不能为数字,变量名区分大小写(变量也能以 $ 和 _ 符号开头,但是不推荐这么做)

JavaScript 语句和 JavaScript 变量都对大小写敏感。

变量命名需要符合驼峰法则:即变量开头为小写,之后每个单词首字母大写(或单词之间用下划线分隔)

JS变量声明的写法:var width = 10,或width=10,或var x,y,z;
使用var声明的变量只在当前函数作用域有效,不使用var声明的变量,默认为全局变量,整个JS文件有效
同一声明语句可以同时声明多个变量,变量之间用逗号分隔,但需要分别赋值
注意事项:
1、JS中所有变量类型声明均使用var,变量的具体数据类型取决于为变量所赋的值
2、同一变量可以在多次赋值时修改变量的数据类型
3、同一变量可以多次用var声明,但没有任何含义,不产生报错,第二次之后的声明,只会被理解为赋值

JS中的变量的数据类型:
undefined 未定义,用var声明的变量,没有进行初始化赋值
null 代表特殊变量类型,值为null,表示为空
boolean 布尔型,代表真假,值为true或false
number 数值型,可以为整数,也可为小数
string 字符串,用引号包裹的内容(包括双引号和单引号)即为字符串
object 对象类型(复杂数据类型,比如函数、数组。。)

常用的数值函数:
isNaN():用于判断一个变量或常量是否为非数值(NaN)
使用isNaN时会尝试使用Number()函数进行转换,
如果能转换为数字,则不是非数值,结果为false
例:"111" 纯数字字符串,会被转换为数字111
空字符串会被转换为0,true被转为1,false被转为0
当字符串中同时存在数字和其他字符时,结果为true
Number():将其他类型转化为数值类型
字符串类型转数值:
为纯数字字符串会转为对应数字:"111"→111
为空字符串时,转为0
当包含其他非数字字符时,不能转换,提示NaN
布尔型 的true转为1,false转为0
null转为0,undefined不能转换,提示NaN
object类型 先使用valueof方法,确定函数是否有返回值,再根据上述各种情况判断
parseInt()将字符串转为数值:
空字符串不能转换,结果为NaN
纯数值字符串,可以转换,小数转换时会直接去掉小数点,也不进行四舍五入
例:"123"→123 ;"123.56"→123
包含其他字符的字符串,会截取第一个非数值字符的数值部分
例:"123a456"→123 ;"a123b456"→NaN
parseInt只能转换string类型,一切非字符串(null/undefined/boolean)均不能转换,结果为NaN
parseFloat()将字符串转为数值:
使用方式用parseInt,但转换小数字符串时,保留小数点,转换整数字符串时,直接保留整数
typeof()用来检测变量的数据类型
未定义:undefined ;字符串:string ;true/false :boolean ;
数值:number ;对象/null:object ;函数:function

常用的输入输出:
document.write() 文档中打印输出
输出语句,将write()中的内容打印在浏览器中显示(打印在屏幕上)
除常量、变量以外的任何内容,打印时须放到引号内
打印的内容同时有多部分组成时,之间用+连接
例:document.write("abc"+"qwe"+ "<br/>");

document.write() 与document.writeln() 的区别:

document.write() //将内容写入文档,当前编辑位置为写入的内容的后一个字符 
document.writeln() //将内容写入文档,并添加一个换行符,当前编辑位置为写入的内容的后一行

只有在查看页面源代码的情况下才能看出来换行的情况。

说白了就是第一个写完不换行,第二个换行(输出的时候多了一个"\n"),但实际浏览器中通常把第二种输出的换行展示为空格

但放在pre标签中是不解析空白符的,所以这时的writeln在页面显示就是换行了

alert() 弹窗输出,使用方式同上。alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

prompt() 弹窗输入
例:prompt("请输入内容","abc");
两部分参数:第一部分为输入框的提示信息,通常不省略,
第二部分为输入框的默认信息,两部分之间逗号分隔,可以定义变量接收输入内容,
例如 var name = prompt("请输入内容","abc");
点击确定按钮,name获得输入内容,点击取消,name=null

 JS运算符

算术运算
+ 加、- 减、* 乘、 / 除、 % 区域、++ 自增、-- 自减
+ :两种作用,连接字符串和加法运算,
当+两边均为数字时,进行加法运算,当+两边任意一边为字符串时,进行字符串链接,连接之后的结果仍为字符串
++ 自增运算符,将变量在原有基础上加一,-- 自减运算符,即在原有基础上减一
a++ 与 ++a 的异同:
a++:先使用a的值进行计算,然后再把a加一
++a:先把a的值加一,然后用a加一后的值进行计算
不论a++ 还是 ++a ,执行完代码以后均会把a加一

赋值运算
= 赋值 += -= *= /= %=

关系运算
== 等于、===严格等于 !=、>、<、>=、<=
===严格等于,类型不同直接返回false,类型相同再进行下一步判断
== 等于,类型相同,同=== ;类型不同,尝试将等式两边转为数字,再判断
特例:null == undefined √ null === undefined ×

条件运算符(多目运算)
a>b?true:false
有两个关键符号:?和:
当?前面的部分运算结果为true时,执行:前的代码,
当?前面的部分运算结果为false时,执行:后的代码,
多目运算符可以多层嵌套:num>5?"输入太大":(num==5 ? "蒙对了":"输入太小");

逻辑运算符
&&与、||或、!非

逗号运算符,逗号表达式:
用逗号运算符连接起来的表达式称为逗号表达式
整个逗号表达式的值是最后一个表达式的值

运算符的优先级:
() ;
! , ++ , -- ;
% , / , * ;
+ , - ;
< , > , <= , >= ;
== , != ;
&&;
||;
= , += , -= , *= , /= , %= ;

JS条件语句

if-else 结构:
if(判断条件){
条件为true时执行
}else{
条件为false时执行

else可以根据具体情况省略
if()中的表达式,运算之后的结果应该为:
1、boolean:true/false
2、string:非空字符串为真,空字符串为假
3、number:除0以外均为真
4、null/undefined/NaN 均为假
5、object:均为真

多重if结构(阶梯if结构):
if(条件1){
条件1成立
}else if(条件2){
条件1不成立且条件2成立

else if部分可以有无限多个
}else{
条件1不成立且条件也不成立
}
多重if结构中,各个判断条件是互斥的,只能选择其中一条路
if else的大括号可以省略,但不提倡,
如果省略{},则if else 结构包含的代码仅为其后最近的一行(以分号结束),
如果省略{},则else结构永远属于其前方最近的一个if结构

嵌套if结构
if(条件1){
条件1成立
if(条件2){
条件1成立并且条件2成立
}else{
条件1成立并且条件2不成立
}
}else{
条件1不成立
}
if结构可以多层嵌套,但原则上不超过三层,同时提倡使用多重if

switch-case 结构:
switch(){
case 常量表达式1:
语句1;
break;
case 常量表达式2:
语句2;
break;
default:
语句3;
break;
}
注意:1、switch()中的表达式,以及每个case后面 的表达式,可以为任何JS支持的数据类型(对象和数组不行);
2、case 后的所有复数表达式,必须各不相同,否则只会执行一个;
3、case后的常量可以是任何数据类型,同一个switch结构的不同case,可以是多种不同的数据类型
4、switch 进行判断的时候,采用的是全等判断===
5、break 的作用,执行完case语句后,跳出当前switch 结构;
缺少break的后果:从正确的case开始,依次执行所有case和default ,原因↓
6、switch 结构在判断时,只会判断一次正确答案,当遇到正确的case项后,就不会再判断后续项目,依次往下执行
7、switch结构的执行速率要快于多重if结构,在多路分支时,可以优先考虑使用switch结构。

JS循环语句

循环结构的步骤:
1、声明循环变量
2、判断循环条件
3、执行循环体操作
4、更新循环变量
然后循环执行 2、3、4步骤

JS中循环条件支持的数据类型:
1、boolean:true/false
2、string:非空字符串为真,空字符串为假
3、number:除0以外均为真
4、null/undefined/NaN 均为假
5、object:均为真

while 循环:
while(表达式){
语句;
}
特点:先判断,再执行

do whlie 循环:
do{
语句
} whlie (表达式);
特点:先执行,再判断,即使初始条件为假,也至少执行一次

for循环:
for(<定义循环变量>;<判断循环条件>;<更新循环变量>){
语句;
}
一共有三个表达式,之间用分号分隔,各个表达式都可以省略,但两个分号不可以省略
for循环特点:先判断,再执行
三个表达式均可以由多部分组成,之间以逗号分隔,但第二部分判断条件需用&&连接,最终结果需要为真/假

时间: 2024-10-01 06:57:00

JS 部分基础内容总结的相关文章

node.js基础内容

node.js node.js是建立在谷歌Chrome的JavaScript引擎(v8)的web应用程序框架. node.js 自带的运行环境可在JavaScript脚本的基础上解释和执行.这个运行是运行在浏览器以外的任何机器上执行JavaScript代码.所以也可以在服务端运行,Node.js还提供了各种丰富的JavaScript模块库,它极大简化了使用Node.js来扩展Web应用程序的研究与开发. 特性 Node.js库的异步和事件驱动的API全部都是异步就是非阻塞.它主要是指基于Node

Node.js系列基础学习----安装,实现Hello World, REPL

Node.js基础学习 1:简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好 2:安装 à安装node.js 在官网安装自己win版本的node.js的版本,下载,安装完毕后在运行中输入node -v若是出现版本号就证明安装成功. à安装n

3天学习完AngularJS基础内容小结

简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <script src=&q

7月14日:JS的基础语法

首先,是最近的课程安排: JS的基础语法→BOM→DOM→DOM样式表→JS事件→JS表单→正则表达式: 以下为今天的学习内容: 一.JS的介绍 JS是一种弱类型的解释语言,它用var来定义变量.JS要在网页环境中运行,而Java可以在任何平台使用 二.JS的原始数据类型 undefined:未定义类型和值,无返回值 null:表示不存在的对象 boolean:只有2个值true和false number:数字型,可表示32位的整数和64位的浮点数 string:字符串类型 三.类型的转换 Bo

小白总结的一些关于JS的基础概念

我的第一篇博客 ——JS的那些基础概念 接触前端已经整整一学年了,这是我第一次写博客,感觉心里装了无数只兔子,很紧张,很激动,也很兴奋. 第一次写,也不知道有没有什么套路,需不需要注意文采之类的.不管了,太激动了,我就直接写只要内容吧!下面是我总结的一些关于JS的基础概念: [变量]从字面上面,变量是可变的量:从编程角度讲,变量是用于存储某些/某种数值的存储器.我们可以把变量看作一个盒子用来存储物 品. [数组]变量用来存储数据,一个变量只能存储一个内容.如果你想存储多个内容,那么就可以用数组解

JS零基础一步一步做应用全记录

1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握的很好.但好像我们吃得多的是美团,回来之后,百度“谁去拿外卖网页版”,没有结果.想着反正这东西看上去不会太难,那就自己做一个吧.在学校各种事情没时间,放假回家后时间便相当充足.于是,作为一个HTML半入门+JS零基础的孩子,就这样开始了,现在是2015.2.10 10:17. 2.功能设计 对其要求

第八节 JS运动基础

运动基础 让Div运动起来 速度--物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS运

JS面试基础

问题: 1.JS中typeof能够得到哪些类型? 考点:JS 的变量类型 2.何时用 双等于 == ?何时用 三等 ===? 考点:强制类型转换 3.window.onload 与 DOMContentLoaded的区别. 4.用JS创建10个<a>标签 ,点击的时候弹出来对应的序号 . 考点:作用域 5.简述如何实现一个模块加载器,实现类似require.js的基础功能. 考点:JS的模块化 6.实现数组的随机排序 考点:JS的基础算法. 1.变量分为值类型和引用类型. var a = 10

atitit.js的&#160;字符串内容&#160;转义&#160;&#160;js处理html

atitit.js的 字符串内容 转义  js处理html 1. js处理html的问题 1 2. js的 字符串内容 转义 1 2.1. 处理流程 1 3. 下面的表格列出了其余的特殊字符,这些特殊字符都可以使用反斜杠来添加到文本字符串中: 2 4. --code 2 1. js处理html的问题 反斜杠问题 引号问题.回车换行造成的语句中断问题.. 2. js的 字符串内容 转义 一个回车 还有一个换行转义 一个引号转义.. 反斜杠转义 2.1. 处理流程 先替换反斜杠.在引号,在回车,在换