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>