JavaWeb笔记---JavaScript基础知识1

1.JavaScript介绍
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码.
JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
2.JavaScript与HTML结合
这里回忆以下CSS与HTML的结合:
方法一:直接在标签上写style
方法二:在head中给相应的标签设置样式
方法三:通过#id
方法四:通过.class
方法五:组合id,class,标签名
方法五:创建一个.css文件,zaihead中链接这个文件

方法一:只需要在 head 标签中，或者在 body 标签中， 使用 script 标签来书写 JavaScript 代码

<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// alert 是 JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("hello javaScript!");
</script>
</head>

方法二:使用 script 标签引入 单独的 JavaScript 代码文件
1.js为自己创建的一个.js文件alert("Hello javaScript!");

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
    alert(" 国哥现在可以帅了");
</script>

3.JavaScript中的变量(这里类似于python,比Java简单)
变量是可以存放某些值的内存的命名
JavaScript 的变量类型：
数值类型： number :var num = 12;
字符串类型： string :var str = “string”;
对象类型： object
布尔类型： boolean
函数类型： function
JavaScript 里特殊的值：
undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.
null 空值
NaN 全称是：Not a Number。非数字。非数值

<script type="text/javascript">
    var i;
    //alert(i); undefined
    i = 12;
    alert(i);
    //typeof取变量的类型返回
    alert(typeof(i)); //number
    i = "索亮";
    alert(typeof(i)); //string
    var a = 12;
    var b = "abc";
    alert(a*b); //NaN: not a number
</script>

3.1关系运算(比较)
等于： == 等于是简单的做字面值的比较(字符串"12"与数字12也相同)
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型(字符串"12"与数字12不相同)

<script type="text/javascript">
var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
</script>

3.2逻辑运算(遵守java的短路运算)
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用
0 、null、 undefined、””(空串) 都认为是 false；(" "被认为是true)

	/*
	&& 且运算。
	有两种情况：
	第一种：当表达式全为真的时候。返回最后一个表达式的值。
	第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
	|| 或运算
	第一种情况：当表达式全为假时，返回最后一个表达式的值
	第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
	并且 && 与运算 和 ||或运算有短路。
	短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
*/
        var a = 0;
        if(0){ //返回false
            alert("hello world");
        }else{
            alert("no hello world");
        }
        //
        var b = null;
        if(b){  //返回false
            alert("hello world");
        }else{
            alert("no hello world");
        }
        var c = undefined;
        if(c){  //返回false
            alert("hello world");
        }else{
            alert("no hello world");
        }

        var c = 1;
        var d = "aa";  //&&如果都为真时,返回最后一个值
        var e = true;  //&&如果有假时,返回第一个假的
        var f = false;
        alert(c&&d&&e);  //返回第一个假f
        alert(c&&d);  //返回最后一个真

4.数组
数组定义方式:
var lists = []; //空数组
var 数组名 = [1 , ’abc’ , true]; //定义的同时赋值

<script type="text/javascript">
var arr = [true,1]; // 定义一个数组
// alert( arr.length ); // 2
arr[0] = 12;
// alert( arr[0] );//12
// alert( arr.length ); // 2
// javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[3] = "abc";
alert(arr.length); //3
// alert(arr[2]);// undefined
// 数组的遍历
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
</script>

5.函数
函数的定义方式有两种:
方式一:

function 函数名(形参列表){
函数体
}

在 JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return 语句返回值即可！

<script type="text/javascript">
// 定义一个无参函数
function fun(){
alert(" 无参函数 fun() 被调用了");
}
// 函数调用 === 才会执行
// fun();
function fun2(a ,b) {
alert(" 有参函数 fun2()了 被调用了 a=>" + a + ",b=>"+b);
}
// fun2(12,"abc");
// 定义带有返回值的函数
function sum(num1,num2) {
var result = num1 + num2;
return result;
}
alert( sum(100,50) );
</script>

第二种方法:

var 函数名 = function(形参列表) { 函数体 }

<script type="text/javascript">
var fun = function () {
alert(" 无参函数");
}
// fun();
var fun2 = function (a,b) {
alert(" 有参函数 a=" + a + ",b=" + b);
}
// fun2(1,2);
var fun3 = function (num1,num2) {
return num1 + num2;
}
alert( fun3(100,200) );
</script>

注：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义****所以在JavaScript中sum()会被sum(a,b)覆盖

<script type="text/javascript">
function fun() {
alert(" 无参函数 fun()");
}
function fun(a,b) {
alert(" 有参函数 fun(a,b)");
}
fun();//输出结果为第二个,第一个已经被覆盖
</script>

函数的 arguments 隐形参数 （只在 function 函数内 )
就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object … args );

<script type="text/javascript">
function fun(a) {
alert( arguments.length );// 可看参数个数为3
alert( arguments[0] ); //1
alert( arguments[1] ); //ad
alert( arguments[2] ); //true
alert("a = " + a);  //a=1
for (var i = 0; i < arguments.length; i++){
alert( arguments[i] );  //循环遍历
}
alert(" 无参函数 fun()");
}
fun(1,"ad",true);
// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i]; //求number类型的和
}
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );

6.函数的自定义对象
对象的定义：
var 变量名 = new Object(); // 对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} // 定义一个函数
对象的访问：
变量名.属性 / 函数名();

<script type="text/javascript">
// 对象的定义：
// var 变量名 = new Object(); // 对象实例（空对象）
// 变量名 . 属性名 = 值 ; // 定义一个属性
// 变量名 . 函数名 = function(){} // 定义一个函数
var obj = new Object();
obj.name = " 华仔";
obj.age = 18;
obj.fun = function () {
alert(" 姓名：" + this.name + " , 年龄：" + this.age);
}
// 对象的访问：
// 变量名 . 属性 / 函数名 ();
// alert( obj.age );
obj.fun();
</script>

2.{}花括号形式的自定义对象:相当于可以直接定义属性方法在一个花括号里面:类似于Java中类的定义;

<script type="text/javascript">
// 对象的定义：
// var 变量名 = { // 空对象
// 属性名：值 , // 定义一个属性
// 属性名：值 , // 定义一个属性
// 函数名： function(){} // 定义一个函数
// };
var obj = {
name:" 国哥",
age:18,
fun : function () {
alert(" 姓名：" + this.name + " , 年龄：" + this.age);
}
};
// 对象的访问：
// 变量名 . 属性 / 函数名 ();
alert(obj.name);
obj.fun();
</script>

下一个文章讲解JavaScript中的事件基础