javaScript基础笔记

javaScript

javascript基础

概念:客户端脚本语言

​ 运行在客户端浏览器中没一个浏览器都有javaScript的解析引擎

​ 脚本语言:不需要编译,直接被浏览器解析执行

功能:

​ 可以增强用户与html交互的过程,可以控制html元素,让页面有一些动态的效果,增强用户的体验

javaScript发展史:

​ 1.1992年,Nombase公司,开发出第一门脚本语言,用于表单验证。命名为C–,后来更名为:ScriptEase

​ 2.1995年,Netscape(网景)公司,开发一门客户端脚本语言:LiveScript。后来,请来sum公司,修改liveScript命名javaScript

​ 3.1996,微软抄袭javaScript开发出JScript语言

​ 4.1997,ECMA(欧洲计算机制造商协会),ECMAScript,就是所有客户端脚本语言的标准

​ javaScript = ECMAScript + javaScript自己特有的东西(BOM+DOM)

​ ECMAScript:客户端脚本语言的标准

1.基本语法
1.与html结合方式
1.内部js

​ 定义

2.外部

​ 定义

注意

​ 1.

​ 2.

<!--    内部-->
    <script>
        alert("hellow")
    </script>
<!--    外部-->
    <script src="a.js"></script>
2.注释

​ 单行//

​ 多行/**/

3.数据类型

​ 1原始数据类型(基本数据类型):

​ 1.number:数字、整数、小数、Nan(not a number)

​ 2.string:字符串。字符/字符串 “abc” ‘abc’

​ 3.boolean:true和false

​ 4null:一个对象为空占位符

​ 5undefined:为定义。如果一个对象没给初始化值,就会默认赋值为undefined

​ 2引用数据类型:对象

4.变量

​ 变量:一小块存储的内存空间

​ java语言是强类型 ,js弱类型

​ 强类型:在开辟变量存储空间时,定义了空间将来存储数据的数据类型。只能存储固定类型的数据

​ 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型。可以存放任意类型的数据

语法:

​ var 变量名 = 初始化值;

​ typeof运算符:获取变量的类型。

​ 注:null运算符得到的是object

5.运算符
1.一元运算符,只有一个运算数的运算符

​ ++ --,+(正号)

​ ±号注意:在js中,如果运算不是运算符的类型,那么js引擎会自动将运算符进行类型转换

​ 其它类型转number

​ 字符串转number按照字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)

​ boolean转number:true转为1,false转为0

var b = +"123";
alert(b)
2.算数运算符
+ - * / % ...
3.赋值运算符

​ = += -+ …

4.比较运算符

​ >< >= <= == ===(全等于)

<script>
    /**
     * 比较运算符
     *      比较方式
     *      1.类型相同:直接比较
     *      字符串:按照字典顺序比较,按位逐一比较,直到得出大小为止。
     *      2.类型不同先进行类型转换,再比较
     *      "===":全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
     *
     */
    document.write(3>4+"<br>")
    document.write("abc">"acd"+"<br>")
    document.write(("123"==123)+"<br>")
</script>
5.逻辑运算符

​ && || !

<script>
    /*
    * 逻辑运算符
    * &&:与(短路)
    * ||或(短路)
    * !:非
    *   *其它类型转boolean
    *   1.number 0或NaN为假,其他为真
    *   2.string除了空字符串(""),其他都是true
    *   3null&undefined:都是false
    *   4.对象:所有对象都为true
    * */
    var flag = true;
    document.write(flag+"<br>")
    document.write(!flag+"<br>")
    document.write("<hr/>")
    var flag = 3;
    document.write(!!flag+"<br>");
    document.write("<hr/>")
    var str1 = "abc";
    var str2 = "";
    document.write(!!str1+"<br>");
    document.write(!!str2+"<br>");
    document.write("<hr>")

    var obj = null;
    var obj2;
    document.write(!!obj+"<br>");
    document.write(!!obj2+"<br>");
    document.write("<hr>")
    // if(obj!=null){//防止空指针异常
    //
    // }
    //简化的
    if(obj){

    }
</script>
6.三元运算符
?:表达式
<script>
    var a = 3;
    var b = 4;
    var c = a>b?1:0
    document.write(c)
</script>
语法:
表达式?值1:值2
判断表达式的值,如果是true则取值1,如果是false则取值2
6.流程控制语句:

​ 1.if …else…

​ 2.switch:

​ 在java中switch可以接收的数据类型:byte int short char 枚举(1,5),Stirng(1,7)

​ switch(变量):

​ case 值:

​ 在js中可以接收任意数据类型

​ 3.while

​ 4.do…while

​ 5for

7.js特殊语法
<script>
    //1.语句以分号结尾,如果一行只有一条语句,则可以省略(不建议)
    var a = 3;
    alert(a);

    /*
    2.变量定义使用var关键字,也可以不使用
    用,定义变量是局部
    不用,定义的是全局(不建议)
     */
    //2.

    // b = 4;
    // alert(b);
    function f() {
        b = 4;
        alert(b);
    }
    f();
    alert(b)
</script>
<body>
九九乘法表
<script>
    document.write("<table align='center'>")
    for (var i = 1; i <=9 ; i++) {
        document.write("<tr>")
        for (var j = 1; j <i ; j++) {
            document.write("<td>")
        //输出
            document.write(i+"*"+j+"="+(i*j)+"&nbsp");
            document.write("</td>")
        }
        //输出换行
        // document.write("<br>")
        document.write("</tr>")
    }
    document.write("</table>")
</script>
<style>
    td{
       border: 1px solid;
    }
</style>		
2.基本对象
Function对象:函数对象
<script>
    /*
    Function函数(方法)对象
    1.创建
        1.var fun = new Function(形式参数列表,方法体)//不适用
        2.function 方法名称(形式参数列表){
            方法体
        }
        3.var 方法名 = function(){}
    2.方法
    3.属性
        length:代表形参的个数
    4.特点
        1.方法定义时候形参类型不用写
        2.方法是一个对象如果定义一个名称相同的方法,会覆盖
        3.在js中,方法的调用只与方法的名称有关,和参数列表无关
        4.在方法声明中有一个内置对象(数组),arguments,封装所有实际参数
    5.调用
        方法名称(实际参数列表)
     */

    //1.创建方法1
    // var fun1 = new Function("a","b","alert(a);")
    //2.调用方法
    // fun1(3,4)
    
    //2.方式2
    // function fun2(a,b) {
    //     alert(a+b);
    // }
    // fun2(3,4);
    
    //3.方法3
    // var fun3 = function (a,b) {
    // alert(a+b);
    // }
    // fun3(3,4)
    
    /*
    求两个数的和
     */
     
    // function  add(a,b) {
    //     return a+b;
    // }
    /*
    任意个数和
     */
    function add() {
    var sum = 0;
        for (var i = 0; i < arguments.length; i++) {
            sum +=arguments[i];
        }
        return sum;
    }
    var sum = add(1,2,3);
    alert(sum);
</script>
Array
<script>
    /*
    Array数组对象
    1.创建
        1.var arr = new Array(元素列表);
        2.var arr = new Array(默认长度);
        3.var arr =[元素列表]
    2.方法
        join():将元素数组元素拼接成字符串
        push():向数组的末尾添加一个或更多元素,并返回新的高度
    3.属性
    4.特点
        1.js中元素的类型是可变的
        2.js元素中长度可变
     */
    var arr1 = new Array(1,2,3);
    var arr2 = new Array(5);
    var arr3 = [1,2,3,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+"<br>");
    document.write(arr[0]+"<br/>")
    document.write(arr[1]+"<br/>")
    document.write(arr[2]+"<br/>")
    document.write(arr.join("--")+"<br>")
    arr.push(11);
    document.write(arr.join("--")+"<br>")
</script>

​ Boolean

Date
<script>
    /*
    Date日期对象
        1.创建:
        var Date = new Date()
        2.方法
            tolocaleString(),返回当前date对象对应的时间本地字符串格式
            getTime(),获取毫秒值,返回当前时间对象描述的时间到1970年1月1日零点的毫秒值差
     */

    var date = new Date();
    document.write(date+"<br>");
    document.write(date.toLocaleString()+"<br>")
    document.write(date.getTime()+"<br>")
</script>
Math
<script>
    /*
    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(100)+"<br>")
    document.write(Math.round(3.14)+"<br>")
    document.write(Math.cell(3.14)+"<br>")
    document.write(Math.floor(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.round()*100))+1
    document.write(number)
</script>

​ String

RegExp
1.正则表达式:字符串组成规则
1.定义单个字符:[]	
如:[a]	[ab]	[a-zA-Z0-9_]
	*特殊符号代表特殊含义的单个单词
	\d单个数字字符[0-9]
	\w单个单词字符[a-zA-Z0-9_]
2.量词符号:
	?表示出现0次或1次
	*表示出现0次或多次
	+出现1次或多次
	{m,n}表示m<=数量<=n
	*m如果缺省:{,n}最多n次
	*n如果缺省:{m,}最少m次
3.开始结束符号
*^:开始
*$:结束
2.正则对象
<script>
    /*
    1.创建
         1.var reg = new RegExp("\w(6-12)");(注意:注意用第一种注意转义)
         2.var reg2 = /w(6,12)/;
    2.方法
        1.test(参数):验证指定字符串是否符号规范
     */

    var reg = new RegExp("\w(6-12)");
    var reg2 = /w(6,12)/;
    // alert(reg)
    // alert(reg2);
    var username = "zhangsan";
    var flag = reg2.test(username)
    alert(flag)
</script>
Global
1.特点:全局对象,这个Global中封装的方法不需要对象就可以创建就可以直接调用。方法名();
2.方法
   1.特点:全局对象,这个Global中封装的方法不需要对象就可以创建就可以直接调用。方法名();
     2.方法
            encodeURI():url编码
            decodeURI():url解码
            encodeURIComponent():url编码
            decodeURIComponent():url解码
        3.URL编码
        传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2(浏览器地址值数据)
        4.parseInt():将字符串转数字为止,将前边数字部分转为number
            *逐一判断每一个字符是否是数字,直到不是数字
        5.isNam():判断一个值是不是NaN
            *NaN六亲不认,连自己都不认,NaN参与的比较
        6.eval():将javaScript字符串,把它作为脚本代码来执行
<script>
    var str = "http://www.baidu.com?wd=传智播客";
    var encode = encodeURI(str);
    document.write(encode+"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
    var a = decodeURI(encode+"<br>");
    document.write(a+"<br>")//传智播客

    var str1 = "http://www.baidu.com?wd=传智播客";
    var encode = encodeURIComponent(str1);
    document.write(encode+"<br>");//%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
    var a1 = decodeURIComponent(encode+"<br>");
    document.write(a1+"<br>")//传智播客
    var str = "123abc";
    var number = parseInt(str);
    alert(number+1)
    var a = "NaN";
    document.write(a==NaN);
    document.write(isNaN(a))
    var jscode = "alert(123)";
    eval(jscode);
</script>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏来梦栀子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值