js代码学习--黑马js
1.输入语句
prompt（‘请输入’）
2.变量
//(1)
var myname = prompt（‘请输入您的姓名’）
alert(mynae)
//（2）声明多个变量时
var age = 18,
address = 123
email = 13
//(3)不声明
sex = 1;
console.log(sex)//输出1
命名规范：由字母，下划线，数字，$组成
3.数据类型：
(1)var num = 10;
js中变量的数据类型是根据右边的值来判断的，比如：num是整型
(2)number数字型：整型，浮点型
Boolean布尔值:true，false即1，0
(3)进制：八进制前面加0
十六进制前面加0x
(4)最值：console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
Infinity:无穷大 -Infinity:无穷小
NaN：not a number
4.isNaN:判断是否非数字
5.字符串转义符：
\n:换行符 \\:斜杠\ \':单引号 \":双引号 \t:tab缩进 \b:空格，blank
6.布尔型Boolean：两个类型：true/false
当布尔型与数字型相加时，当数字来计算
console.log(true+1)//为2
(2)：var str;//undefined
var str1 = underfined； 若为null，则分别为nullpin，1
console.log(str1 + ’pin‘)//undefinedpin
console.log(str1 + 1);NaN
7.typeof判断数据类型
var x =
console.log(typeof x)
8.数据类型转换：
(1)转换为字符串型
//toString() :
var num = 1;console.log(num.toString())
//String():强制转换
var num = 1;console.log(String(num))
//与字符串相加
var num = 1;console.log(num + '')
(2)转换为数字型
//parseInt(string):转换为整型，取整数部分
//parseFloat(string):转换为浮点型
//Number():强制转换
//js隐式转换(- * /)：console.log('123'-'120')//3
注：只能是以数字开头的：120px，12abc
rem120px则变为NaN
(3)转换为布尔型：Boolean()
var a =
console.log(Boolean(a))
9.标识符，关键字，保留字
标识符：变量/函数的名字
保留字：预留的关键字，未来某天会成为关键字
10.递增递减
var e =10;
console.log(e++ + ++e)//e++返回值10，加后为11；++e：返回值12
结果22
11.&&，||，！(true/false，未返回的不执行)
&&：表达式1 && 表达式2，若 表达式1 成立，则返回 表达式2；
若表达式1不成立，则返回表达式1
||:表达式1 || 表达式2，若表达式1为真则返回表达式1；
若表达式1为假，则返回表达式2
12.运算符优先级：
小括号；一元运算符(++ -- !);算术运算符(+ - * / %);关系运算符(> < >= <=);相等运算符( ！= ==);逻辑运算符(先&&后 ||);赋值运算符(=)；逗号运算符(,)
13.switch
switch(表达式){
case value1:执行语句1;
break;
case value2:执行语句1;
break;
default:执行最后的语句;
}
14.如何让循环输出的相同的东西
(1)在同一行：
追加字符串：
var str = '';
for(i = 1;i<= 5;i++){
str = str +'☆'
}
console.log(str)
(2)不在同一行:
str = str +'\n'
15.循环关键词
continue：跳出当前循环，进入下一循环
break：终止循环
16.数组：
(1)定义数组
var 数组名 = new Array();
var 数组名 = ['1','2','3']
(2):遍历数组
用for循环
(3)：var arr = [2,0,6,1,77,0,52,0,25,7]
var arr1 = []
for(var i = arr.length-1;i >= 0 ; i--){
//arr1.length初始为0，第一步：arr1[0] = arr[1],此时arr1有了第一个元素，则长度变为1
arr1[arr1.length] = arr[i]
}console.log(arr1);
17.函数：
return的作用：(1)：终止函数
(2):只可返回一个值，可返回数组
返回的结果：undefined
18.arguments:存储所有传入的实参,可以遍历。只有函数才有
伪数组：不是真正意义上的的数组
1.具有数组的length属性
2.按照索引的方式存储数据，即：arr[i]
3.没有数组的方法：pop() push()
19.函数的两种声明方式：
function fn(){
}
var fn = function(){}
20作用链：
//输出0.就近原则
function f1(){
var num = 123;
function f2(){
var num = 0;
console.log(num)
}
f2();
}
var nun = 456
fi()
21.预解析(黑马前端js视频p142)
1.js引擎运行教js 先 预解析 后 代码执行
(1）预解析时，js引擎会把js里所有的var 和 function提到最前面。
（2）代码执行 按照代码书写的顺序从上往下执行
2.（1）变量/函数提升，就是把变量声明提升到 当前作用域
并且，不进行赋值，不调用函数(var fu = function({}))
function fun (){}可以正常运行
var x = 1;
console.log(x)
console.log(y)
var y = 2;
//相当于
var x
x = 1
var y
console.log(x)
console.log(y)
y = 2;
var a = b = c = 9;//即声明a,并赋值b，c，9给a。即bc直接赋值，当全局变量看
相当于： var a；
a = b = c = 9；
22.对象(object):是一组无序的相关属性和方法（作用）的集合。
var obj = {
uname:'123',
sex:'man',
sayHi:function(){
console.log('hi~')
}
}
//调用方式
console.log(obj.name)
obj.sayHi()
console.log(obj['age'])
var obj = new Object()
obj.uname = '123',
obj.sayHi = function(){
console.log('hi~')
}
23.利用构造函数创建对象
//构造函数名首字母要大写
//构造函数不需要return返回结果
function Star(uname,age,sex){
this.uname = uname;
this.age = age;
this.sex = sex;
}
var ldh = new Star('刘德华','18','男')
24for in(遍历对象中的值)
for(var k in houyi){
console.log(k);
console.log(houyi[k])
}
25.常用的Math对象
Math.PI
Math.floor()//向下取整
Math.ceil()//向上取整
Math.round()//四舍五入就近取整，-3.5 结果为-3
Math.abs()//绝对值，'-1'结果为1，字符串内是数字时转换为数字
Math.max()//求最大值
//随机数
Math.random()//返回[0,1)内任意数
//取某两个数之间的随机整数，并且包含这两个整数。设定范围
function getRandom(min,max){
return Math.floor(Math.random()*(max - min + 1)) + min
}
26.构造函数的类型
var arr = new Array();
var date = new Date();
var obj = new Object();
27.Date()
var now = new Date();
console.log(now.getFullYear());//获取当前时间的年份
console.lgo(now.getMounth());//获取当前时间的月份-1 (0-11)
console.log(now.getDate());//获取当前时间是几号
console.log(now.getDay());//获取当前时间是星期几(0-6,周天-周六)
//获取Date总的毫秒数，即从现在到1970年1月1日
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
//简写
var date1 = +new Date()
console.log(date1)
//H5新增
console.log(Date.now())
27.倒计时
//d = parseInt(总秒数/60/60/24)
//h = parseInt(总秒数/60/60%24)
//m = parseInt(总秒数/60%60)
//s = parseInt(总秒数%60)
function countDown(time){
var nowTime = +new Date();
var inputTime = +new Date(time);
var times = (inputTime - nowTime)/1000;
}
//将1变为01
d = d < 10 ? d + '0':d;
28.数组
//检测是否为数组(instanceof)
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array)
//方法二：H5新增
Array.isArray(arr)//true
Array.isArray(obj)//false
29.修改数组
push()//末尾增加，返回数组长度
pop()//删除末尾
unshift()//首位增加
shift()//首位删除
//反转数组
reverse()
//冒泡排序
sort()//[3,4,7,1] 变为[1,3,4,7]
sort(function(a,b){
return a-b//升序
return b-a//降序
})
//索引方法，为找到则返回-1
var arr = ['1','2','3','1']
//indexOf()返回索引号,默认从0开始，想从3开始查可以IndexOf('2',3)
console.log(arr.indexOf('1'))//返回0,即从前往后，返回第一个查找对象的索引号
//lastIndexOf(),从后往前返回
//for example
function fn(arr){
var newArr = [];
for(var i = 0;i < arr.length;i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i])
}
}
console.log(newArr);
}
fn(['c','a','z','a','x','a','x','c','b'])
//转换为数组
join('')
var arr=['1','2','3']
console.log(arr.join())/变为123
//字符串
charAt(index)//返回指定为的字符
charCodeAt(index)//返回指定为的字符的ASCI码值
str[index]//返回指定位置字符
var str = 'abcdabcdabcdaaa';
var o = {};//设置一个对象，用来存储字符
for(var i = 0; i <str.length;i++){
var index = str.charAt(i)
if(o[index]){
o[index] ++;
}else{
o[index] = 1;//初始没有，因此指定字符+1
}
}
console.log(o);
30.字符串操作方法★
concat(str1,str2,str3...)//连接数个字符串,等效于+
substr(star,length)//从star开始，取lentgh个
slice(start,end)//从start开始到end结束，不取end。两者皆为索引号
substring(start,edn)//从start开始到end结束，不取end。
repalce('被替换字符'，'替换为的字符')//只替换第一个
split('')//字符串转换为数组
- DOM方法
document.getElementById()
//打印我们返回的元素对象
console.dir()
document.getElementByTagName()//返回伪数组形式
//H5新增
document.getElementsByClassName('类名');
document.querySelector('选择器');//根据指定选择器返回第一个
<button class='st'>123</button>//上方括号内应写.st
document.querySelectorAll('选择器');//根据指定选择器返回
//获取body/html的方法
document.body
document.documentElement
32.操作元素
element.innerText = //修改element的文本内容为= 右侧内容
element.innerHTML//与上方的区别是下方可以识别html标签
//具体方法
var btn = document.querySelector('botton')//获取元素
btn.onclick = function (){//触发一个函数
alert('你好')
}
//表单元素属性操作
type,value,checked,selected,disbaled
this.disabled = true//禁用功能
//操作样式属性
//样式采取驼峰式命名法，fontSize,backgroundColor
element.style
element.className
