什么是JavaScript？

JavaScript 就是我们常说的js，js是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上。
JS的特点：
- 交互性
- 安全性（不可以访问本地硬盘）
- 跨平台（因为浏览器可以解析js文件）
JavaScript和Java不同（一点关系也没有）
- Netscape（王景），静态特效。livescript（JavaScript的前生）
- Java诞生了，升级了，改名为JavaScript火了
- 巨头：自己开发一套（jsscript）
- 找一些公司推出标准，比如：sun （微软） ECMA（欧洲计算机制造协会），联合推出标准
- ECMAScript：标准，基础上扩展。
- js：基于对象，Java是面向对象
- js：解析就可以执行，Java先编译再执行。
- js是弱类型语言，Java是强类型语言
JavaScript语言的组成
- ECMAScript：标准（js、变量、函数）
- BOM 浏览器对象模型
- DOM文档对象模型

js和HTML的结合

HTML的文件提供了一个标签<script type=”text/javascript”>js代码</script>标签可以在任意位置上。
引用外部文件的几种方式：
- 引用外部文件，<script src=”文件名”>
Window.alert(“内容”)
- 编写js代码，操作span的标签，获取中间内容，弹出。
- <span id=”spanId”>内容</span>
- alert(document.getElementById(“spanId”).innerHTML);
- function changeTest(){document.getElementById(“spanId”).innerHTML=”内容”; /改变当前元素的值}
用法：
- 和点击事件一起使用
js的关键字：
- 标识符：和Java一样
- 注释：和Java一样
- 变量：声明变量，只使用一个关键字 var
- js中双引号和单引号都表示字符串
类型：
- 5钟基本数据类型：
  - Undefined ：未定义（声明变量，没有赋值）
  - Null：空，用于赋值
  - boolean：布尔类型
  - Number：数字类型
    - 不区分整数和小数
  - String：字符型
    - js中双引号和单引号都代表字符串
  - 声明变量，使用var关键字
  - typeof（）判断当前的变量是个什么类型的数据。

js运算符：
- 算数运算符：
  - 0或者null是false、非0或者null是true，默认用1表示。
赋值运算符：
- 和Java一样
逻辑运算符：
- 和Java一样
三元运算符
- 条件？值1：值2
js的语句：
- 判断语句：
  - if( ){} else if( ){} else{}
- 循环语句：
  - Java：
    - for(int i=0;i<0;i++){内容}
  - js：
    - for(var i=0;i<0;i++){内容}
向页面输出文本内容：
- window.document.write("i = "+i+<br/>")
九九乘法表

document.write("<table border='1' width='50%' cellpadding='10'>")
for (var i=1;i<=9;i++){
    document.write("<tr>");
    for(var j=1;j<=i;j++){
        document.write("<td>"+j+"*"+i+"="+j+*i+"</td>");
    }
    document.write("</tr>");
}
document.write("</table>")

js的数组：
- Java的数组：定义string [] str={ }；
声明数组
- var arr =[12，22，33];
- var arr = new Array(5);
- var arr = new Array(2,3,4)

eval(定义的值);用于运算
event.srcElemrnt,innerText;用于事件（event事件的意思）

例子：计算器：

var x =document.getElementById("disply");得到ID为disply的值（也叫赋值给x）

var zhi="";定义一个zhei为空，用来存放计算的数据//获取相应的值

function cuca() {x = event.srcElement.innerText;事件得到x的值zhi=document.getElementById("disply").innerHTML += x;得到值并返回给disply标签显示}

//计算function jisuan(){var n=eval(zhi);计算最终的值ndocument.getElementById("disply").innerHTML=n;返回n

//清空function qing() {document.getElementById("disply").innerText=null;}//退格function tui() {

var arr = document.getElementById("disply");arr.innerHTML=arr.innerHTML.substring(0,arr.innerHTML.length-1);

//arr.innerText也可以}

</script>

表单验证：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>//在方法中设定参数，随便写一个参数名字即可

function checkName(id){//调用者把自己传递过来，直接给value赋值 id.value=""; }
function a(){//得到Id为name的那个元素或者标签，拿到它的值赋给x

var x = document.getElementById("name").value;//如果x等于空或者等于空字符串

if(x == null || x == ""){//拿到id为checkname的这个对象，改变他的样式字体

document.getElementById("checkname").style.color="red";//设置该标签的值，让他有提示的功能

document.getElementById("checkname").innerHTML="用户名不能为空"; }else if(x == "admin"){

document.getElementById("checkname").style.color="green";

document.getElementById("checkname").innerHTML="这是管理员才能注册的"; }else{

document.getElementById("checkname").style.color="blue";

document.getElementById("checkname").innerHTML="√"; } } function close1() {

document.getElementById("body").style.backgroundColor="black"; } </script>
</head>

<body id="body">

<span onclick="close1()">关灯</span>

<table>

<tr>

<td>

<input type="text" name="name" id="name" value="请输入用户名" onclick="checkName(this)" onblur="a()"/></td>

<span id="checkpassword">

</span>

</td> </tr> <tr> <td>

<input type="submit" />

</td> </tr>

</table>
</body>

</html>

js实现图片自增长<script>//获得图片的

IDvar bj = document.getElementById("img");

var isrun = true;//定义是否自增

var x = function() {var w = bj.width;//定义初始化宽高

var h = bj.height;if(isrun) {w += 1;h += 1;if(w == 500) {

isrun = false;//最大时减小}}else {w -= 1;h -= 1;if(w == 0) {

isrun = true;//最小时自增}}

bj.width = w;//初始化自增宽高

bj.height = h;}setInterval(x, 6);

</script>图片的运动<!DOCTYPE html>

<title>Title</title>

</head>

var img = document.getElementById("img");

var speed = 10; //速度

var widthByDisplay = 1000;//屏幕宽度

var heightByDisplay = 500;//屏幕高度

var isrun = true; //是否运行

var direction = 1; //默认方向为上 // 程序开始运行 run方法不停检查他要走的方向

function run() { //检查，控制 direction 1 - 8所代表的方向，并且应该调用哪个方法，往哪走

switch (direction){

case 1: GameTop(); break;

case 2: Gameright(); break;

case 3: GameDown(); break;

case 4: Gameleft(); break;

case5: GameRightUp(); break;

case6: GameRightDown(); break;

case7: GameLeftDown(); break;

case8: GameLeftUp(); break;

} }

//dir 每次调用改变一次方向

function dir(){ //随机产生一个数 1- 8 ，代表它的方向

direction = Math.floor(Math.random()*8+1); } //往右走

function Gameright() {

if(isrun){ // 给左边距设值 = 速度 + 当前位置 + px

img.style.left= speed + img.offsetLeft + "px";

if(img.offsetLeft > 1000) {

dir();//如果图片位置大于1000 ，调用上面dir（）改变方向 } } } //往左走

function Gameleft() {

img.style.left = img.offsetLeft - speed + "px";

if (img.offsetLeft < 100) {

dir(); } } //往上走

function GameTop(){

img.style.top = img.offsetTop - speed +"px";

if(img.offsetTop < 100){ dir(); } } //往下走

function GameDown() {

img.style.top = img.offsetTop + speed +"px";

if(img.offsetTop > heightByDisplay){ dir(); } }

function GameRightUp(){

img.style.left= speed + img.offsetLeft + "px";

img.style.top = img.offsetTop - speed +"px";

if(img.offsetLeft > widthByDisplay || img.offsetTop < 100){ dir(); } }

function GameRightDown(){

img.style.top = img.offsetTop + speed +"px";

img.style.left= speed + img.offsetLeft + "px";

if(img.offsetLeft > 1000 || img.offsetTop > heightByDisplay){ dir(); } }

function GameLeftUp() {

img.style.top = img.offsetTop - speed +"px";

img.style.left = img.offsetLeft - speed + "px";

if (img.offsetLeft < 100 || img.offsetTop < 100) { dir(); } }

function GameLeftDown(){

img.style.left = img.offsetLeft - speed + "px";

img.style.top = img.offsetTop + speed +"px";

if(img.offsetTop > heightByDisplay || img.offsetLeft < 100){ dir(); } }

setInterval(run,10); //反复运行 run方法

</script>

</body>

</html>

测试小白–彭彭

初始JavaScript

什么是JavaScript？

js和HTML的结合

發佈留言取消回覆

什么是JavaScript？

js和HTML的结合

發佈留言 取消回覆

發佈留言取消回覆