输出
//弹框输出
alert('hello world');
//调试输出
console.log('hello world')
基本数据类型的运算
//遵循的规律：运算从左往右；任何类型的变量与string类型变量拼接就会被强转为string
//4.1字符串的拼接
var newName=name + '-' +name2;
console.log(newName);
//4.2 题目
var str1=10+10+'10';//2010
var str2='10'+10+10;//101010
var str3=(10+'10')+10;//101010
数组
var numbers = [-10,'san',name,result,number,['哈哈','呵呵']];
//遍历数组
for (var i=0; i<numbers.length;i++){
console.log(numbers[i]);
}
//5.2 JS中常用的属性
//删除数组中最后一个内容
numbers.pop();
//增加数组中最后一个内容
numbers.push('小码哥')；
for (var i in numbers){
console.log(i,numbers[i]);
}
JS常用的类库 Math
var numsArr=[10,212,3223,32];
var maxNum= Math.max(210,21,2);
var NewMaxNum=Math.max.apply(this,numsArr);
JS中常见函数
//1.1 加法运算(两个数)
function sum(num1,num2) {
return num1+num2;
}
//如何调用
var result= sum(12,323);
console.log(result);
//1.2 万能的加法函数
function sum2(numbers) {
//变量
var result = 0;
for (var i in numbers){
result +=numbers[i];
}
//返回
return result;
}
var result1= sum2([1,2,3,4]);
console.log(result1);
//1.3 匿名函数
var res= function () {
console.log('我是匿名函数')
}
//调用匿名函数
res();
创建对象
//this this所有的函数属于哪个对象，this就代表这个对象
var dog={
name:'阿花',
age:18,
height:1.55,
dogFriends:['lili','wangcai'],
eat:function (something) {
console.log(this.name+'吃'+something);
},
run:function (somewhere) {
console.log(this.name+'跑'+somewhere);
}
};
//2.输出狗对象的属性和行为
console.log(dog.name,dog.age);
dog.eat('狗屎');
dog.run('花园’);
批量产生对象
//创建构造函数 -->抽象
var Dog = function () {
this.name = null;
this.age = null;
this.dogFriends =[];
this.height = null;
this.eat =function (something) {
console.log(this.name + '吃' +something);
}
this.run =function (somewhere) {
console.log(this.name + '跑' +somewhere);
}
}
//批量产生对象
var dog1=new Dog();
dog1.name='阿花';
dog1.age=15;
dog1.dogFriends=['1','2'];
var dog2=new Dog();
dog2.name='阿才';
dog2.age=1;
dog2.eat('狗屎');
//创建构造函数 -->抽象
var Dog1 = function (name,age,dogFriends,height) {
this.name = name;
this.age = age;
this.dogFriends =dogFriends;
this.height = height;
this.eat =function (something) {
console.log(this.name + '吃' +something);
}
this.run =function (somewhere) {
console.log(this.name + '跑' +somewhere);
}
}
var dog3=new Dog1('阿黄',10,['fafa'],15);
内置对象-window
//第一大作用；
//1.1所有全局的变量都是window的属性
//1.2所有的全局函数都是window的方法
//全局的变量
var age=17;
console.log(window.age);
//全局的函数
function Dog() {
var name='阿花';
console.log(name);
}
window.Dog();
window.alert('哈哈');
window.console.log('全局的');
function Person() {
console.log(this);
}
Person();//window
new Person();//Person
//第二大作用
// 1.动态的跳转
alert(0);
window.location.href='http://www.baidu.com';
内置对象-document
//document内置对象的作用：
//1.可以动态获取网页中所有的标签（节点）
//2.可以对获取到的标签进行CRUD
document.write('helloworld');
document.write('<input type="file">');
document.write('<img src="https:/');
-------------------------------------------------------
<script>
function changeImg() {
// alert(0);
//1.获取网页中的标签
var img=document.getElementsByClassName('icon')[0];
// console.log(img);
//2.改变src属性
img.src='..//..//';
}
</script>
</head>
<body>
<img class="icon" src="../../image/WechatIMG79.png">
<p></p>
<button onclick="changeImg();">更改图片</button>
</body>
<img class="icon" src="../../image/WechatIMG79.png">
<p id="word">这里风景很美</p>
<p></p>
<button>隐藏</button>
<script>
//1.1 拿到所有要操作的标签
var icon=document.getElementsByClassName('icon')[0];
var p=document.getElementById('word');
var btn=document.getElementsByTagName('button')[0];
//1.2监听按钮的点击
btn.onclick=function () {
//隐藏 css属性 display
if(btn.innerText=='隐藏'){
p.style.display='none';
icon.style.display='none';
btn.innerText='显示';
}else{
p.style.display='block';
icon.style.display='inline-block';
btn.innerText='隐藏';
}
}
</script>
注：写在body里的