js基础

≡放荡痞女 提交于 2019-12-04 16:23:43

 

1.使用<script>标签

输出:

      document.write("<h1>标签h1</h1>")  //可以嵌套标签

     <script>

          document.getElementById("pid").innerHTML="hello";

   </script>

2.语法和注释

 js语句向浏览器发出命令

语句之间的分隔符是   ;

按照编写顺序依次执行

js标识符必须以字母,下划线或美元符号开始

js对大小写敏感

注释    单行注释//   多行注释  /* */

3.变量和数据类型

var 

数据类型:字符串(String)数字(Number)布尔(Boolean) 数组(Array) 对象(Object)空(null) 未定义  可以通过赋值为null的方式清除变量

(1)  var arr=[1,2,3,4];

document.write(arr[0]);

(2)  var arr = new Array("hello","nihao","dajiahao" );

document.write(arr[2]);

(3)var arr = new Array();  //动态

arr[0]= 10;

arr[10]=20;

document.write(arr[0]);

4.运算符

(1)js运算符

例:

<p>i = 10,j = 10,i+j = ?</p><p id="sumid"></p><button onclick="mysum()">结果</button><script>    function mysum() {        var  i =10;        var  j = 10;        var m = i+j;        document.getElementById("sumid").innerHTML=m;    }</script>注:++i 先加在运算(赋值),i++先运算在加

字符串运算:任何类型与字符串相加都会转换为字符串类型

比较运算符:返回Boolen类型   ==中  “10” 与 10 返回 true  ,===中  “10” 和 10 返回  false

(2)js条件语句

 if  .....else

switch (i) {

       case 1 :  break ;

       case 2 : break ;

       default :  break ;

          }

(3)js循环语句

for 循环   

 

for ( j in a) { }

while和 do while

(4)js跳转语句

break   跳出当前循环,不在进行下一次循环

continue  跳出本次循环,进行下一次循环,打破循环的迭代

5.函数

(1)定义函数

function 函数名 (a ,b){

      函数体;  (代码块)

}

(2) 调用函数

在<script>标签内调用

在HTML文件中调用

(3)带返回值的函数

return  语句会停止执行(后面的语句不再执行),同时返回值

例:

<p id="pid"></p><script>   function demo (a,b) {       if(a>b){           return "a比较大";       }else {           return "b比较大";       }   }   document.getElementById("pid").innerHTML=demo(100,10);</script>

(4)局部变量 和全局变量(

<script>   var n = 10;m = 10;   //全局变量      function demo() {        var i = 10;  //局部变量  只能在当前函数中使用,在函数外,alert(i),没有输出        x = 10;  //全局变量    }                              demo();   //只有demo()调用后,i销毁了,x才能调用    alert(x);</script>6.异常捕获try{      发生异常的代码块;   }catch(err){       错误信息处理;   }例:
<script>   function demo() {       try{                 //任何情况下都执行           alert(a);       }catch (error) {    //发生错误才执行           alert(error);       }   }   demo();</script>

 

throw语句 :创建一个自定义错误

<body>     <form>         <input id="txt" type="text">         <input id="but" type="button" onclick="demo()" value="按钮">     </form>     <script>        function demo() {           try{               var  e = document.getElementById("txt").value;               if(e == ""){                   throw "用户输入异常";               }           }catch (error) {               alert(error);           }        }     </script></body>

 7.js事件

 onClick   单击事件

<body>   <button onclick="demo()">按钮</button>   <script>       function demo() {           alert("hello")       }   </script></body>

onMouseOver   鼠标经过事件

onMouseOut    鼠标移出事件

例:

<body>    <div class="div" onmouseout="onOut(this)" onmouseover="onvOer(this)"></div>    <script>        function onvOer(ooj) {            ooj.innerHTML = "hello";        }        function onOut(ooj) {            ooj.innerHTML = "world";        }    </script></body>

onChange   文本内容改变事件

<form>    <input type="text" onchange="changeDemo(this)"></form><script>    function changeDemo(bg) {        alert("hello内容改变了");    }</script>

onSelect      文本框选中事件

<form>    <input type="text" onselect="changeDemo(this)"></form><script>    function changeDemo(bg) {        bg.style.background = "red";    }</script>

onFocus      光标聚集事件

<form>    <input type="text" onfocus="changeDemo(this)"></form><script>    function changeDemo(bg) {        bg.style.background = "blue";    }</script>

onBlur       移开光标事件

onLoad       网页加载事件

<body onload="mgs()">    <script>        function mgs() {            alert("网页加载完毕")        }    </script></body>

onUnload    关闭网页事件

8.jsDOM对象

(1)DOM操作HTML

     改变HTML输出流:注意不要再文档加载完成之后使用document.write(),这会覆盖该文档

     寻找元素:通过id    document.getElementById("pid");

                       通过标签名  document.getElementsByTagName("p")//相同元素中的第一个

     改变HTML内容:使用属性innerHTML

     改变HTML属性:使用属性attribute

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!