开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS（笔记） -> 正文阅读

[JavaScript知识库]JS（笔记）

1.为什么学习JS

1.实现动态效果
?
2.减轻服务器压力

2.JS定义

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。
1.js是一种基于对象的语言(面向对象)
2.js一种弱语言(很重要！)<解释>java语言： a = 123;//编译报错--》java是强语言(格式严格规范)
js语言：a = 123; a = "我是中国人";//没有任何问题--》js是弱语言--（格式很多情况下没有规范）.
3.JS是一种客户端脚本语言，可以在浏览器之上单独运行的语言。

3.JS组成

1.ECMAScript
2.DOM
3.BOM

4.JS基本结构-HelloWorld

<script type="text/javascript">
    document.write("初学JavaScript");
 ?  document.write("<h1>Hello，JavaScript</h1>");
 ?  //window.document.write("<h1>Hello，JavaScript</h1>");（这里省略了一个window）    //document.document.write("<h1>Hello，JavaScript</h1>");（document是奖字符串贴在网页文本上来显示的）
 ?  //（一般window可省略，document不可省略）
</script>

5.JS执行原理

6.JS引用方式

6.1内部引入

<script type="text/javascript">
</script>

6.2外部引入（目前来说是最重要的）

<script src="" type="text/javascript"></script>
解析：现在js文件夹下创建——文件名.js  文本写上 documen write（“HellowWord”）
 ? ? 在html页面内引入，代码为<script src="" type="text/javascript"></script>

6.3标签内部引入（调试很重要）

<input type="button" value="点击" οnclick="javascript:alert('呵呵');"/>
解析：如果出现了定义上或者是其他的错误，在浏览器上用F12再进行代码触发后可以及时的去发现问题。

7.JS核心语法

7.1变量

(1)先声明变量再赋值

var width;
width = 5;
解析：var a="字符串";
 ?  alert("第一次打印"+typeof(a));<第一次打印的是String类型>
 ?  var a=123;
 ?  alert("第二次打印变量a"+typeof(a));<第二次打印的是anumber类型>
 ?  <typeof打印在标签上的是类型，而不是变量的值>

(2)同时声明和赋值变量(企业专用)

var width = 5;

(3)不声明直接赋值（不推荐）

width=5;

7.2数据类型

(1) undefined

变量被声明后，但未被赋值

<script type="text/javascript">
            var width;
            alert(width);
</script>
解析：结果是undefined

(2) null

<script type="text/javascript">
            var width;
            alert(width == null);
</script>
解析：结果是ture

(3) number

true或false

<script type="text/javascript">
             var a = 23;
             var b = 23.0;
             alert(typeof(a));
             alert(typeof(b));
</script>
解析：结果是anumber

(4) boolean

true或false

<script type="text/javascript">
             alert(1 == 2);
             alert(1 == 1);
</script>
解析：结果是true或false

(5) string

用单引号或双引号来声明的字符串

<script type="text/javascript">
              var s1 = "hehe";
              var s2 = 'haha';
              alert(typeof(s1));
              alert(typeof(s2));
</script>
解析：结果是String

7.3语法详解

(1)string

alert(s1.length);<显示的是长度>
alert(s1.charAt(1));<返回的是一个字符，脚标从0开始>
alert(s1.indexOf("JavaScript"));<从定义的里面检索>
alert(s1.substring(3,6));<从第三个开始取到第六个，第六个取不到，只能取前一个>
alert(s1.split(" "));<间隔>

(2)数组

A.创建数组

第一种方式

var array = new Array(5);
array[0] = 2;
array[1] = 3;
array[2] = "32";
array[7]=23;
alert(array.length);
解析：遍历长度的术后会出现8个，超出了范围，前面的定义可以当放屁，JS就是这么的随意。

第二种方式

var array = [];
array.push(1);
array.push(3);
array.push(9);

B.遍历数组

第一种方式（传统for循环）

for(var i = 0;i<array.length;i++){
    document.write(array[i]);
}

第二种方式（增强for循环）

for(var o in array){
    document.write(array[o]);
}

C.数组常用属性方法

属性：length
方法：join(),push()

7.4企业常用控制语句

if else语句
for语句

7.5注释

alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框

7.6输入/输出

alert()
代码案例：alert("你会Java吗？如果会请入职，如果不会请离职!!!");
?
var flag = prompt("提示信息","输入框的默认信息");
alert(flag);
代码案例： ?  var a = prompt("你会Java吗？","会")
 ?  if(a<给个返回值>){
 ? ? ?  alert("请入职！！！");
 ?  }else{
 ? ? ?  alert("请面试下一家公司。");
 ?  }
代码案例：var str=parseInt（“123”）;
 ? ? ? ? alert(isNaN(str));
 ? ? ? ? //解析：是否是非数字  运行为false
 ? ? ? ? //注意：双重否定表肯定
代码案例： var str=parseInt("123abc");
 ? ? ? ? alert(str);
 ? ? ? ? 解析：输出的一定是数字

7.7函数

(1)常用系统函数

parseInt("86")//将字符串“86”转化为了number类型<在JS中只要看到parseInt都会转换成Int类型>
parseFloat("34.45")
isNaN():用于检查其参数是否是非数字
代码解析：var str1=parseInt("86");//string类型
 ? ? ? ? var str2=3;
 ? ? ? ? var sum=str1+str2;//如果字符串那里不加parseInt进行转换则会报错
 ? ? ? ? alert(sum);

(2)自定义函数

A.有名函数(用的较多)

function haha(){
    alert(HellowWord);
}
haha();
<body>
 ?  <input type="button" value="点击" οnclick="haha()"/>
</body>
?
?

B.匿名函数

 var a = function(){
 ? ? alert(234);
 }
 a();

8.调试工具

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
    if(i==3){
 ? ? ? ? break;
 ? ? }
  document.write("这个数字是："+i+"<br/>");
}
</script>

9.拓展

特殊案例：
<script type="text/javascript">
 ? ? ? var a = [];
 ? ? ? if(a instanceof Array){
 ? ? ? ? ? alert("数组类型");
 ? ? ? }
</script>

? ? ? ? ? ? ? ?第二章

1.BOM的定义

BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

2.BOM的组成部分

3.window对象常用方法

3.1 winow.confirm()

显示一个带有提示信息、确定和取消按钮的对话框 
var flag = confirm("确认要删除此信息吗？");
if(flag){
    alert("删除成功");
}else{
    alert("你取消了删除");
}
?
 ?  var flag=window.confirm("你确认启明是架构吗？");
 ?  if(flag){
 ? ? ?  window.alert("请叫我周架构！！！");
 ?  }else{
 ? ? ?  window.alert("请叫我周开发！！！");
 ?  }

3.2 winow.open()

打开一个新的浏览器窗口，加载给定 URL 所指定的文档
<html>
    <head>
        <meta charset="UTF-8">
        <title>333</title>
        <script type="text/javascript">
            function ab(){
                window.open("demo03.html"); 
            }           
        </script>
    </head>
    <body>      
        <input type="button" οnclick="ab()" value="触发"/>
    </body>
</html>
==============================================================
?
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        demo03.html.....
    </body>
</html>
?

3.3 winow.prompt()

显示可提示用户输入的对话框
代码案例：
 ? function a(){
 ? ? ?  var flag=window.prompt("柳岩，在吗？");
 ? ? ?  if(flag=="我在"){
 ? ? ? ? ?  alert("我在");
 ? ? ?  }else{
 ? ? ? ? ?  alert("我去找杨幂！");
 ? ? ?  }
 ?  }

3.4 winow.alert()

显示带有一个提示信息和一个确定按钮的警示框 
代码案例： ? function a(){
 ? ? ?  var flag=window.alert("柳岩，在吗？");
 ?  }

4.history对象<对历史记录进行前进和后退的操作>

back()	加载 history 对象列表中的前一个URL,等价于history.go(-1) =>"浏览器后退"
forward()	加载 history 对象列表中的下一个URL,等价于history.go(1)=>"浏览器前进"
go()	加载 history 对象列表中的某个具体URL

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        demo05.html...
        <a href="javascript:window.history.back()">返回</a>
        <a href="javascript:window.history.go(-1)">返回</a>
    </body>
</html>
?

5.location对象<跳转>

设置或返回完整的URL
?
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="javascript:window.location.href='demo05.html'">触发</a>
    </body>
</html>

6.document对象

6.1 常用属性referrer (返回载入当前文档的URL)

判断页面是否是链接进入
?
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var url = document.referrer;
            if(url==""){
                alert("不是跳转进来的。");  
            }else{
                alert("跳转进来的。");
            }
        </script>
    </head>
    <body>
        demo07.html...
    </body>
</html>

6.2常用方法

getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合

案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
?
<p name="a">单击按钮来改变这一段中的文本。</p>
<p name="a">单击按钮来改变这一段中的文本。</p>
<p  >单击按钮来改变这一段中的文本。</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction(){
    alert(document.getElementsByTagName("p").length);
};
?
</script>
?
</body>
</html>

6.3全选功能(极其重要！)

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function checkFather(){              
                var father = document.getElementById("father");
                var sons = document.getElementsByName("son");
                for(var i=0;i<sons.length;i++){
                    sons[i].checked = father.checked;
                }               
            }
            
            function checkSon(){
                var father = document.getElementById("father");
                var sons = document.getElementsByName("son");
                //定义一个变量，设置为标记
                var flag = true;
                //遍历儿子的DOM列表元素
                for(var i=0;i<sons.length;i++){
                 ? ? //如果儿子的DOM列表中有一个未打勾
                    if(sons[i].checked==false){
                    //flag设置为false<将父级元素设置为未打勾的状态>
                        flag = false;
                        //但凡子级DOM元素列表中有一个未打勾的状态，父级元素直接为未打勾状态，并且循环遍历直接退出
                        break;
                    }
                }
                //如果儿子DOM列表元素中都是打勾的状态，那么父级元素的列表也为打勾状态
                father.checked=flag;
            }
        </script>
    </head>
    <body>
        全选:<input type="checkbox" id="father" οnclick="checkFather()" /><br />
        <input type="checkbox" name="son" οnclick="checkSon()"/><br />
        <input type="checkbox" name="son" οnclick="checkSon()" /><br />
        <input type="checkbox" name="son" οnclick="checkSon()" /><br />
        <input type="checkbox" name="son" οnclick="checkSon()" /><br />
         
    </body>
</html>
?

7.JavaScript内置对象

7.1 Date对象

var  date=new Date(); ? //返回当前日期和时间

getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    <script type="text/javascript">
         
            var date = new Date();
            var hh = date.getHours();
            var mm = date.getMinutes();
            var ss = date.getSeconds();
            alert("时:"+hh+"分:"+mm+"秒"+ss);
    </script>
    </head>
    <body>
         
         
    </body>
</html>

7.2 Math对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
        //向上取整
            document.write(Math.ceil(25.1)+" ");
            //向下取整
            document.write(Math.floor(26.9)+" ");
            //四舍五入
            document.write(Math.round(24.5)+" ");
            //随机数
            document.write(Math.random());
        </script>
    </head>
    <body>
    </body>
</html>