js基础知识

JavaScript用法
行内式

<div id="div1">
    <a href="javascript:;">我很喜欢写代码</a> //点击没有反应
    <a href="javacript:;" onclick="alert('缓存已经清除')">清除缓存</a> //点击会有一个弹出出现

</div>

内嵌式

 可放在代码<head> 或者 <body>及  任何位置 建议是body末尾 如果放在head里面 要把代码放在 window.onload = function() { 放代码 }  这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <script>
        /* js放在head中 */
        window.onload=function(){
            var oDiv = document.getElementById("div1");
        oDiv.onclick = function(){
         alert("这是一段测试代码");
        }
        }
    </script>
</head>

<body>

    <!-- js放在body末尾前 -->
<div id="div1">
    <a href="javascript:;">我很爱代码</a>
    <a href="javascript:;">这个链接有弹窗</a>
</div>

 <script>
    var oDiv = document.getElementById("div1");
    oDiv.onclick = function(){
     alert("这是一段测试代码");
    }
</script>

</body>

外链式

避免延迟
之所以建议js放在是body末尾或是放在head里面要把代码放在 window.onload = function() { 放代码 }
因为代码执行的属性是从上到下开始执行的，如果js放在 <heade> 标签中但并未放到window.onload=function(){放代码} 那要等到js加载并解析后才会显示<body>标签中的内容。
window.onload=function(){放代码} 如果js放在这里面就会等所有的程序执行完后，在取执行js

JavaScript输出熟悉js常见的语句

 alert("******") 弹出窗口   （ window.alert()）

 document.write() 在页面中输出信息

 console.log("...") 控制台输出

使用 innerHTML 写入到 HTML 元素。

<!--window.alert()  弹出窗口  -->
<script>window.alert(2+3);</script>

<!--使用 innerHTML 写入到 HTML 元素。 -->
 <h1>我的第一Web页面</h1>
 <p id="demo">我的一个段落</p>
 <script>
  document.getElementById("demo").innerHTML="段落已经修改";
 </script>

<!-- console.log("...") 控制台输出 -->
<script>
    a=9;
    b=1;
    c=a+b;
    console.log(c);//10
  </script>

<!--  document.write() 在页面中输出信息   仅仅向文档输出写内容。 -->
 <h1>我的第一Web页面</h1>
 <p>我的一个段落</p>
<script>
    document.write(Date());
</script>
 
<!-- 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。 -->
<h1>我的第一Web页面</h1>
 <p>我的一个段落</p>
 <button onclick="myFunction()">点我</button>
 <script>
     function myFunction(){
         document.write(Date());
     } 
 </script>

代码注释

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

 
 /*

 
 ....

 
 ....

 
 */

自动分号

使用分号表示一段指令的结束，当没有输入分号时如果有换行符JS会自动添加分号，减少错误的发生。

但推荐每个指令都以分号结束
在使用构建工具时，不使用分号结束可能会造成异常

变量声明

命名规则

变量名由：字母 ，下划线，$ 或数字 且第一个字母必须是 “字母，下划线，或$”

变量不能是系统关键字和保留字 ，比如 true、if、while、class 等。
let class = 'houdunren';

正确命名：尽量取有意义的英文名或英文缩写

i
lvye_study
_lvye
$str
n123

通常驼峰格式是函数名，方法名，和对象属性命名的首选格式 var myMood = "hapy"

变量区分大小写，test和Test是不一样的,必须严格一样，才算是一个变量的；(在javascript里，onclick 必须要写出onclick，不能写成onClick；)
(一定要区分大小，如变量age与Age在JavaScript中是两个不同的变量）
如：var mood = "happy"； MOOD=“sad”; 他们是两个不同的变量进行赋值

变量声明

变量：未知数 存储一个值 这个值可以发生改变
变量是松散型的，意思是变量可以保存任何类型的数据，每个变量只不过是一个用于 保存任意值的命名占位符
有3个关键字，可以声明变量 var  const 和let

如：var a = 10; （在javascript中我们成为语句）
javascript的变量都是由var 声明，
在javascript里 声明变量简写为 var ；通过var name 就可以声明一个变量了

语法： var 变量名 = 值

 <script>
    //因为变量的值是可以改变的，所以在变量声明和赋值的时候，后面的会覆盖前面的。  输出变量，一定不要加引号
    var a = 10;     document.write(a); //10     
    var b = 20;     b = b + 1;     document.write(b); //21  在原来的基础上+1    
    var c = 10;     c = 16;     document.write(c); //16 后面的会覆盖前面的    
    var d = 10;     d = d + 1;     d = d - 6;     document.write(d); //5   
    
    //可以同时声明多个变量
    var a=6,b=9;
    console.log(b);//9

     //变量可以更换不同类型的数据  
    var n= 'hhhhhh';
    console.log(typeof n);//string
    
    f = 18;
    console.log(typeof f);//number 
   </script>

注意变量的声明和定义是两回事；

 var name;        //变量声明
    name="琪琪";     //变量定义
    var name="琪琪"; //变量声明+定义

    //分析var name="琪琪";  分两步走
    第一步 var name；先声明一个name的变量；
    第二步 name="琪琪" 创建数据"琪琪"这个字符串，
          并且把字符串"琪琪"这条数据赋值给name这个变量；
          在定义(赋值)变量的name值；
          
  这个时候name的类型就是所代表值的类型；

可通过typeof来检测；通过检测可以知道这个变量所代表的值是一个字符串类型的数据；

    var name=" 琪琪",
    gender;
    console.log(name,typeof name); //琪琪string
    console.log(gender,typeof gender); //undefined "undefined

虽然关键字var不是必须的，但是最好每次声明一个新变量都加上；

需要注意的是变量本身是没有意义的，只是数据的媒介(代号)，我们说的变量默认是这个变量名所代表的数据，并不是这个变量名本身；这点需要注意的；

弱类型

<script>
  // 在JS中变量类型由所引用的值决定
var web = "hhhh";
console.log(typeof web); //string
web = 99;
console.log(typeof web); //number
web = {};
console.log(typeof web); //object
</script>

posted @ 2021-01-18 15:23 沁莹阅读(129) 评论(0) 收藏举报

刷新页面返回顶部

沁莹

js基础知识

公告