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循环特点：先判断，再执行
三个表达式均可以由多部分组成，之间以逗号分隔，但第二部分判断条件需用&&连接，最终结果需要为真/假

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

  1. 1、js基础内容

    js基础内容 1. 编辑器 编译环境 浏览器 编辑软件 sublime DW H5Build Atom ==[注]尽可能多的去使用编辑器去编辑代码.== Html+css ==JS 逻辑== 比作建设 ...

  2. node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

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

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  4. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  5. JavaScript--我发现，原来你是这样的JS（基础概念--灵魂篇，一起来学js吧）

    介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容,当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂 ...

  6. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  7. （数据科学学习手札41）folium基础内容介绍

    一.简介 folium是js上著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaflet的相关功能,基于内建的osm ...

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

    1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握 ...

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

    简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <htm ...

随机推荐

  1. JavaWeb从0开始学（二）-----JSP基本语法与编译指令

    在上一节中我们学习了如何搭建一个简单的Web应用,并且已经知晓了一个JSP页面主要由静态的HTML内容和动态的Java脚本共同组成.JSP的基本语法共有JSP注释.JSP声明.输出JSP表达式与JSP ...

  2. TypeScript设计模式之解释器

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  3. 本地存储和cookies之间的区别

  4. SpringMVC4+MyBatis+SQL Server2014+druid 监控SQL运行情况

    前言 在基于SpringMVC+MyBatis的开发过程中,我们希望能看到自己手写SQL的执行情况,在开发阶段我们可以配置log4j在控制台里基于debug模式查看,那么上线后,在生产声我们想查看SQ ...

  5. 老司机实战Windows Server Docker：4 单节点Windows Docker服务器简单运维（下）

    上篇中,我们主要介绍了使用docker-compose对Windows Docker单服务器进行远程管理,编译和部署镜像,并且设置容器的自动启动.但是,还有一些重要的问题没有解决,这些问题不解决,就完 ...

  6. The 15th UESTC Programming Contest Preliminary G - GC?(X,Y) cdoj1564

    地址:http://acm.uestc.edu.cn/#/problem/show/1564 题目: G - GC?(X,Y) Time Limit: 3000/1000MS (Java/Others ...

  7. oracle server config

    安装oracle数据库软件 database/runInstaller; ##执行该程序开始安装 创建数据库 在oracle用户的图形界面oracle用户中 新开启一个终端,直接输入命令dbca会弹出 ...

  8. [UWP]涨姿势UWP源码——适配电脑和手机

    上一篇我们介绍了绘制主界面的MainPage.xaml,本篇则会结合MainPage.xaml.cs来讲一讲如何适配电脑和手机这些不同尺寸的设备. 同时适配电脑和手机存在几个麻烦的地方: 屏幕尺寸差距 ...

  9. 实践 config drive - 每天5分钟玩转 OpenStack（170）

    如果 instance 无法通过 metadata service 获取 metadata(无 DHCP 或者 nova-api-metadata 服务),instance 还可以通过 config ...

  10. java中的基本jdbc中mvc基本示例

    数据库: 包文件: Student.java 1 package com.model; 2 3 public class Student { 4 private int id; 5 private S ...