day01
2018-06-27 本文已影响0人
特洛伊芋头
A.今天学到了什么
1.输出方式
<script>
// console.log("hello world");
alert("hello")
</script>
2.变量申明
<script>
// javascript 是一种弱类型语言，声明变量的时候，不用声明他的类型
// var a=10;
// var str="hello world";
// 可以先声明在赋值
</script>
<script>
// 如果没有给变量赋值 会输出 undefined
var a;
console.log(a);
</script>
3.申明提前
<script>
// js在运行的时候将所有声明的变量，集中到作用域的顶部集中创建，赋值留在原地；
console.log(a);
// var a=10;
let a=10;
</script>
4.数据类型
4.1基本数据类型
<script>
// 1.number型
var a=10;
// 如何判断一个变量的类型 typeof
console.log(typeof a);
// 2.String 型
var str="hello world";
console.log(typeof str);
// 3 boolean型
var c=true;
console.log(typeof c);
// 4.undefined型
var d;
console.log(typeof d);
</script>
4.2引用类型
<script>
//数组
var a=[1,2,3];
// 读取数组的值
console.log(a[0]);
// 获取数组的长度
console.log(a.length);
// 向数组的尾部添加一个值
a[a.length]=4;
console.log(a);
</script
5.对象
<script>
// 1.声明对象
var obj={
name:"xuao",
age:22
}
// 2.读取对象属性
console.log(obj.name);
// 3.给变量添加属性
obj.sex="男";
console.log(obj);
</script>
5.函数
<script>
// function+函数名
// 1.没有返回值
function say(){
console.log("没有返回值的函数");
}
// 调用
say();
// 2.有返回值
function eat(){
return "eat"
}
var a=eat();
console.log(a);
</script>
6.变量
<script>
// 在函数外部声明的变量叫全局变量
var a=10;
function fn(){
// 在函数内部声明的变量叫局部变量
var b= 20;
}
console.log(b);
</script>
7.数据类型的转换
7.1基本转换
<script>
// 1.string ,boolean--> number 语法 Number(str)
// NaN 不是一个数字
// 只能识别纯数字的字符串
var str="10";
var b="true";
var c="10px";
console.log(Number(str));
// false =0 true =1;
console.log(Number(false));
console.log(Number(c));
</script>
7.2自动转换
<script>
// 1.算术计算中的自动转换+,-,*,/,%
// 在算术计算中，会将参与计算的值先转换为number再计算
var a="10";
var b=true;
var c=a-b;
var c=Number(a)-Number(b);
console.log(c);
// 特殊：在+运算中，倘若有一边为字符串 +就变成字符串拼接
</script>
7.3比较运算的自动转换
<script>
// 比较运算
// 比较运算的自动转换：默认先将所有的类型转为number再进行比较
// 比较运算的结果返回boolean
var a=20;
var b=true;
console.log(a>b);
</script
7.4字符串类型转换成number
<script>
//
var a="12px";
var b="12.33px";
// 转换为整数
console.log(parseInt(a));
// 转换为小数
console.log(parseFloat(b));
// 必须要以数字开头
var c="p1222";
console.log(parseInt(c));
</script>
7.5任意类型转化为字符串类型
<script>
// 两种方法
var a=10;
console.log(a.toString());
console.log(String(a));
</script>
7.6任意类型转换为boolean类型
<script>
// 语法 boolean();
// 特点 ：在JS中占有五中值为false "" 0 NaN undefined null
var a=[1,2,3];
var obj={
name:"xxx"
}
var b=null;
console.log(Boolean(obj));
console.log(Boolean(b));
</script>
8.自增运算符
<script>
var a=10;
// a++;
// ++在后 先运算再自增
// ++在前 先自增再运算
b=a++ +1;
console.log(a);
console.log(b);
</script>
9.遍历
<script>
// 遍历
var arr=[1,2,3,4];
for(var key in arr){
console.log(arr[key]);
}
var obj={
name:"ahfdshk",
age:29
}
for( var k in obj){
console.log(k)
console.log(obj[k])
}
</script>
10.块级作用域
<script>
// es5之前没有块级作用域
for(var i=0;i<5;i++){
console.log("hello world")
}
console.log(i);
// eS6之后就有块级作用域
for(let k=0;i<5;i++){
console.log("hello world")
}
console.log(k);
</script>
11.break和continue的区别
<script>
for(let i=0;i<5;i++){
if(i==3){
break;
}
console.log(i)
}
</script>
12.如何获取一个节点
<p id="test" class="one">hello wrold</p>
<script>
// 1.如何获取一个节点,di获取
var test =document.getElementById("test");
// 2.修改元素的内容 obj.innerHTML
test.innerHTML="change";
console.log(test)
</script
12.1 一个事件
<p id="p">hello world</p>
<button id="btn">changge</button>
<script>
var p=document.getElementById("p");
var btn=document.getElementById("btn");
btn.onclick=function(){
p.innerHTML="改变了"
}
</script
12.2通过标签获取
<p>hello world</p>
<p>hello world</p>
<button id="btn">btn</button>
<script>
// 通过标签名获取,获取的是一个集合
var p=document.getElementsByTagName("p");
console.log(p);
// p[0].innerHTML="change";
var btn = document.getElementById("btn");
btn.onclick=function(){
for(let i=0;i<p.length;i++){
p[i].innerHTML = "change";
}
}
</script>
12.3 通过class名获取
<!-- p.one{hello world}*4 +tab -->
<p class="one">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<p class="one">hello world</p>
<script>
var ps = document.getElementsByClassName("one");
console.log(ps);
</script>
12.4 通过选择器获取
<div class="one">hello world</div>
<div class="one">hello world</div>
<div class="one">hello world</div>
<script>
var one=document.querySelectorAll(".one");
console.log(one);
</script>
