javascript基础

最新推荐文章于 2021-10-06 08:40:07 发布

viczking

最新推荐文章于 2021-10-06 08:40:07 发布

阅读量324

点赞数

分类专栏： web前端文章标签： JS

本文链接：https://blog.csdn.net/viczking/article/details/80245327

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.1 javasscript 的介绍

1. 什么是javascript

Java 与 javascript 有什么区别？

它们没有关系，雷锋和雷峰塔的关系

2. javascript 的作用？

HTML：它是整个网站的骨架。

CSS：它是对整个网站骨架的内容进行美化(修饰)

Javascript：它能够让整个页面具有动态效果(表单验证)。

3. javascript 的组成部分

l ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数

据类型、语句、函数等等)

l DOM：文档对象模型，包含(整个 html 页面的内容)、

l BOM：浏览器对象模型,包含(整个浏览器相关内容)局部异常和全局异常的配置和使用

1.2 javascript语法

1. 基本语法

区分大小写

变量是弱类型的(String str=”aaa” ,var str=”123”;)

每行结尾的分号可有可无(建议大家写上)

注释与 java等语言相同。

2. javascript 的变量

变量可以不用声明，变量是弱类型。统一使用 var 来定义！定义变量的时候不要使用关键字和保留字。

3. javascript 数据类型

Javascript 数据类型分为原始数据类型和引用数据类型

原始数据类型：

string、number、boolean、null、undefined

引用数据类型：

4. javascript 运算符

其它运算符与 java 大体一致，需要注意其等性运算符。

== 它在做比较的时候会进行自动转换。

=== 它在做比较的时候不会进行自动转换。

5. javascript 语句

所有语句与 java 大体一致。

6. 获取元素内容

获取元素

document.getElementById(“id 名称”);

获取元素里面的值

document.getElementById(“id 名称”).value;

<body>
<input id="name" type="text" value="张三" >
</body>
</html>
<script type="text/javascript">
var uname= document.getElementById("name").value;
alert(uname)
</script>

1.3 javascript 的引入方式

1. 内部引入方式

直接将 javascript 代码写到<scripttype=”text/javascript”></script>

2. 外部引入方式

需要创建一个.js文件，在里面书写javascript代码，然后在html文件中通过script

标签的 src 属性引入该外部的 js 文件

3. 行内编写js

1.4 常用的函数

Ø parseInt("字符串")

Ø parseFloat("字符串")

Ø isNaN() 判断变量是否是非数字//返回的是boolean类型不是数字返回true

Ø typeof(变量名变量的数据类型)

<script>
function compute(){
     var num1=parseInt(document.getElementById("num1").value);
    var num2=parseInt(document.getElementById("num2").value);
    var choose=document.getElementById("choose").value;
    var result=0;
      switch (choose){
          case "+":
              result=num1+num2;
              break;
          case "-":
              result=num1-num2;
              break;
          case "*":
              result=num1*num2;
              break;
      }
   document.getElementById("result").innerHTML=result;
}

</script>
</head>
<body>
第一个数:<input id="num1" ><br>
第二个数:<input id="num2" ><br>
<select id="choose">
    <option value="+">加</option>
    <option value="-">减</option>
    <option value="*" >乘</option>
</select><br>
<button οnclick="compute();" >计算</button>
结果<span id="result"></span>
</body>

<script>
var num='a';
var cc=isNaN(num);
alert(cc);
</script>

结果为true num不为数字所以结果为true

var num='1';
var cc=isNaN(num);
alert(cc);

结果为false

<script>
var num;
alert(typeof(num));
</script>

变量未初始化数据类型为undefined

1.5 BOM对象

BOM 对象：浏览器对象模型(操作与浏览器相关的内容)

Ø  Window 对象

Window 对象表示浏览器中打开的窗口。

<script>
// alert("你好");
var result= confirm("你确定要干掉我吗?");
   if(result){
       window.close();
   }
var num=   prompt("提示语","请输入第一个数字");
alert(num);
</script>

案例:动态显示当前时间

Date类的常见方法

显示当前时间：

<script>
function showTime(){
    //获取当前时间
    var date=new Date();
    //获取年份
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var dd=date.getDate();
    var hh=date.getHours();
    var mm=date.getMinutes();
    var ss=date.getSeconds();
    var time='现在是'+year+'年'+month+'月'+dd+'日'+hh+'点'+mm+'分'+ss+'秒';

    document.getElementById("clock").innerHTML=time;
}
</script>
</head>
<body>
<button οnclick="showTime();">显示当前时间</button>
<div id="clock">
</div>
</body>

动态显示时间

定时器函数

setTimeout()

setTimeout("调用的函数",等待的毫秒数)

//1秒(1000毫秒)之后执行函数disptime()一次

var myTime＝setTimeout("disptime ", 1000 );// disptime后面不能加()

setInterval()

setInterval("调用的函数",间隔的毫秒数)

//每隔1秒(1000毫秒)执行函数disptime()一次

清除函数

clearTimeout()

clearTimeout(setTimeOut()返回的ID值)

var myTime＝setTimeout("disptime", 1000 );

clearTimeout(myTime)；

clearInterval ()

clearInterval(setInterval()返回的ID值)

var myTime＝setInterval("disptime ", 1000 );

clearInterval(myTime)；

<script>
        var  cc;
        function showTime(){
            // setTimeout(time,1000);
           cc=setInterval(time,1000);
        }
  
        function time(){
            //获取当前时间
            var date=new Date();
            //获取年份
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var dd=date.getDate();
            var hh=date.getHours();
            var mm=date.getMinutes();
            var ss=date.getSeconds();
            var time='现在是'+year+'年'+month+'月'+dd+'日'+hh+'点'+mm+'分'+ss+'秒';
  
            document.getElementById("clock").innerHTML=time;
        }
        function stop(){
   clearInterval(cc);
        }
  
    </script>
  </head>
  <body>
  <button οnclick="showTime();">显示当前时间</button>
  <button οnclick="stop();">停止</button>
  <div id="clock">
  </div>
  </body>

Ø Location 对象

Location 对象包含有关当前 URL 的信息

按钮实现页面跳转

a href="002.html">跳转到002.html</a>
<button οnclick="javascript:location.href='002.html'">跳转到002.html</button>

Ø History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL

历史页面：使用 location 页面(把 href 属性值改为当前的 history)

History 页面代码：

<input type="button" value=" 返回上一个页面 "

οnclick="javascript:history.back()"/>

go(参数)

参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历史记录页面。

让按钮点击失效：

οnclick=”javascript:volid(0)”

总结:

1. js的语法

2. js的三种写法

3. BOM对象的常见操作

4. DOM通过id获取元素

viczking

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript基础

1.1 javasscript 的介绍1. 什么是javascriptJava 与 javascript 有什么区别？它们没有关系，雷锋和雷峰塔的关系2. javascript 的作用？HTML：它是整个网站的骨架。CSS：它是对整个网站骨架的内容进行美化(修饰)Javascript：它能够让整个页面具有动态效果(表单验证)。3. javasc...
复制链接

扫一扫