JavaScript核心基础语法

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 1 什么是JavaScript?  是一种嵌入在网页中的程序段。 是一种解释型语言,被浏览器解释执行。 由Netscape发明,ECMA(欧洲计算机制造商协会)将其标准化。 JavaScript借用了Java的名字,但它和java没有关系。

1 什么是JavaScript? 

是一种嵌入在网页中的程序段。
是一种解释型语言,被浏览器解释执行。
由Netscape发明,ECMA(欧洲计算机制造商协会)将其标准化。
JavaScript借用了Java的名字,但它和java没有关系。
出于安全性考虑,增加了JavaScript的限制
增强客户端的交互功能。
 
JavaScript与java的区别:
JS只在浏览器中执行,java可在各种平台上执行。
JS也有变量,常量,运算符,关键字,数据类型,语句等。
JS借用了Java的语法,其运算符和表达式与Java非常相似。
 
2 JavaScript能做什么?
可以使用JS添加、删除、修改网页上的所有元素及属性。
在HTML网页中动态写入文本。
响应网页中的事件,并做出相应处理。
可用于较验客户端提交的数据。
检测浏览器类型及版本。
    (判断浏览器类型:)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>跨浏览器编程</title>
    <script type="text/javascript">
        function browserType(even){
            if(window.event){//判断是不是IE浏览器
              document.getElementById('p1').innerHTML='IE';
            }
            else if(even){//判断是不是DOM兼容浏览器
               document.getElementById('p1').innerHTML='DOM' ;
            }
        }


    </script>
</head>
<body>
<button onclick="browserType(event);"> Hello JavaScript Event Object</button>
<p id="p1">到底是什么浏览器呢</p>
</body>
</html>
View Code

 

处理Cookie.
 
3 JavaScript的技术体系
核心语言定义
原生对象和内置对象
BOM(浏览器对象模式)
DOM (文档对象模式)
事件处理模型
 
4 将JavaScript添加到XHTML文档中
 使用script元素在XHTML文档中直接嵌入JavaScript语句---方便
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <script type="text/javascript">
 9     alert("使用script元素在XHTML文档中直接嵌入JavaScript语句");
10 </script>
11 
12 </body>
13 </html>
View Code
 将JavaScript源文件通过<script>元素的src属性链接到XHTML文档---结构、表现、行为分离
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/two.js"></script>
</head>
<body>
<form action="#" method="get">
    <input type="button" value="点击" onclick="alertTest();">
</form>

</body>
</html>
View Code

 在two.js里包含的脚本

function alertTest(){
alert("链接外部脚本");
}
 脚本包含在XHTML事件处理程序性中,eg:onclick  ondblclick onkeydown ...
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<script type="text/javascript" src="../js/two.js"></script>-->
</head>
<body>
<form action="#" method="get">
    <input type="button" value="点击" onclick="alert('脚本包含在XHTML中');">
</form>

</body>
</html>
View Code

5 JavaScript变量

JS中声明变量都用关键字var,并且JS区分大小写

弱类型,不一定要初始化

在声明变量时注意的一些小细节:

声明变量后 第一次给变量赋什么样类型的值,以后必须使用相同的类型

当我们没有使用var 定义变量的时候 如果没有给变量赋值 就会报错 如果给它赋值了。 宿主环境 (浏览器)就把 认为一个 全局变量

var num; 当声明的变量未初始化时,值为undefined。
6 JavaScript数据类型
6.1 原始数据类型


typeof运算符
typeof运算符有一个参数,即要检查的变量或值;
在使用typeof运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,他都返回"Object";
用另一个运算符instanceof来解决这个问题;
eg
var s=new String('hello js');
alert(s instanceof String);// 输出"true"
这个需要开发者明确的指出对象为某特定的类型

–Undefined:
 
   
•当声明的变量未初始化时,值为undefined。
 
   
•当函数无明确返回值时,其调用结果也是undefined。
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
       function test(){
         alert("1111");
         return 1;
         }
//         var i = test(); //当函数无明确返回值时,其调用结果也是undefined。
//           var i = test() ;// 先调用函数test 任何把返回值赋值为i   undefined
        var i = test ; //是把函数test的地址赋值给了i;
         alert(i);
         alert(typeof (i));
    </script>
</head>
<body>
</body>
</html>
View Code
–Null
 
   
•值为null,null是从Undefined派生来的。因此null==undefined
 
   
•null表示不存在的对象。
var i = null;
        alert(i);//null
        alert(typeof (i));//object

 

–Boolean
 
   
•true或false
 
   
–Number
 
   
•即可表示32位整数,也可表示64位浮点数。
 
   
•Number.MAX_VALUE和Number.MIN_VALUE定义了上下限。
 
   
•Number.POSITIVE_INFINITY和Number.NEGATIVE_INFINITY Infinity表示无穷大。isFinite()较验是否无穷大。无穷大返回false
 
   
•NaN表示非数字,它与自身不相等。一般发生在类型转换失败时,isNaN()较验是否为数字。
 
   
–String
 
   
•可用单引号或双引号声明。

数据类型转换
parseInt()
从左到右依次解析 直到遇见解析的那个字符不是是数字, 则结束
parseFloat
从左到右依次解析 直到遇见解析的那个字符不是是数字,则结束, 从有效数字开始,只会出现一个小数点。
var a = parseInt("1234"); //返回1234
 
   
var b = parseInt("abc"); //返回NaN
var b = parseFloat("012.23.45"); //返回12.23
 
强制类型转换有三种:Boolean(value)  Number(value)   String(value)
当要转换的值是至少有一个字符的字符串,非0数字或对象时,Boolean()函数返回true,如果该值是空字符串,数字0,undefined或null,将返回false;
Number 转换的时候 是把 字符串当一个整体来转换;
String 转换的时候 只需要调用作为参数传递进来的值的toString()方法;


 6.2 引用数据类型
          原生对象
–由JavaScript提供,独立于浏览器的对象。
–Object,Array,String,Boolean,Number,Date,RegExp...
          内置对象
–也是一种原生对象,只是在使用时不需要初始化。
–Global,Math
         宿主对象
–与浏览器有关的对象。
–BOM,DOM
        自定义对象
 
数组对象:
Array 对数组的内部支持
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素




















 
 
 
 
 
 
 
 
 
相关文章
|
5月前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
208 1
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
73 0
|
5月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
6月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
212 4
|
5月前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
7月前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
48 5
|
6月前
|
存储 JavaScript 前端开发
|
7月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
72 3
|
6月前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
983 0

热门文章

最新文章