毕竟不是第一次学代码，一些相类似的就不必做记录。

JavaScript输出

  • document.getElementById('1').innerHTML='修改后的值'可以修改html的内容。也就是可以对html进行操作。
  • window.alert(1);可以弹出一个警告框，并且将值输出出来
  • document.write(Date());将时间打印出来。打印的位子取决于js代码的位置。
1
2
3
4
5
6
7
8
9
10
11
12
<html>
	<h2 id='1'> js的小测试</h2>
	<script>
		//document.getElementById('1').innerHTML='修改了h2的内容';
		//window.alert(1+1);
		a = 5;
		b = 1;
		console.log(a+b);
		//document.write(Date());
	</script>
	<h2 id='2'> js的小测试2</h2>
</html>

语法

javascript对大小写是敏感的。

函数写法

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
	<h2 id='1'> js的小测试</h2>
	<script>
		function myFunction(a,b){
			return a*b;
		}
	</script>
	<h2 id='2'> js的小测试2</h2>
	<script>
		alert(myFunction(1,2));
	</script>
<button onclickk ="alert(myFuction())"> 点击</button>
</html>

代码按顺序执行

1
2
3
4
5
6
7
8
<html>
	<h2 id='1'> js的小测试</h2>
	<h2 id='2'> js的小测试2</h2>
	<script>
		document.getElementById('1').innerHTML='第一次修改';
		document.getElementById('1').innerHTML='第二次修改';
	</script>
</html>

对代码进行折行

其实就是过长的字符串可以利用\进行换行。但是如果在‘1’这换行就会报错。报错原因是因为innerHTML找不到了。

1
2
document.getElementById('1').innerHTML='第一\
次修改';

变量

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

变量声明

1
var a=1,b=2,c=3; //一次性定义三个变量，用逗号分割

重新声明变量不会报错，也不会使原先赋值丢失

1
2
3
var a=1;
var a;
alert(a); //仍为1

变量作用域

  • 在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
  • 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
  • 当使用 var声明变量时，不可配置全局属性,并且无法使用delete删除。
1
2
3
4
5
6
7
8
9
var a = 1;
//alert(window.a);
alert(delete a);//false
alert(window.a);//1

a = 1;
//alert(window.a);
alert(delete a);//true
alert(window.a);//undefined

数据类型

数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<script>
		var arr = new Array();  //创建数组
		arr[0]='1';
		arr[1]='2';
		arr[2]='3';
		alert(arr); //将数组所有值输出，并且以逗号分割
		alert(arr[1]); //输出2
		alert(arr[3]);// 由于下标3不存在，输出undefined
	</script>
// 另一种方式 可以看出数组里的变量并非完全一样的。可以是整型，字符串
	<script>
		var arr = new Array('1','2',3);
		alert(arr);
		alert(arr[1]);
		alert(arr[2]);
	</script>
//第三种方式，用方括号[]进行数组的声明
		var arr=['1',1.2,3];
		alert(arr);

对象

似乎这里的对象和java的对象不是一个概念吧？瞎猜

1
2
3
4
5
6
7
8
9
<script>
    //赋值需要用冒号
	var person={
		a : '1',
		b : 2,
		c : 3,
	};//这有个封号
	alert(person.a);//点可以取到对象里某个变量的值。
</script>

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象

上面的方式声明变量的方式并没有指定类型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = new String；
var b = new Number;
var c = new Boolean;
var d = new Array；
var e = new Object;
///////////////////////////////////////
	<script>
		var a = new String;
		var a = 1;
		var b = new Number;
		b = 2;
		document.write(a+b); //输出了3
//第二次赋值会将第一次的值和类型给改变
		var a = 1;
		var a = new String;
		var b = new Number;
		b = 2;
		document.write(a+b);//输出的是2 应该是''+2
	</script>

JavaScript 事件

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

1
2
3
4
5
6
7
8
9
10
11
点击按钮就会显示出当前时间
<html>
	<h2 id='1'> js的小测试</h2>
	<h2 id='2'> js的小测试2</h2>
	<button onclick=myFunction()>点击</button>
	<script>
		function myFunction(){
			document.write(Date());
		}
	</script>
</html>

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

字符串

  • 可以使用索引位来字符串中的某一位,索引从0开始

    1
    2
    var a='abc defg';
    alert(a[4]);//d

  • 可以使用length函数判断字符串长度

    1
    2
    var a='abc defg';
    alert(a.length);//8

  • 字符串可以是对象

    1
    2
    var a=new String('abc defg');
    alert(typeof a);

  • === 为绝对相等，即数据类型与值都必须相等。

    1
    2
    3
    4
    5
    <script>
    	var b = 'abc defg'
    	var a=new String('abc defg');
    	document.write(b==a,"/////////",b===a);//true/////////false
    </script>

FOR/IN循环

其他的循环和别的语言大致相似，这里记录一下这种特殊一点的循环

1
2
3
4
5
6
7
8
<script>
	var person={name:"zhhhy",sex:"男",age:18};
	var a ="";
	for (x in person){
		a =a + person[x];
	}
	document.write(a);// zhhhy男18
</script>

null

在 JavaScript 中 null 表示 “什么都没有”。

null是一个只有一个值的特殊类型。表示一个空对象引用。

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined

1
2
3
4
5
6
null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

javaScript类型转换

1
2
3
4
5
<script>
	var a = '1';
	b = Number(a);
	alert(typeof b);
</script>

typeof

typeof可以查看当前变量是什么类型

1
2
3
4
5
6
7
8
9
10
typeof "John"                 // 返回 string 
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object        数组
typeof {name:'John', age:34}  // 返回 object        对象
typeof new Date()             // 返回 object        日期
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

javascript严格模式

严格模式下你不能使用未声明的变量

“use strict” 指令只允许出现在脚本或函数的开头。

全局严格模式

1
2
3
4
5
6
"use strict";
myFunction();

function myFunction() {
    y = 3.14;   // 报错 (y 未定义)
}

函数内部严格模式

1
2
3
4
5
6
7
x = 3.14;       // 不报错 
myFunction();

function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

严格模式的限制

  • 不允许使用未声明的变量
  • 不允许删除对象和变量
  • 不允许变量重名
  • 不允许使用八进制
  • 不允许使用转义字符
  • 不允许对只读属性赋值
  • 不允许对使用getter方法读取的属性进行赋值
  • 不允许删除不允许被删除的属性
  • 变量名不能使用eval
  • 变量名不能使用arguments字符串

表单验证

当加上了required时，如果表单为空，不允许表单提交

1
2
3
4
<form action="demo_form.php" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

验证表单里的值是否符合

1
2
3
4
5
6
7
8
9
10
function validateForm()
{
	//取出表单myForm中的name为fname的input。
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

对html标签进行操作

Ajax

一些地方可以用上ajax，比如注册时候判断用户名是否被使用了。而Ajax并非是在某一种语言的技术，而是在jsp，php中都可以使用的。Ajax是使用JQuery实现的，JQuery又是js的一套框架。简单分析一下编写的过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//注册页面
//首先，我们要做成什么效果
//当输入完用户名时，将用户名发送到后台去给php做数据库的操作，判断是否有这个用户。
$(function(){
    //当用户名的input标签失去焦点，即输入完毕,blur()方法，可以查手册看看如何使用
    $('input[name="username"]').blur(function(){
        //取出该标签里面的值，然后进行POST发包
        var username = document.forms['myForm']['username'].value;
        //.post方法还有.get 
        $.post('./reg.php',"username":username,function(data){
            //data应该是后台页面的输出值
            if(data=="已注册"){
                //当然这里不只是弹窗口，具体应该看情况而定
                alert("已注册")；
            }else(data =="未注册"){
                alert("未注册");
            }
        });
    }); 
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//后台接受数据的reg.php
<?php 
	$username = $_POST['username'];
	//echo $username,"<br>";
	//$username = 'zhhhy';
	if(@mysql_connect('localhost','root','root')){
		//echo "数据库连接成功";
	}
	$sql = "select count(*) from tp_user where username='$username'";
	//echo $sql;
	mysql_select_db('tp3');
	$rs= mysql_query($sql);
	//echo var_dump($rs);
	if($row=mysql_fetch_row($rs)){
		
		if($row[0]>0){
			echo "已被注册";
		}else{
			echo "可以注册";
		}
	}
?>

写的很粗糙，毕竟不是一个前端狗，在后端部分也是写的比较粗糙，php基础没打好。以上代码可以简单的实现实时检查用户名是否存在，同样的可以完善其他功能，有框架在，其他的大同小异。

结束

简单看一下js的基本语法。不做特别深入的学习，慢慢积累。