3.js
js练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js练习</title>
<script>
//undefined”的意思是：不明确的；未下定义的
// HTML 输出中使用 document.write。
// 如果您在文档加载后使用该方法，会覆盖整个文档。
document.write("hello world");
// alert为弹窗警告
//alert(5+6);
//Document 对象
// 每个载入浏览器的 HTML 文档都会成为 Document 对象。
// Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
// 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
function myFunction(){
//getElementById() 查找元素
//getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
//innerHTML 修改内容
document.getElementById("demo").innerHTML="我的第一个javascript函数";
// js声明变量用var
//变量由所赋给的值来确定数据类型
//定义字符串用双引号或电影好
var str ="bafasfasdf";
var str1="sadfsaffdsaf";
var ch = 'a';
var i=10;
var f=1.2;
var arr=[1,2,5,0,4,52,15];
//Console 对象用于 JavaScript 调试,log方法用于输出信息。
console.log(str);
//控制台输出信息
console.log(str1,ch,i,f,arr);
//声明变量未赋值
var x;
console.log("未赋值的变量x为"+x);
//分割线
console.log("___________________________________________________");
//给变量赋值
x =11;
console.log(x);
//length为数组的长度
console.log("数组的长度为----"+arr.length);
//各种运算
m = 5;
n = 6;
z = (m+n)*10;
console.log(z);
//给变量赋值为true
var flag= true;
console.log("flag为"+true);
//声明数组
var a = new Array();
//给数组赋值
a[0]=1;
a[1]=2;
a[2]=32;
//然后输出a
console.log("a数组为:"+a);
//js定义变量根据类型自动转换
var cars=new Array("哈弗","大众","丰田");
//根据下标输出
console.log(cars[1]);
//直接输出
console.log(cars);
//创建对象obj,JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
// obj=new Object();
// obj.firstname="Bill";
// obj.lastname="Gates";
// obj.age=56;
// obj.eyecolor="blue";
//替换语法：
var obj={frstName:"John",lastName:"Doe",age:50,eyeColor:"blue"}
//通过对象调用属性的值,还可以通过下标形式访问
console.log("通过对象调用属性的值:"+obj.frstName,obj["lastName"]);
console.log("分割线——————————————————————————————————————————————————————————————");
//对象包含属性和方法
var person={
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue",
//对象里面可以用方法,但不知道怎么调用
fullName:function(){
return person.firstName+" "+this.lastName;
}
}
//函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functio(){
return person.firstName+" "+person.lastName;
}
console.log("函数调用必须加():"+functio());
console.log("____________________________________________________");
//输出firstname属性
console.log("对象里面有方法嵌套："+person.fullName);
//访问对象方法
var fName=person.fullName;
console.log("fName————:"+fName);
//定义一个字符串
var carname="Vls jfd8 ";
var character=carname[7];
console.log("字符串的第七位："+character+"字符串的长度"+carname.length);
var str1="John";
console.log("分割线-----------------------------------------------------");
//声明新变量时可以用new确定其类型
//这种会把数据类型和值一起输出，括号里为值
var str2 = new String(123123);//不建议用这种
console.log(str2);
//这种只输出值
var str3 = new Number;
str3=123123;
console.log("第二种"+str2);
//js中==比值，===比值和类型
console.log(str2==str3);//true
console.log(str2===str3);//fales
}
// 函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function add(a,b){
if(a>b){
return;
}
return a+b;
}
console.log(add(1,3));
//在方法中声明局部变量
function addd(){
//方法里面声明的变量是局部变量
var a=56;
var b=43;
return a+b;
}
// 调用方法输出
var add1 = addd();
console.log(add1);
//Date()函数是当前时间
console.log(Date());
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<!-- <button> 标签定义一个按钮，type规定按钮的类型,
属性值为：submit 该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button 该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset 该按钮是重置按钮（清除表单数据）。。
onclick 事件在用户单击元素时发生。
可以将alert() 函数在 JavaScript 中并不常用，
但它对于代码测试非常方便。
比如：<button type="button" onclick="alert('呜呜呜，你点我啊啊啊')">尝试一个</button>
-->
<button type="button" onclick="myFunction()">尝试点一下呗</button>
<button type="button" onclick="innerHTML=add(5,9)">点一下</button>
<!-- getElementById('demo')搜索，innerHTML=Date()：修改内容，修改为Date()函数
Date函数为当前时间 -->
<button type="button" onclick="getElementById('demo').innerHTML=Date()">获取时间按钮</button> <br><br>
<!-- button在浏览器的默认值就是button
直接把事件发生修改为当前时间，this为当前对象 ,事件修改当前this可直接省略写方法-->
<button onclick="this.innerHTML=Date()">现在的时间是？</button>
</body>
</html>
浙公网安备 33010602011771号