JS（笔记）

本文主要是介绍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>

这篇关于JS（笔记）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！