培训第10天----JavaScript初识

<html><head><title>javaScript</title><!--JS简介JavaScript 是一门广泛应用于web前端的脚本语言。它是解析型的语言，无需编译，边解释边执行。JS的常见书写方式有两种，一种是在html中嵌套，另一种是在html中引用js文件。<html><head><script type="text/javascript"></script>//第一种方式<script src="thisScript.js"></script>//第二种方式<head></html>HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。--><style><!--style里面可以写css--></style><script type="text/javascript">/* javaScript（脚本语言，没办法独立运行，必须依赖于其他语言）和java没有半毛钱关系JavaScript不区分数据类型，其中全部都是弱类型变量（var类型，全称变量variables）;*/var age = 18; alert(age); //将会在页面显示一个提示框，并显示其中的内容alert(age+"-age变量的数据类型是："+typeof(age)); //------numbervar age2='18';alert(age2+"-age变量的数据类型是："+typeof(age2));//-----Stringvar age3=new Object();alert(age3+"-age变量的数据类型是："+typeof(age3));//-----objectvar age4=null;alert(age4+"-age变量的数据类型是："+typeof(age4));//age4的值是空，但是类型是Objectvar age5;alert(age5+"-age变量的数据类型是："+typeof(age5));//undefined--数据类型是undefined（未定义）if(true){alert("join if"); //js中的判断和java中的一样}if(1){alert("join if");//在js中，1和true是等价的，0和false是等价的。}                                            var v1=18;var v2='18';  alert((v1==v2)+'--'+(v1===v2));        /*"=="运算符当两个数据的类型不同时，将自动转换为相同类型，并比较内容。"==="运算符是当两个数据的类型不同时，只有内容和类型都一至时，才是true。*/switch('1'){ //在等值判断时，无法进行转换类型,当为1时，无法进入判断。case '1':alert(1); break;case '2':alert(2);break;case '3':alert(3);break;}while(false){alert("while__true");/*定义数据的时候其实是指定了数据类型的，只不过引用的类型是var类型，当数据被调用时，系统会自动将数据的源态传入进去。*/}for(var i=0;i<5;i++){alert("i的值为"+i);}var arr=['111111','222222222','3333333']; //arr的类型是Objectfor(var i in arr){//这里的增强for的语法和操作和java是不同的。alert("i的类型是"+typeof(arr[i])+"--"+arr[i]);}//js中的数组var arr1=new Array();alert(arr1+"-类型"+typeof(arr1));var arr2=new Array(13);  //页面中显示的点数和数字有关。alert(arr2+"-类型"+typeof(arr2));var arr3=new Array(['111','222']);alert(arr3+"-类型"+typeof(arr3));var arr4=['11','22','33'];var arr5=new Array();arr5.push('zhang');arr5.push('qiao');//push()方法，向数组中存放数据。alert("经历push后的数组"+arr5+":"+arr5.length);//1.一些简单的命令alert("提示框"); //警报confirm("确认框"); //确认prompt("弹出一个输入框"); //提词，提示;//文档的对象document.write("文档书写");console.log("在控制台打印信息");console.dir("在控制台打印对象的所有信息");//2.函数function/*函数命名：和java方法的命名方式一样，但是在JS中不可以有同名的函数因为后面的重名方法会把前面的方法覆盖掉。函数返回值：当函数执行完毕后，得到的结果就是一个返回值。任何函数都有返回值。*///函数声明function login(a,b){//参数可以传多也可以传少。alert("a："+a+"b:"+b);//构建数组对象用来返回多个结果值，js的数组里什么都可以放。var arr=new Array();a++;arr.push(a);arr.push(b);return arr;}function f1(){alert("join f1 function");}window.alert(login(1,2));//显示代码内容，和显示代码结果。/*能否实现自定义类这里和java是非常相似的，但是js中没有类的概念，所以function函数就可以看作构造方法。*///相当于构造方法function Person(age,name){//this代表当前的function对象。this.age=age;this.name=name;}var person = new Person(18,'qiaotao');alert(person+"-person的类型-"+typeof(person));alert(person.age+"--"+person.name);//定义匿名函数window.onload=function(){alert('只用一次的方法');}var aa=function(){}//函数对象window.onload=aa;  //相当于赋值操作。window.onload=aa();//调用函数</script</head><body><button onclick="alert('你点我干嘛');">点我一下</button><!--竟然不能是双引号双引号会和外部的引号冲突。--></body>
</html>

<!DOCTYPE html>
<html><head><!--我们来做一些简单的练习--><script type="text/javascript">function changeImage(){element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="/images/pic_bulbon.gif";}
}function myFunction(){x=document.getElementById("demo");  // 找到元素x.innerHTML="Hello JavaScript!";    // 改变内容
}//JS中的对象也是一个变量，只是这个变量可以包含多个值。var car = {type:"Fiat", model:500, color:"white"};var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};//可以通过对象.属性的方式来访问属性。window.alert(person.lastName); //函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。function functionName(){//执行代码
}/*当有参数的函数调用时，如果传的实参多，则后面的参数会丢失，如果传的参数少，那么最后的参数会未被定义。*//*当我们要使用函数的返回值时，需要在方法中return 要返回的变量，如果变量较多，要把变量都放到数组中，在返回数组，js中的数组可以放任何东西。并且函数声明，只能是下面的格式，有关键字和函数名组成。function functionName(){//执行代码
}*/     /**/</script></head><body><!--一.JavaScript可以通过不同的方式来输出数据：使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。二.常见的HTML事件:onchange HTML 元素改变onclick    用户点击 HTML 元素onmouseover 用户在一个HTML元素上移动鼠标onmouseout  用户从一个HTML元素上移开鼠标onkeydown   用户按下键盘按键onload  浏览器已完成页面的加载--><img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"><p>点击灯泡就可以打开或关闭这盏灯</p><h1>我的第一段 JavaScript</h1><p id="demo">JavaScript 能改变 HTML 元素的内容。</p><button type="button" onclick="myFunction()">点击这里</button></body>
</html>

js和java很多都是都是相似的。

培训第10天----JavaScript初识相关推荐

10个JavaScript难点
10个JavaScript难点 1.立即执行函数立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行 ...
【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
【iVX 初级工程师培训教程 10篇文拿证】06 数据库及服务
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
【iVX 初级工程师培训教程 10篇文拿证】09 聊天室制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...

培训第10天----JavaScript初识

培训第10天----JavaScript初识相关推荐

最新文章

热门文章