目录
JS中的流程控制语句----------------->>>简易计算器----->>>>打印9*9乘法表
JS中变量的作用域(1)全局变量(2)局部变量 :声明在函数内
JS中常用的内置对象 (是JS中一个种含有属性和方法的特殊的数据类型而已)
网页的三部分组成：
1：结构（Structure）：由HTML（显示数据）和XML（存储和传输数据）
2：表现（Presentation）：由Css组成
3：行为 （Behavior）：ECMAScript
Java和JavaScript的关系：
Java和JavaScript的关系就好比：雷锋 和雷锋塔 ，毫无联系。
JavaScript的三种使用方式：
1）内嵌到HTML标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//onclick等于后面是js的语言，这是嵌入到html语言中的，这个功能是弹出ok窗口
<input type="button" value="点击" onclick="window.alert('ok');"/>
</body>
</html>
2）写在Script标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
window.alert("ok");
}
</script>
</head>
<body>
<!--text（）就好像java中的方法一样，调用script中的text（）方法，必须要打（）-->
<input type="button" value="登录" onclick="text()" />
</body>
</html>
3）写在单独的js标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--导入js文件-->
<script src="../js/js4.js"></script>
</head>
<body>
<input type="button" value="登录" onclick="text1()"/>
</body>
</html>
js文件：
function text1(){
window.alert("hello");
}
Js的5种输出方式：
1）window.alert(" "); 弹窗的方式进行输出
2）document.write(" "); 以流的方式输出到页面中（建立新的页面）
3）console.write(" ")； 将信息打印在控制台上
4）innerHTML（）；将内容写在HTML的标签里。
5）innerText（）; 将内容写在html标签里，（Text的括号里的所有都是文本）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
window.alert("第一种方式：弹出窗口");
}
function text1(){
document.write("第二种方式，打印在新的页面");
}
function text3(){
console.log("将信息打印在控制台上F12可见")
}
function text4(){
// 需要创建div标签，然后把信息打印在div标签里
var doc=document.getElementById("div1");//得到id为div1的标签
doc.innerHTML="将这个信息打印在id=div1的div标签里";
doc.innerText="打印成文本信息所有的全部打印";
//innerHTML和innerText的区别是：
//如果在innerHTML中输出<h1>A</h1>这个就相当于在id=div1的div中在放一个h1的标题标签
//但是在innerText中这样一模一样的打印，就会打印出 <h1>A</h1> 这个文本信息
}
</script>
</head>
<body>
<input type="button" value="第一种方式" onclick="text()"/>
<input type="button" value="第二种方式" onclick="text1()"/>
<input type="button" value="第三种方式" onclick="text3()"/>
<input type="button" value="第四种方式" onclick="text4()"/>
<div id="div1"></div>
</body>
</html>
Js的语法初始：
js中值的类型：
Number类型、 String类型 、 Array（数组）类型 、Object（对象）类型、Function函数（相当于java中的方法）
JS中的运算符：
a)算术运算符 +,-,*,/,%
b)逻辑运算符
c)关系运算符
JS中的变量统统使用var来声明，所以JS是一种弱类型语言
JS中的变量使用var来声明，所以JS中的变量没有数据类型，但是JS中的值却有数据类型
我们可以使用type of函数来判断 变量的类型是什么
JS中的流程控制语句
( 1)分支结构
单分支 if
双分支 if..else
多分支 ：多重if
switch
运用学过的知识编写一个简易的计算器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
//document.getElementById是通过id找到对应的标签 .value是得到里面的值
var txt1=document.getElementById("tx1").value;
var txt2=document.getElementById("tx2").value;
//判断选择的运算方式，然后分别进行计算
var choose=document.getElementById("sel").value;
//定义计算结果
var result;
switch(choose){
case"+":
//虽然得到了两个值，但是这两个值是String类型的，所以需要parseInt进行类型转换
//当两个值进行相加。我们知道如果是String类型的，会形成字符串拼接的情况，所以要类型转换
//相加 得到了整数的变量
result=parseInt(txt1)+parseInt(txt2);
break;
case"-":
//只有+会造成字符串的拼接，所以其他符号直接计算
result=txt1-txt2;
break;
case"*":
result=txt1*txt2;
break;
case"/":
//两种情况，一个正常除数 一个如果除数为0
if(txt2==0){
result="除数不能为0";
}else{
result=txt1/txt2;
}
break;
}
//获取id=div1的div 然后打印输出结果
document.getElementById("div1").innerHTML=result;
}
</script>
</head>
<body>
第一个数：<input type="text" id="tx1" value=""/>
第二个数：<input type="text" id="tx2" value=""/>
运算方式:<select id="sel" name="choose">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="button" value="计算" onclick="text()"/>
运算结果：<div id="div1"></div>
</body>
</html>
(2)循环结构
a)for
b)while
c)do-while
d)for ..in
和java用法基本一样，除了for in循环，这里使用一下for in循环打印数组。然后我们再练习打印99乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
//定义数组
var arr=['one','two','three','four'];
//for in循环
for(var i in arr){
alert(arr[i]);
}
}
function text1(){
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" , ");
}
document.write("</br>");
}
}
</script>
</head>
<body>
<input type="button" value="for in使用" onclick="text()"/>
<input type="button" value="打印99乘法表" onclick="text1()" />
</body>
</html>
JS中的函数(相当于java中的方法)
(1)系统函数
parseInt(....)
(2)自定义函数
JS中的函数不允许重载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//(1)第一种声明函数的方式
function test1(){
//函数体
alert("无参无返回值的函数");
}
function test2(a,b){ //小括号里的叫形参，但是JS是弱类型语言，所有的类型使用var声明，直接省略即可
alert(a+" "+b);
}
/**在JS中函数不能重载 test2(a,b,c)将test2(a,b)进行了覆盖*/
function test2(a,b,c){
alert(a+" "+ b+" "+ c);
}
function test3(){
return "helloworld";
}
function test4(a,b){
return a+b;
}
//(2)第二种声明函数的方式
var x=function(){
alert("hello");
}
//(3)第三种声明方式
function test5(){
//想表达一个含义，函数是对象 ，因为它是使用new关键字创建出 来了
var y=new Function("a","b", "return a*b");
var x=y(10,20);
alert(x);
}
</script>
</head>
<body>
<input type="button" id="" value="无参无返回的函数" onclick="test1()"/>
<input type="button" id="" value="带参无返回的函数" onclick="test2(10,20)" />
<input type="button" id="" value="带参无返回的函数" onclick="test2(10)" />
<input type="button" id="" value="带参无返回的函数" onclick="test2(10,20)" />
<input type="button" id="" value="无参带返回值的函数" onclick="alert(test3())" />
<input type="button" id="" value="带参带返回值的函数" onclick="alert(test4(10,20))" />
<hr/>
<input type="button" id="" value="匿名函数" onclick="test5()"/>
</body>
</html>
JS中变量的作用域
(1)全局变量
(2)局部变量 :声明在函数内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var b=20;//全部变量
function test1(){
var a=10;
alert(a);
}
function test2(){
//alert(a); a is not defined ，证明一件事儿，局部变量a只能在test1中使用
}
function test3(){
alert(b);
}
</script>
<script type="text/javascript">
function test4(){
alert(b);
}
function test5(){
c=20;
alert(c);
}
function test6(){
//alert(c); //找不到c is not defined
}
</script>
</head>
<body>
<input type="button" id="" value="局部变量" onclick="test1()" />
<input type="button" id="" value="局部变量的作用域" onclick="test2()" />
<input type="button" id="" value="全部变量1" onclick="test3()" />
<input type="button" id="" value="全部变量2" onclick="test4()" />
<input type="button" id="" value="省略var变量3" onclick="test5()" />
</body>
</html>
JS中的对象
(1)自定义对象
(2)JS中的内置对象
JS中常用的内置对象 (是JS中一个种含有属性和方法的特殊的数据类型而已)
(1)String
(2)Date
(3)Array数组
(4)Function函数
(5)Math类
(6)全局对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test1(){
//String
var str="helloworld";
console.log(typeof str); // 值的类型是string
console.log(str[0]); //相当于java中的charAt(int index) 根据索引获取字符
var str2="\"hello\""; // \转义字符
console.log(str2);
console.log(str.length); //与java不一样,length是String的属性
console.log("o第一次出现的位置:"+str.indexOf("o"));
console.log("o最后一出现的位置:"+str.lastIndexOf("o"));
var str3="hello"; //match通常与正则表达式一起使用
console.log("str中是否包含str3的内容:如果包含返回str3，如果不包含返回:null"+str.match(str3));
console.log("str中是否包含666:"+str.match("666"));
//替换
console.log("替换:"+str.replace("o","你"));//替换第一个
//大小转换
console.log(str.toUpperCase());
console.log(str.toLowerCase())
}
function test2(){/*
var d1=new Date(); //得到当前系统时间
console.log(d1);
var year=d1.getFullYear();
console.log(year);
var month=d1.getMonth();
console.log(month);
var da=d1.getDate();
console.log(da); //12,8月12号
var day=d1.getDay(); //1, 星期一
console.log(day);
var d2=new Date(1000); //得到1970年1-1 08:00:01东八区
console.log(d2);
//格式化日期，相当于java中的
//var s=d1.format("yyyy-MM-dd");//结果为
//console.log(typeof s+" "+s)
//alert(new Date().format("yyyy年MM月dd日"));
*/
}
function test3(){
//Math对象
console.log(Math.abs(10)+" "+Math.abs(-10));
console.log(Math.ceil(98.001));
console.log(Math.floor(98.999));
console.log(Math.round(98.4)+" "+Math.round(98.5));
console.log(Math.sqrt(4));
//随机数
console.log(Math.random());
//如何得到1000-9999的随机数呢
console.log( Math.ceil((Math.random()*9000))+1000);
console.log(Math.max(10,20,30,3));
}
function test4(){
var reg=/\d*/i;//模型中要包含0-9的数字
var reg2=/\w{4}/i;
var reg3=new RegExp("d","i"); //包含d
//获取文本框
var txtValue=document.getElementById("txt").value;
//判断文本框中的值是否包含0-9的数字
//与String的match一起使用
alert(txtValue.match(reg3));
}
</script>
</head>
<body>
<input type="button" id="" value="String对象" onclick="test1()" />
<input type="button" id="" value="Date对象" onclick="test2()" />
<input type="button" id="" value="Math对象" onclick="test3()" />
<input type="button" id="" value="正则表达式对象" onclick="test4()" />
<input type="text" id="txt" value="" />
</body>
</html>
3426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
