html04

web的三要素：
HTML：搭建页面的基本结构
css： 对页面进行修饰-让页面更美观
JavaScript：让页面可以有交互行为（用户和界面）
1.js是什么：
JavaScript ：页面的脚本语言，运行在页面上
不是Java的脚本语言
是一门客户端的脚本语言，不进行编译，直接解释运行
1）符合ECMAscript规范 es6
2）DOM (Document Object Model 文档对象模型)
3）BOM (Borwser Object Model )

2.js的特点
-解释执行 逐行执行
-基于对象 js内部提供了大量的内置对象，通用对象和常用方法
-适合做：
-客户端的数据计算
-客户端的表单验证（比如邮箱是否合法）
-浏览器的事件触发（和浏览器相关的操作只能由js去做）
-网页的特殊效果（只能js去做）
-服务器的异步交互（同步，所有操作都关联，异步，步不关联，步影响）

3.基本使用
1）行内式
如：直接在页面节点添加onclick="alert('11111')";
2）嵌入式（内部式）
如：1.页面节点添加onclick="f1()"
2.使用script标签
在标签里定义function f1(){}
3）外部式（文件调用式）
如：1.页面节点添加onclick="f1()"
2.使用script标签，引入js文件
3.在js文件中定义f1函数

4.js基本语法
* 由字符集Unicode字符集进行编码
* js的注释 //单行 /*多行*/
* 语句 表达式 运算符 （大小写敏感）
* 标识符 数字，字母，下划线，$,数字不能开头
基本组成部分（同Java）
见名知意，不能使用关键字，数字不能开头
驼峰命名法，从第二个单词字母开头大写
* 变量
-js是若类型语言 声明变量时使用关键字 var
-变量所引用的数据，都是有类型的
-没有初始化的变量，统一赋值为undefined
***js会根据不同的值，自动转换成对应的数据类型
数据类型有哪些
1.特殊类型
null - null在程序中代表无值，或者无对象，空
给变量赋值为null，来清空变量的内容
undefined -表示未定义
-声明1个变量，但是未初始化，变量的值为undefined
-对象的属性不存在
2.内置对象（只讲其中几个基本类型）
1）string 单双引号都可以 "" 或 ''
特殊字符需要转义
常用方法：indexOf() -返回指定字符在字符串中首次出现的下标
replace(a，b);
将指定字符a,替换为字符b，替换第一个
2）number 数值类型
js中不区分整数，浮点数
3）boolean
布尔类型 （boolean类型能自动转成number类型参与计算 ,true=1,false=0）
3.类型转换
1）自动转换
number + string = string
number + boolean=number
string + boolean=string
boolean+boolean=number
2）强制转换（函数来实现）
toString() 所有的数据类型都可以转成string
parseInt() 强转成整数
-如果不能强转，出来的是NaN
-如果是小数，会转成取整，小数点后的全部丢弃
parseFloat() 不能转NaN
isNaN() 表示是否是数值
-true：表示非数值
-false：表示数值
-------------------------------------------------------
栗子：
var age=34;
console.log(age);
结果为： 34

var name="zhangsan";
console.log(name);
结果为： zhangsan

var sex;
console.log(sex);
结果为： undefined

console.log(typeof age);
结果为： number

console.log(typeof name);
结果为： string

console.log(typeof sex);
结果为： undefined
-----------------------------------------------------

练习：验证用户输入的内容是否是数值
如果是 进行求平方运算
如果不是 提示输出数值

var ele=document.getElementById("txt_number");
console.log(ele);//以日志的形式打印具体对象的所有内容
alert(ele); //以alert的形式打印具体对象的所属类型
//获取输入框节点的值
var v=ele.value;
console.log(v);
---------------------------------------------------------------
*运算
算术： + - * / （只有除法和Java不同）
/：Java中 7/3=3
js中 7/2=3.5
逻辑运算： !(非) &(与) |(或) && || >= <= !=

js中 == 只比较值，不比较类型 （比如 1=="1" 结果true）
=== 全等于，比较值，同时也比较类型 （比如 1===1，"1"==="1" 结果true 1===true 结果false）
++ --
a++ 先将a的值进行运算，再赋值
++a 先将a赋值，在进行运算

条件？成立的操作：不成立的操作; (三目运算符)

练习：猜数字 ，内置1个数值（比如20）
比较用户输入的数字和内置数值是否相等，提示大了，小了，对了

<input id="txt_gress" onblur="allert(111)"> onblur:失去焦点
<input id="txt_gress" onblur="gress2(this.value)"> this :当前对象的使用

*流程控制语句
if...else...
if(表达式){
执行语句;
}else if(表达式){
执行语句;
}...else{

}
注意：Java中条件表达式必须返回boolean
js中可以是任何表达式
表达式的值 对应的boolean
true true
false false
"非空" true
"" flase
0 false
null false
undefined false
NaN false
****只有true和非空字符串是true****
这句话任何流程控制语句中都适用，包括for循环
-switch...case
switch(变量){
case 值：执行语句;break;
case 值：执行语句;break;
case 值：执行语句;break;
...
default ：执行语句;break;
}
-for
for(var i=0;i<10;i++){
执行语句;
}
-while(表达式){
执行语句;
}
-do{执行语句;}while(表达式);
do...while()至少执行1次
while执行0-n次

练习：求1-10的阶乘
调错：1）检查浏览器缓存到底js代码
2）看报错信息
3）用断点debugger调试
4）在js代码中加alert或者console.log；

2）百元买百鸡
母鸡 5块 1只
公鸡 3块 1只
小鸡 1块 3只
问：100元买100只整鸡，一共有几种情况
思路：母鸡：0-20只；
公鸡：0-33只；
var count=0;
for(var i=0;i<=20;i++){//买母鸡
for(var j=0;j<=33;j++){//买公鸡
var z=100-i-j;//买小鸡
//小鸡的只数是3的整数倍&&总价格==100
if(z%3==0&&(5*i+j*3+z/3)==100){
count++;
}

}
}


查看用户输入内容（字符串）中出现的指定字符的个数