初识JavaScript

Posted 我可不是隔壁的老王

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识JavaScript相关的知识,希望对你有一定的参考价值。

技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>初识JS</title>
    <!--
      javascript:
       组成:
           01.ECMAScript描述了js语言的语法和基本的对象!
           02.DOM(文档对象模型)描述了处理网页内容的方法和接口
           03.BOM(浏览器对象模型)描述了与浏览器进行交互的方法和接口
      特点:
          01.无需预编译        弱语言类型
          02.运行在客户端      减轻服务器压力

      网页中引入css和js文件的顺序!
       css引入在head标签中! 目的就是在用户看到页面的时候有样式!
       js引入在body标签中的对下面!目的是 在交互过程中,确保所有的内容加载完毕!
    -->
</head>
<!--01.行内 onload="alert(‘大家辛苦了1!‘);alert(‘大家辛苦了2!‘);"-->
<body>


<!-- 02.内部-->
<script type="text/javascript">
     /* alert("大家辛苦了!");*/
</script>

<!--03.外部样式引入-->
<script type="text/javascript" src="js/alert.js"></script>
</body>
</html>
初识JS
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基本事件</title>
</head>
<body>
<!--
 javascript:  伪协议!
  当我们运行到javascript:  的时候,程序会先执行对应的js代码!之后再操作!
  无论是超链接还是提交按钮,都不会立即执行!
 -->
  <a href="javascript:">跳转</a>  <br/>
  <input type="button"  value="普通按钮" onclick="javascript:alert(‘你说可以‘);"> <br/>

 <input  type="text" placeholder="请输入用户名" on  onblur="javascript:alert(‘失去焦点‘);">
<!--
onfocus="javascript:alert(‘获取焦点‘);"
-->
</body>
</html>
基本事件
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
<!--
     undefined :只声明了变量,但是没有赋予初始值,就是undefined
             //声明变量
             var  myName;
            alert("姓名是:"+myName); //name什么都没有
            alert("name的数据类型是:"+(typeof(myName)));


     null:空值,不存在的对象 等于undefined
           alert(null==undefined);

    number:包含了整数和浮点数
           alert("20的数据类型:"+typeof(20));
           alert("20.5的数据类型:"+typeof(20.5));
   booleantruefalse
        alert(typeof(TRUE));  // 把TRUE当成了一个变量 所以输出 undefined
        alert(typeof(true));
        alert(typeof("true"));  //string

  string :被单引号或者双引号引起来的文本
          alert(typeof(‘a‘));
          alert(typeof("a"));

  object:js中的对象,包含数组,对象和null
            var arr1=new Array(1,2,3);
            var arr2=new Array("小黑","小白");
            var  arr3=[];
                arr3[0]=1;
                arr3[1]=12.2;
                arr3[2]="小黑"; //可以存放不同的数据类型

alert("arr3的数据类型"+typeof(arr3));
alert("arr3的第3个元素"+arr3[2]);
alert("null的数据类型"+typeof(null));
var date=new Date();
alert("date的数据类型"+typeof(date));
   -->


<script type="text/javascript">



</script>
</body>
</html>
数据类型
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>输入和确认</title>
</head>
<body>

<!--
    alert("大家\n辛苦了");  // \n是换行
      alert:是一个提示框,具有确定按钮!
    confirm:是一个提示框,具有确定和取消按钮!
    prompt:是一个对话框,有两个参数
           01.第1个参数,是提示语
           02.第2个参数,是输入框的默认值 , 可以省略此参数
-->
  <script type="text/javascript">

    var flag=  confirm("你想迎娶白富美吗?");
    if(flag){  //用户点击的是确定
       var answer=  prompt("你月收入多少呀?","请输入收入"); //获取用户的输入
        document.write("您的收入是:"+answer);
    }else{
        alert("你就一屌丝!")
    }


  </script>

</body>
</html>
输入和确认
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
    var  num1="123.45a",num2="a123.45";
    /*
     * parseInt():前提字符串第一个位置必须是数字,直到遇到 . 或者 非数字时 返回     得到整数
     * parseFloat():前提字符串第一个位置必须是数字 直到遇到  非数字时 返回            得到浮点数
     */
    document.write(parseInt(num1)+"<br/>");
    document.write(parseInt(num2)+"<br/>");  //NaN  说明不是一个数字
    document.write(parseFloat(num1)+"<br/>");
    document.write("<hr/>");
    /**
     * 强制类型转换
     * Boolean():里面的参数 只要不是false,0,null,undefied,空,NaN,未定义的变量 之外  都会返回true
     * Number(): 是把整个字符串 作为 参数之后进行强制类型转换 !  要确保参数是 数值类型 或者boolean    true=1  false=0;
     * String()
     */
    document.write(Boolean(true)+"<br/>");
    document.write(Number(num1)+"<br/>");
    document.write(String(typeof (num1))+"<br/>");
    alert(typeof 1);
    alert(typeof (1)); //推荐使用

</script>

</body>
</html>
类型转换
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>常用的运算符</title>


</head>
<body>
<script type="text/javascript">
    /**
     * 常用的运算符
     */
    document.write("+运算:"+(5+5)+"<br/>");
    document.write("-运算:"+(5-5)+"<br/>");
    document.write("*运算:"+(5*5)+"<br/>");
    document.write("/运算:"+(5/5)+"<br/>");
    //  %   取余
    var num=3;
    /*
     ++在变量前  先自身加1  之后参与运算
     ++在变量后  先参与运算   之后自身加1
     */
    document.write("%运算:"+(5%3)+"<br/>");
    document.write("++运算:"+(num++)+"<br/>");
    document.write("--运算:"+(num--)+"<br/>");
    document.write("--运算之后:"+(num)+"<br/>");


</script>

</body>
</html>
常用的运算符
技术分享
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>switch</title>

</head>
<body>



<script type="text/javascript">
    var  num=window.prompt("请问:今天周几?"); //让用户输入整数
    switch (parseInt(num)){  // 因为用户输入的是字符串  要么 case "1"  要么 parseInt(num)
        case 1:
            alert(1);
            break;
            alert(111); // 没有意义  但是不会报错
        case 2:
            alert(2);
            break;
        case 3:
            alert(3);
            break;
        default :
            alert("default");
    }


</script>
</body>

</html>
switch
技术分享
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>break,continue</title>
</head>
<body>
<script type="text/javascript">
    for(var i=0;i<=5;i++){  //break
        if(i==5) break;
        document.write(i+"<br/>");
    }
    document.write("<hr/>");
    for(var i=0;i<=5;i++){  //continue
        if(i==3)continue;
        document.write(i+"<br/>");
    }

</script>
</body>

</html>

07.break,continue
break,continue
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>== 和 ===</title>
</head>
<body>

<!--
== :在比较的时候,会把相对来说复杂的类型转换成简单类型之后  比较两个变量的值
===:先比较两个变量的数据类型,如果数据类型一致,再比较值!
-->
<script type="text/javascript">
    var  num1=5;
    var  num2="5";
    document.write("num1==num2:::"+(num1==num2)+"<br/>");
    document.write("num1===num2:::"+(num1===num2));

</script>

</body>
</html>
== 和 ===
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>

<!-- 方法的调用-->
  <input type="button" value="hello" onclick="sayHello();"> <br/>
  <input type="button" value="bye" onclick="sayBye();"><br/>
  <input type="button" value="haha" onclick="haha();"><br/>



 <script type="text/javascript">



       //01.定义一个函数
         function sayHello(){
             alert("大家好!");
         }
         //02.定义一个函数
         var sayBye=function(){
             alert("拜拜大家!");
         }


         function haha(){
             sayHello();
         sayBye();
     }

 </script>

</body>
</html>
函数
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>



<script type="text/javascript">
     var arr1=new Array(); //没有长度
     var arr2=new Array(5); //只有一个参数   是长度
     var arr3=new Array(1,2,3,4,5);  // 定义数组的同时开辟空间并赋值
     var  arr4=[1];
    document.write("arr1.length"+arr1.length+"<br/>");
    document.write("arr2.length"+arr2.length+"<br/>");
    document.write("arr3.length"+arr3.length+"<br/>");
    document.write("arr4.length"+arr4.length+"<br/>");
    document.write("arr4[0]"+arr4[0]+"<br/>");
    document.write("arr4[1]"+arr4[1]+"<br/>");

    //定义一个字符串   转换成数据
    var  str="haha,heihei,hehe,houhou";
     var  arr5= str.split(","); //返回一个数据
    document.write(arr5.length+"<br/>");
    //向数组中添加一个元素
    arr5.push("heiheihahahehe");
     document.write("arr5[4]"+arr5[4]+"<br/>");
    //把数组中的每一个元素通过一个分隔符 连接在一起 形成新的字符串
     str=arr5.join("+");
    document.write(str);

</script>

</body>
</html>
数组
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>for in</title>
</head>
<body>


<script type="text/javascript">
    var arr=[1,2,3,4,5,6];
    /* i 是下标 */
    for(var i in arr){
        document.write(arr[i]);
    }

</script>
</body>
</html>
for in
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>捕获异常</title>
</head>
<body>


<script type="text/javascript">
/*
 * ex.name 错误名称
 * ex.message  错误信息
 */
    try{
      sasas
    }catch(ex){
        alert(ex.name+":"+ex.message);
    }
    alert("大家辛苦了2");
</script>
</body>
</html>
捕获异常
技术分享
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>debug</title>
</head>
<body>

<!--
 网页中 F12
 如果网页有代码错误会在console台中显示错误信息
 之后选中错误出现的行!
 就到达  sources页面
 就可以打断点  (选择行号)



 NetWork 是我们所有访问的资源文件
-->

<img src="images/a.jpg">

<script type="text/javascript">

    document.write(1+"<br/>");
    document.write(2+"<br/>");
    document.write(3+"<br/>");
    sasaasa
    document.write(4+"<br/>");
    document.write(5+"<br/>");
    document.write(6+"<br/>");
</script>
</body>
</html>
debug

 

以上是关于初识JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

Java初识方法

初识OpenGL 片段着色器(Fragment Shader)

初识OpenGL 片段着色器(Fragment Shader)

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

30秒就能看懂的JavaScript 代码片段