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++;
}

}
}


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

原文地址:https://www.cnblogs.com/yingyigongzi/p/9232266.html