javascript基础：语法与html结合方式
一、基本语法：
1、与html结合方式
1、内部JS：
* 定义<script>，标签体内容就是JS代码
2、外部JS：
* 定义<script>，通过src属性引入外部的js文件
* 注意：
1、<script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
2、<script>可以定义多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
alert("flypig666")
</script>
<script src="js/a.js"></script>
</head>
<body>
<input type="text">
<!-- <script>
alert("flypig666")
</script> -->
</body>
</html>
2、注释
单行注释：//注释内容
多行注释：/*注释内容*/
3、数据类型
1、原始数据类型（基本数据类型）
1、number：数字 。 整数/小数/NAN（not a number 一个不是数字的数字类型）
2、string：字符串。 字符/字符串:"abc"、"a"、'abc'（单引和双引都可以）
3、boolean：true false
4、null：一个对象为空的占位符
5、undefined：未定义。如果一个变脸没有给初始化值，则会被默认赋值为undefined
* typeof(变量名)：可以得出该变量类型
1==number
1.2==number
NaN==number
abc==string
edf==string
true==boolean
null==object
undefined==undefined
undefined==undefined
<script>
// 定义变量
// var a = 6;
// alert(a);
// a = "abc";
// alert(a)
//定义number类型
var num = 1
var num2 = 1.2
var num3 = NaN
// 输出到页面上
document.write(num+"<br>")
document.write(num2+"<br>")
document.write(num3+"<br>")
//定义String类型
var str = "abc"
var str2 = "edf"
document.write(str + "<br>")
document.write(str2 + "<br>")
//定义boolean
var flag = true;
document.write(flag + "<br>")
//定义null
var obj = null
var obj2 = undefined
var obj3
document.write(obj + "<br>")
document.write(obj2 + "<br>")
document.write(obj3 + "<br>")
</script>
2、引用数据类型：对象
4、变量
* 变量：一小块存储数据的内存空间
* Java语言是强类型语言，而javascript是弱类型语言
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
* 语法：
* var 变量名 = 初始化值
* typeof运算符：获取变量的类型
* 注：null运算后得到的是object
5、运算符
1、一元运算符：只有一个运算数的运算符
++ --， +（正号）
<script>
/*
注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
* 其他类型转number：
* string转number：按照字面值进行转换，如果字面值不是数字，则转为NaN（不是数字的数字）
* boolean转number：true转为1，false转为0
*/
var num = 4
var a = ++num
document.write(num + "<br>")
document.write(a)
document.write("<hr>")
var b = +"123abc"
// alert(typeof(b))
// alert(b + 1)
document.write(typeof(b))
document.write(b + 1)
document.write("<hr>")
var flag = +true
var flag2 = +false
document.write(typeof (flag) + "<br>")
document.write(flag + "<br>")
document.write(flag2 + "<br>")
</script>
2、 算法运算符
+ - * / %
3、赋值运算符
= += -+ 。。。
4、比较运算符
> < >= <= == ===(全等于)
<script>
/**
* 比较运算符：
* 比较方式
* 1、类型相同：直接比较
* * 字符串：按照字典顺序进行比较。按位逐一比较，直到得出大小为止
* 2、类型不同：先进行类型转换，再进行比较
* * ===:全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
*
*/
document.write(3 > 4 + "<br>")
document.write("dbc" > "acd" + "<br>")
document.write(("123" == 123) + "<br>")
// 全等
document.write(("123" === 123) + "<br>")
</script>
5、逻辑运算符
&& || ！
<script>
/**
* 逻辑运算符：
* &&：与（短路）一边为false则为false
* ||：或（短路）一边为true则为true
* ！：非
* * 其他类型转boolean：
* 1、number：0或NaN为假，其他为真
* 2、string：除了空字符串("")，其他都是true
* 3、null&undefined:都是false
* 4、对象：所有对象都为true
*
*/
var flag = true
document.write(flag + "<br>")
document.write(!flag + "<br>")
document.write("<hr>")
//1、number
var num = 3
var num2 = 0
var num3 = NaN
document.write(!!num + "<br>")
document.write(!!num2 + "<br>")
document.write(!!num3 + "<br>")
document.write("<hr>")
//2、string
var str1 = "abc"
var str2 = ""
document.write(!!str1 + "<br>")
document.write(!!str2 + "<br>")
document.write("<hr>")
//3、null & undefined
var obj = null
var obj2
document.write(!!obj + "<br>")
document.write(!!obj2 + "<br>")
document.write("<hr>")
//4、对象
var date = new Date
document.write(!!date + "<br>")
document.write("<hr>")
var obj = "123"
if(obj != null && obj.length > 0){
//防止空指针异常
alert(123)
}
//js中可以这样定义来简化书写
if(obj){
//防止空指针异常
alert(11)
}
</script>
6、三元运算符
？ ：
<script>
var a = 3
var b = 4
var c = a > b ? 1: 0
alert(c)
</script>
6、流程控制语句
1、if.....else.....
2、switch
* 在java中，switch语句可以接受的数据类型：byte int short char，枚举(1.5)，String(1.7)
* switch(变量)：
case 值：
* 在javascript中，switch语句可以接受任意原始数据类型
<script>
var a = undefined;
switch (a){
case 1:
alert("number");
break;
case "abc":
alert("string");
break;
case true:
alert("true");
break;
case null:
alert("null");
break;
case undefined:
alert("undefined");
break;
}
</script>
3、while
4、do.....while
5、for
7、js特殊语法：
<script>
//1、 语句以分号;结尾，如果一行只有一条语句则 ;可以省略（不建议）
var a = 3
alert(a)
/*
2、变量的定义使用var关键字，也可以不使用
* 用var：定义的变量是局部变量
* 不用var: 定义的变量是全局变量
*/
// 定义全局变量
var b
// alert(b)
function fun(){
b = 6
alert(b)
}
fun()
alert("只是b:" + b)
</script>
8、对象
* Function对象：函数对象
//1.创建方式1 var fun1 = new Function("a","b","c","alert(a);") //调用方法 //fun1(3,4) //alert(fun1.length) //2、创建方式2 function fun2(a, b){ alert(a + b); } //fun2(3,4) //alert(fun2.length) //3、创建方式3 var fun3 = function(a,b){ alert(a+b) } //fun3(3,4) //alert(fun3.length) fun2 = function(a,b){ //alert(a-b) alert(a) } //fun2(4,1) //方法调用 //fun2(1,2) //fun2(3) /* 求两个数的和 */ function add(a, b){ return a + b; } var sum = add(1,2) //alert(sum) //求任意个数的和 function add2(){ // alert(arguments[0]); // alert(arguments[1]); // alert(arguments[2]); var sum = 0; for(var i = 0; i < arguments.length; i++){ sum += arguments[i]; } alert(sum) } add2(1,2,4,5)
* Array
// 1、创建方式1 var arr1 = new Array(1,2,4); var arr2 = new Array(5); var arr3 = [1,23,4]; var arr4 = new Array() document.write(arr1 + "<br>") document.write(arr2 + "<br>") document.write(arr3 + "<br>") document.write(arr4 + "<br>") var arr = [1,"abc",true]; document.write(arr[0] + "<br>") document.write(arr[1] + "<br>") document.write(arr[2] + "<br>") arr[10] = "hehe" document.write(arr[10] + "<br>") document.write(arr[9] + "<br>") alert(arr.length) //拼接为字符串 //1、join("") document.write(arr.join("===")+"<br>") //2、push() arr.push(666) document.write(arr.join("==")+"<br>")
* Boolean
* Date
/* Date: 日期对象 1、创建： var date = new Date() 2、方法： toLocalString()：返回当前date对象对应的时间本地字符串格式 getTime(): 获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差 */ var date = new Date(); document.write(date + "<br>") document.write(date.toLocaleString() + "<br>") document.write(date.getTime() + "<br>")
* Math
/** * Math: 数学 * 1、创建 * * 特点：Math对象不用创建，直接使用 Math.方法名() * 2、方法： * random(): 返回0-1之间的一个随机数（含0不含1） * ceil(x) 对数进行上舍入 * floor(x) 对数进行下舍入 * round(x) 把数四舍五入为最接近的整数 * 3、属性： * PI * */ document.write(Math.PI + "<br>"); document.write(Math.random() + "<br>"); document.write(Math.ceil(3.14) + "<br>"); document.write(Math.floor(3.14) + "<br>"); document.write(Math.round(3.14) + "<br>"); /** * 去1-100之间的随机整数 * 1、Math.random()产生随机数： 范围(0,1]小数 * 2、乘以 100 --> [0,99.9999] 小数 * 3、舍弃小数部分 floor ---> [0,99]整数 * 4、 +1 -->[0,99]整数 [1,100] * */ var number = Math.floor((Math.random() * 100)) + 1; document.write(number);
* Number
* String
* RegExp
1、正则表达式：定义字符串的组成规则
1、单个字符：[ ]
如： 【a】【ab】 【a-z】【0-9】
* 特殊符号代表特殊含义的单个字符：
\d: 单个数字字符 [0-9]
\w: 单个单词字符 [a-z A-Z 0-9_]
2、量词符号：
* ：表示出现0次或多次
？：表示出现0次或1次
+：出现一次或多次
{m,n}：表示范围在m-n之间
* m如果缺省：{，n}：最多n次
* n如果缺省：{m，}：最少m次
3、开始结束符号
* ^：开始
* $：结束
2、正则对象：
1、创建
1、var reg = new RegExp("正则表达式")
2、var reg = /正则表达式/
2、方法
test(参数)：验证指定的字符串是否符合正则定义的规范
<script>
var reg = new RegExp("^\\w{6,12}");
var reg2 = /^\w{6,12}$/;
var username = "flypig"
//验证
var flag = reg.test(username)
alert(flag)
</script>
* Global：
1、特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。 方法名（）
2、方法：
encodeURI()：url编码
decodeURI()：url解码
encodeURIComponent()：url编码（编码的字符更多）
decodeURIComponent()：url解码
parseInt()：将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
isNaN()：判断一个值是否为NaN-------------NaN参与的==比较全部为false
eval()：将 Javascript 字符串，并把它作为脚本代码进行执行
<script>
var str = "大飞猪"
var encode = encodeURI(str);
document.write(encode + "<br>")
var s = decodeURI(encode)
document.write(s + "<br>")
var str = "123c1e"
var number = parseInt(str)
//alert(number + 1)
var a = "abc"
document.write(a == NaN)
document.write(isNaN(a))
var jscode = "alert(123)"
eval(jscode)
</script>
浙公网安备 33010602011771号