1.书写位置

内嵌到网页中，写在script标签内部

写在外部文件中，通过script src 引入script

2.输出方式

alert()    弹窗

document.write(“这里写输出的内容”)  写在网页中

console.log（“这里写输出的内容”） 写在浏览器窗口的console中

3.输入方式

prompt（“这里写输入的内容”）

输入 prompt 接收到用户输入的内容会放到num中

var num=prompt（“请输入内容：”）

将num输出出来

alert num

js注释

//单行注释

/*这里是多行注释

这里是多行注释*/

js可选的分号，建议加上

js用分号来表示一个语句的结束。可写可不写，但是通常在团队规范中进行说明。

如：alert();

关键字

关键字就是javascript中自身需要使用的一些单词，这些单词具有特殊的意义以及用法，因此，在程序定义某个名称表示某种东西的时候就不能使用这些关键字了。常见的关键字如：defaul、while、this、for、in、break、do、new、switch、var、function、case、null、underfined等

大小写

javascript区分大小写

变量

字面意义可变化的数据。类似于一个临时存储数据的容器。

变量使用

var 可以定义一个变量。但是定义的对象不能是var 因为var是关键字

例如：var num=0

但是不能使用 var var=0

查找元素的方法

js可以操作html元素，改变html的样式，首先就要找到它

案例：

注意查看语句解释

事件

html+css+js：结构 表现 行为

用户和浏览器交互时候的行为

函数

函数指具有一定功能的代码块

1.用function关键字来定义函数 固定格式 function 函数名（）{这里是代码块}

2.函数定义好以后如何使用？使用函数名   函数调用

函数封装的好处：可以复用代码

事件函数绑定：

onclick：用户点击html元素

解析：当onclick obox里面的内容时 就会调用fn2函数

注意：obox.onclick=fn2和obox.onclick=fn2()的区别

obox.onclick=fn2 表示用户发生事件后才会调用函数

obox.onclick=fn2() 表示不管事件有没有发生都会调用函数

获取html元素里的值   innerHTML

要产生交互  1 先找到对象 2 要知道发生了什么事 3 如何实现

（容器名）.innerHTML取出内部值

设置html的内容 ：

 obox.innerHTML='螺钉课堂'

转化（设置）内容的函数表现形式

获取和设置input的值 用value

转化（设置）input的函数表现形式

匿名函数：对象.事件=function（）{

这里做具体业务逻辑}

如：(容器名).onclick=function(){}

innerHTML与innerText的区别：

innerHTML:解析盒子内部带标签的值

innerText：解析盒子内部纯文本

例如：

obox.innerHTML='<span>螺钉课堂</span>'

obox.innerText='<span>螺钉课堂</span>'

改变HTML的元素样式

使用盒子名.style.元素样式名

例如：

font-size中的-取消S变成大写（bgc同理）

练习1：

也可以写成：oresult.innerHTML=oipt1.value-oipt2.value

练习2：

点击+号时 p1的字体变大3px 点击-号时 p1的字体变小3px

数据类型：根据具体的运算规则得出相应的结果

查看数据类型：typeof 变量名

string 字符串类型  非常常用 凡是用" "双引号的都是字符串

number 数字类型

通过prompt获取到的内容都是字符串类型

如果是 - 号 那么会将字符串转化成数字类型进行数学运算

如果是 + 号 两边只要有一个字符串，那么+号就会变成字符串连接符

如果想转换成数字类型，则在前面加上number（）

例如：num=Number(oipt1.value)+Number(oipt2.value)

或者：num1=Number(oipt1.value)

num2=Number(oipt2.value)

num=num1+num2

注意：+ 在js中有两层意思：1 字符串连接符 2 算数中的+号

运算符

运算符：代表的是运算规则的符号

算数运算符：+  -  *   /   %（取余）

比较运算符： >    <   >=   <=   ==   ===  

注意：== 与===都是判断两个数是否相等

==是比较数值 

===是比较类型和数值

流程控制-三大结构

顺序结构：按照书写顺序从上到下执行

选择结构：如果遇到条件，由条件来控制语句执行

循环结构：程序语句需要被重复多次执行

if 条件语句：

if（这里写条件语句）{

如果满足条件(true)执行这里的代码

}else{

如果不满足条件(false)就执行这里的代码}

简易计算器

代码上半部分

代码下半部分（注意代码内容与符号）

简易计算器界面

变量的命名规范

1、不能以数字开头

2、字母、下划线、数字组成，其他符号不允许使用

3、不能使用关键字 ：var else for 等

4、见词达意

5、用驼峰命名或者下划线命名 用户名 user_name ,userName 

6、不要用中文

数据类型

Number -----> 数据类型

String  ------>字符串类型

Boolean  ------> 布尔类型

Null  ------> 空

underfined  ------> 为定义

object  ------> 对象

1、在数字类型中，没用区分浮点数类型跟整数类型

2、浮点数不准确。

字符串类型

注意：单引号与双引号同时使用时 需要嵌套使用

变量和字符串一起使用时，可以用+号连接

单引号双引号嵌套使用

字符串的长度：使用变量名.length   如alert（url.length）

空格也是字符串    

空字符串 var a=''

布尔类型

表示真或假、开或关、是或否，只有两个值：true或false

布尔类型的应用 设置开关

转换数字类型 

Number  只能转换纯数字字符串   

parseInt  将字符串转换成整数形式，字符串内有字母则读取到字母部分后面就不读取了  parseInt（12a34）----->12

parseFloat  将字符串转换成小数形式，字符串内有字母则读取到字母部分后面就不读取了  但是不精确

parseFloat（12.3a12）-----> 12.3            parseFloat（12a12）----->12

转换成字符串：String

转换成布尔类型：Boolean

注意：转换成false的情况：0，-0，空字符串""，null，underfined，NaN （必须记住）

自动类型转换：

var a=1  

if（a）{ //这里代表的意思是如果a是true的意思 自动转换为Boolean 

console.log(typeof a)}

var a=1

var b='2'

alert(a+b)  //如果a跟b有一个为字符串 那么+号就变成了字符串连接符

var a=prompt（‘数字’）//prompt里的内容都是字符串

if（a>=60）{//这里的a强制变成数字与60做对比

console.log("不及格")}

三目运算符

var a=prompt('数字')

a=>60?alert('及格'):alert('不及格')

// a是否大于等于60呢？如果是那么输出jige,

// 如果不是那么输出bujige 注意:没有if

京东增加商品数量的代码：

代码1

代码2

点击切换图片功能代码

点击切换图片

逻辑运算符

与 &&  并且的意思 必须同时满足 结果才会为true   有假为假

或  ||    或者的意思  两边只需要满足一个就行 结果就为true   有真为真

非  ！   取反的意思 原来是true 变成false  原来是false 变成true  有真为假

&& 与  ||的存在短路问题

赋值运算符

a +=10  -----> a=a+10

a *=10   -----> a=a*10

字符串连接符号 

+  当两边有一个为字符串的时候 这个+就是字符串连接符

可以把变量和字符串链接起来   “<div>”+num+"</div>"

运算符的优先级

赋值运算符最低  

（）优先级最高

流程控制

三大结构：

顺序结构

选择结构（分支）

循环结构（）

1 选择结构

a.   if语句- - 语法结构

      if（条件）{

code。。}

如果满足条件 就执行代码

b.   if...else... --语法结构

if（条件）{

code。。}

else {

code。。}

如果满足条件  就执行代码 否则就。。。

模拟QQ登陆的代码：

注意：isNaN 与 return的用法

if。。。else if。。。else if。。。else语句

如果满足条件1则执行code1，不满足则执行条件2，再不满足则执行条件3.。。。都不满足则执行else 后的code

if (条件1){

code1}else if(条件2){

code2}else if(条件3){

code3}else{

code}

switch 语句

switch语句的规范

用switch来完成分数线的代码与思路

总结：if和switch都能完成分支结构，如果有范围的话 则用if， 有具体的值的话 则使用switch更简单

循环结构

单曲循环 ---->  让某段代码重复执行

for循环语句格式

    for（初始化表达式；条件表达式；条件改变格式）{

需要被循环的代码}

如for（var i=0;i<100;i++）{

document.write("hello world  <br>")}

for循环的执行流程

求1-100的和 与1-100奇数的和

用for循环实现全选与勾选的代码 

while 循环语句格式

whlie（条件）{

这里写需要循环的code}

while循环的应用场景

for 和 while 的使用场景：

当知道循环次数的时候 可以用for 或者 while   推荐for循环

当不知道循环次数 但是知道什么时候结束 那么推荐使用while循环

do...while循环语句

do{

循环语句}while（条件）

总结：while循环与do...while循环的区别：

while循环时先判断后执行，执行循环次数>=0

do...while 循环先执行循环体，再判断 执行循环次数>=1

break 与 continue

break是退出循环  continue是退出本次循环后续继续执行

循环嵌套结构

九九乘法表。需要看懂里面的原理