21JavaScropt基础（语法基础、String、Date、Math对象等）

JavaScript

1.概念

1.概念一门客户端脚本语言：

  • 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

  • 脚本语言：不需要编译，直接就可以被浏览器解析执行了

2功能：可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

 

2.JavaScript与Java的不同（了解）

  1. JS是Netscape公司的产品，Java是Sun公司的产品

  2. JS是基于对象，Java是面向对象。

  3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。

  4. JS是弱类型，Java是强类型。

注：

强类型语言，当你定义一个变量是某个类型，如果不经过代码显式转换（强制转换）过，他就永远是这个类型，如果把它当做其他类型来用，就会报错。

弱类型语言，你想把这个变量当做什么类型来用，就当做什么类型来用，语言的解析器会自动(隐式)转换。

3.JavaScript内容

JavaScript语法基础

使用JS操作网页（DOM）

使用JS操作浏览器（BOM）

html: 负责了一个页面的结构.

css: 负责了一个页面的样式。

javascript： 负责与用户进行交互。

4.语法基础

4.1JavaScript的两种引入方式

1.内部JS：

*定义<sript>,标签体内容就是js代码

<script type = "text/javascript">
    //js代码
</script>script type = "text/javascript">
    //js代码
</script>

2.外部JS：

*定义<sript>,通过src属性引入外部的js文件

<script src= "js/1.js" type="text/javascript"></script>script src= "js/1.js" type="text/javascript"></script>

注意！！

1.<script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序（看需要它先执行还是后执行等）。

2.<script>可以定义多个

<span style="color:#34495e">基本操作：
alert("弹框");
confirm("确认删除吗?");//点击确定返回true否则返回false
prompt("请输入你的名字");//点击确定返回输入的内容否则返回null
parseXXX():转换为某种类型
typeof xx :获取xx的数据类型
window.setinterval( , ):设置定时器</span>

4.2数据类型

1.原始数据类型(基本数据类型)：

  1. number：数字。整数/小数/NaN(not a number,一个不是数字的数字类型)

  2. String ：字符串，单双引号均可，如："abc" "a" 'abc'，无字符类型

  3. boolean：true和false

  4. undefined ：未定义，如果一个变量没有给初始化值，则会被默认赋值为undefined

2.引用数据类型：对象

4.3变量

1.概念：一小块存储数据的内存空间

2.语法：var 变量名 = 初始化值;

3.typeof运算符：获取变量的类型。

注：null运算后得到的是object

4.4运算符

<span style="color:#34495e">1.基本运算符，略
2.逻辑运算符
        //没有单与的。
        document.write((true<span style="color:red">&&true</span>)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
        document.write((true<span style="color:red">&&false</span>)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
        document.write((false<span style="color:red">&&true</span>)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
        document.write((false<span style="color:red">&&false</span>)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
​
        document.write((true||true)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
        document.write((true||false)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
        document.write((false||true)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
        document.write((false||false)+"<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
3.三目运算符
        布尔表达式?值1:值2;</span>

4.5流程控制语句

1.if语句

格式：

if(判断条件){

符合条件执行的代码

}

注意：在javascript中的if语句条件不仅仅可以写布尔表达式，还可以写任何的数据。

  • number 非0为true，0为false

  • String 内容不为空是true，否则是false

  • undefined false

  • Null：false

2.switch（与java中不同）

  • 在java中，switch语句可以接受的数据类型： byte short，int char,枚举(1.5) ,String(1.7)共6种

  • 在JS中可接收任意原始（基本）类型的数据

3.while

4.do...while

5.for

4.6函数

function 函数名(形参列表){

函数体 ;

}

细节：

1.形参是不能使用var关键字声明变量的，直接写参数即可。

2.定义时，不需要写返回值类型。若需要返回值，直接在函数体中return即可

3.JS中没有重载概念，后定义的重名函数会覆盖前面定义的

5.基本对象

5.1 String对象

1.两种创建方式：

  • new String("字符串内容");

  • var str = "字符串内容";

2.常用方法：

  • anchor() 锚(mao)点,建立一个标识，可以从别处跳到此处

  • charAt() 返回指定索引位置处的字符

  • fontcolor() 把带有color属性的一个HTML<font>标记放置在String对象中的文本两端。也就是说，将此文本插入了<font color = ""></font>内

  • indexOf() 返回 String 对象内第一次出现子字符串的字符位置

  • italics() /ɪˈtælɪks/。 把 HTML <I> 标记放置在 String 对象中的文本两端。 也就是将字体变斜

  • link() 把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。即设置超链接

  • replace() 返回根据正则表达式进行文字替换后的字符串的复制

  • split() 切割

  • Substr(a,b) 截取子串，第一个参数表示下标，第二个参数表示长度

  • toUpperCase() 转大写

  • toLowerCase 转小写

<span style="color:#34495e">//锚(mao)点，建立一个标识，可以从别处跳到此处
            document.write("钢铁是怎样炼成的：第一章".anchor("one") + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">></span>");
            //浏览器解析：<span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">name</span>=<span style="color:#22a2c9">"one"</span><span style="color:#117700">></span>钢铁是怎样炼成的：第一章<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
            
            document.write("<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">></span>");
            
            document.write("abc".charAt(0) + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
            
            //fontcolor() 把带有color属性的一个HTML<span style="color:#117700"><</span><span style="color:#117700">font</span><span style="color:#117700">></span>标记放置在String对象中的文本两端
            //也就是说，将此文本插入了<span style="color:#117700"><</span><span style="color:#117700">font</span> <span style="color:#0000cc">color</span> = <span style="color:#22a2c9">""</span><span style="color:#117700">></</span><span style="color:#117700">font</span><span style="color:#117700">></span>内
            document.write(("一句话").fontcolor("red") + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
            //浏览器解析<span style="color:#117700"><</span><span style="color:#117700">font</span> <span style="color:#0000cc">color</span>=<span style="color:#22a2c9">"red"</span><span style="color:#117700">></span>一句话<span style="color:#117700"></</span><span style="color:#117700">font</span><span style="color:#117700">></span>
            
            document.write(("abcdefg").indexOf("f") + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
            
            //italics()   /ɪˈtælɪks/
            // 把 HTML <span style="color:#117700"><</span><span style="color:#117700">I</span><span style="color:#117700">></span> 标记放置在 String 对象中的文本两端。 
            document.write(("意大利斜体").italics() + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
            
            //  把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
            //即设置超链接
            document.write(("百度一下").link("http://www.baidu.com") + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
            
            document.write("abcd".replace("a","A") + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">></span>");//
            document.write("abcdefg".substr(0,3) + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">></span>");//包前不包后
        
            var str = "a-b-c-d-e-f";
            var strArr = str.split("-");
            for(var i = 0; i <span style="color:#117700"><</span> <span style="color:#117700">strArr.length;</span> <span style="color:#0000cc">i++){</span>
                <span style="color:#0000cc">document.write(strArr[i]);</span>
            <span style="color:#0000cc">}</span>
            <span style="color:#0000cc">document.write(</span><span style="color:#22a2c9">"<br>"</span><span style="color:#0000cc">);</span>
​
        <span style="color:#0000cc">document.write(</span><span style="color:#22a2c9">"abcd"</span><span style="color:#0000cc">.toUpperCase()</span> <span style="color:#0000cc">+</span> <span style="color:#22a2c9">"<br>"</span><span style="color:#0000cc">);</span>
        <span style="color:#0000cc">document.write(</span><span style="color:#22a2c9">"ABCD"</span><span style="color:#0000cc">.toLowerCase()</span> <span style="color:#0000cc">+</span> <span style="color:#22a2c9">"<br>"</span><span style="color:#0000cc">);</span></span>

5.2Date对象

<span style="color:#34495e">    var date = new Date();
    document.write(date.getFullYear() + "年" + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
document.write((date.getMonth() + 1) + "月" + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
    document.write(date.getDate() + "日" + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
    document.write(date.getHours() + "时" + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
    document.write(date.getMinutes() + "分" + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
    document.write(date.getSeconds() + "秒" + "<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span>");
getDay:获取周中的第几天
getDate:获取月份中的第几天</span>

5.3Math对象

ceil 向上取整

floor（） 向下取整

random() 随机数方法 // 产生的伪随机数介于 0 和 1 之间（含 0，不含 1），

round 四舍五入

5.4数组对象

1.创建数组

方式1：

var 变量名 = new Array(); 创建一个长度为0的数组。

方式2：

var 变量名= new Array(长度) 创建一个指定长度的数组对象。

方式3：

var 变量名 = new Array("元素1","元素2"...); 给数组指定元素创建数组的对象。

方式4：

var 变量名 = ["元素1","元素2"...]; 注意此处是中括号

注意： 在javascript中数组的长度是可以发生变化的，根据你插入的值动态变化，不受定义长度的限制。

2.四个常用方法(两删一增一翻转)：

pop ：移除数组中的最后一个元素并返回该元素。，类似于栈

push：在末尾追加一个新元素，并返回此时的数组新长度，类似于栈

reverse：翻转数组的元素

shift：移除数组的第一个元素，并返回该元素

5.5自定义对象（了解）

在javascript没有类的概念，只要有函数即可创建对象

方式1：使用无参的函数创建的对象

function Person(){}
 var p = new Person(); //创建了一个Person对象了
 p.id = 110;
    p.name = "狗娃";
​
 var p = new Person(); //创建了一个Person对象了
 p.id = 110;
    p.name = "狗娃";
​

方式2：使用有参的函数创建（类似于java中的构造函数）

function Person(id,name){
    this.id = id;
    this.name = name;   
    this.say = function(){
    alert(name+"呵呵");   
    }
}
​
    this.id = id;
    this.name = name;   
    this.say = function(){
    alert(name+"呵呵");   
    }
}
​

方式3：使用Object创建对象（类似于第一种）

var p = new Object();
p.id = 110;
p.name = "铁蛋";

方式4：使用字面量的方式创建（了解）

var p = {
	id:110,
	name:"狗娃",
	say:function(){
	alert(this.name+"呵呵");	
	}	
}

 

6.面试题（！=，==，！==，===的用法和区别）

<span style="color:#34495e">	var num = 1;
	var str = '1';
	var test = 1;

	document.write(test == num); //true　相同类型　相同值    （等于，只比较值，类型不同的，会先转换）
	document.write(test === num);//true　相同类型　相同值	（绝对等于，即比较类型，又比较值）
	document.write(test !== num);//false test与num类型相同，其值也相同,　非运算肯定是false


	document.write(num == str);  //true 　把str转换为数字，检查其是否相等。
	document.write(num != str);  //false  == 的 非运算
	document.write(num === str); //false  类型不同，直接返回false
	document.write(num !== str); //true   num 与 str类型不同 意味着其两者不等　非运算自然是true。

//== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。

</span>

每日问题：

1.引入js文件的方式

    两种

2.弹出提示框

    alert("内容")；

3.弹出带有确定取消的提示框

    var flag = confirm("是否……")； 点击确定为true，点击取消为false

4.弹出可以输入内容的提示框

    var input = prompt("请输入内容")； 可以获取到用户输入的内容

5.如何查看变量的类型

    typeof

6.isNaN()方法的作用

    是数字返回false 不是返回true

7.if(20){ alert("成立"); }else{ alert("不成立")； } 以上代码执行什么，将20换为 "abc"将执行什么？

    成立 非0为true 非null为true

8.使用js编写一个函数，使用for循环计算m-n的所有数之和，m和n作为形参

    function sum(m,n){ var sum = 0; for(var i = m;i <= n; i ++){ sum+= i; } return sum; }

9.getDate()和getDay(）方法的作用

    获取一个月中的第几天

    一周中的第几天

10.var a="20"; var b=20; document.write(a==b); document.write(a===b); 结果是什么？

    true false

posted on 2020-09-17 21:45  zitian246  阅读(112)  评论(0)  编辑  收藏  举报
Copyright © 2024 zitian246
Powered by .NET 8.0 on Kubernetes Powered By: 博客园