JavaScript入门知识

最新推荐文章于 2021-01-08 21:34:25 发布

燕点轻波

最新推荐文章于 2021-01-08 21:34:25 发布

阅读量215

点赞数

分类专栏： HTML/JS/CSS

本文链接：https://blog.csdn.net/sy1084462993/article/details/81323529

版权

HTML/JS/CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

简介

JavaScript 是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。

用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间
脚本可被放置在 HTML 页面的 <body> 和 <head> 中，或者使用<script src="..."></srcipt>引用外部的script脚本

输出

JavaScript 本身没有任何打印或者输出的函数，但可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框
- 使用 document.write() 方法将内容写到 HTML 文档中
- 使用 innerHTML 写入到 HTML 元素
- 使用 console.log() 写入到浏览器的控制台

语法

字面量
在编程语言中，一个字面量是一个常量，如 3.14。
- 数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)，如3.14 1001
- 字符串（String）字面量可以使用单引号或双引号，如Hello world
- 表达式字面量用于计算，如5+6
- 数组（Array）字面量定义一个数组，如[40, 100, 1, 5, 25, 10]
- 对象字面量定义一个对象，如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
- 函数（Function）字面量定义一个函数，如function myFunction(a, b) { return a * b;}
变量
使用关键字 var 来定义变量，使用等号来为变量赋值，如var x;x=5;
注意：变量是一个名称。字面量是一个值
JavaScript 对大小写敏感
JavaScript 使用 Unicode 字符集
JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
语句使用分号；分隔。
可以在文本字符串中使用反斜杠对代码行进行换行。

注释

单行注释使用//
多行注释以/*开始，以*/结尾

变量

以字母，下划线（_）或美元符（$）开头，且对大小写敏感
重新声明变量，该变量的值不会丢失，如var carname = "jp";var carname;，其变量值仍为jp
如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明

注意： JavaScript 变量、函数均为对象。当您声明一个变量时，就创建了一个新的对象

数据类型

字符串（String）：需使用单引号或双引号包起来，对于特殊字符，可以使用反斜杠（\）来进行转义

//字符串可以是对象，但不建议使用，它的执行速度比较慢
var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object

数字（Number）
布尔（Boolean）：!"", !0, !-0, !null, !NaN, !undefined的值都为false，连续使用两次!，可将任意类型转换为布尔型
数组（Array）
对象（Object）
空（Null）
未定义（Undefined）：undefined == null，其值为true

注意： JavaScript具有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性

函数

在js中调用（或onclick方法中），函数的参数可以是字符串，数字，数组，对象等；但是在url中调用的函数，其参数不能是数组或对象

作用域

局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象
let 的声明方式与 var 相同，用 let 来代替 var 来声明变量，就可以把变量限制在当前代码块中。

运算符

%，求余运算，结果值的符号与除数一致；（取模和求余是不一样的，c/c++，java，js的%是求余运算，python的%是取模运算）
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串
逻辑与（&&）的优先级比逻辑或（||）高

流程语句

for/in循环

//遍历对象，结果为John 25
var person={fname:"John",lname:"Doe",age:25}; 
for (var x in person) 
{ 
    txt=txt + person[x] + " "; //x的值分别为fname,lname,age
}
//遍历数组，结果为abc
var arr = ['a','b','c'];
var txt="";//若为var txt;则结果为undefinedabc
for (var str in arr){
    txt=txt + arr[str];//str的值分别为0，1，2
}

//对象含方法的遍历
function myPerson(fname,lname){
    this.fname = fname;
    this.lname = lname;

    this.changeName = changeName;
    function changeName(name){
        this.lname = name;
    }
}
var person = new myPerson("fn","ln");
var txt = ""; 
for (var x in person) 
{
    //使用typeof(person[x]) == "function"来判断
    //或者使用下面的语句判断，但是indexOf中的参数"Function"的"F"一定要大写
    if(person[x].constructor.toString().indexOf("Function")>-1){
        alert("该属性是方法");
    }
    txt = txt + person[x] + " "; 
}
//结果：fn ln function changeName(name){ this.lname = name; }

break和continue

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块

类型转换

JavaScript 有 5 种不同的数据类型：string, number, boolean, object, function；3中对象类型：Object, Date, Array；2个不包含任何值的数据类型：null, undefined

typeof "John"                 // 返回 string 
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number 
typeof false                  // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name: 'John', age:34} // 返回 object
typeof new Date()             // 返回 object
typeof new Array()            // 返回 object
typeof new Object()           // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (if myCar is not declared) 
typeof null                   // 返回 object
typeof undefined              // 返回 undefined
//可以使用 constructor 属性来查看对象的类型
"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] } 
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor             // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
new Array().constructor            // 返回函数 Array()    { [native code] }
new Object().constructor           // 返回函数 Object()    { [native code] }
function() {}.constructor          // 返回函数 Function(){ [native code] }

正则表达式

正则表达式可用于所有文本搜索和文本替换的操作，其语法为/pattern/modifiers;，或者new RegExp(pattern,modifiers)，pattern为模式，modifiers为修饰符；使用够拽函数创建正则对象时，需要对特殊字符进行转义，如new RegExp("\\w+")与/\w+/是一个以上

RegExp的对象方法

test() ，检索字符串中指定的值，如果字符串中含有匹配的文本，则返回 true，否则返回 false

var patt = /e/; 
patt.test("The best things in life are free!");     //结果：true
//也可以不用设置正则表达式的变量
/best/i.test("The Best things in life are free!")    //结果：true

compile() ，编译正则表达式；即可以改变检索模式，也可以添加或删除第二个参数

var patt1=new RegExp("e"); 
document.write(patt1.test("The best things in life are free"));     //结果：true
patt1.compile("d"); 
document.write(patt1.test("The best things in life are free"));     //结果：false

exec() ，检索字符串中指定的值，并返回找到的值。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null

/e/.exec("The best things in life are free!");    //结果是长度为1的数组，toString()以后结果为：e

支持正则表达式的String对象的方法

search() ，检索与正则表达式相匹配的值，并返回它的起始位置

var str = "Visit w3cschool"; 
var n = str.search(/w3cschool/i);   //结果：6
var str = "Visit w3cschool!"; 
var n = str.search("w3cschool");    //结果：6

match()，找到一个或多个与正则表达式相匹配的值，若没有找到，返回null，若找到了，则返回一个数组

ar str = "The rain in SPAIN stays mainly in the plain"; 
var a=str.match(/ain/gi);//结果：ain,AIN,ain,ain
var b=str.match(/ain/g);//结果：ain,ain,ain
var c=str.match(/ain/);//结果：ain

replace()，替换与正则表达式匹配的子串

var str = "Visit Microsoft!"; 
var res = str.replace(/microsoft/i, "w3cschool");   //结果：Visit w3cschool!
var str = "Visit Microsoft!"; 
var res = str.replace("Microsoft", "w3cschool");    //结果：Visit w3cschool!

split()，把字符串分割为字符串数组，该方法不改变原字符串

var str="How are you doing today?";
var a=str.split("");//结果：H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
var b=str.split(" ");//结果：How,are,you,doing,today?
var c=str.split(" ",3);//结果：How,are,you    第二个参数限制返回的数组的最大长度

详见：https://www.w3cschool.cn/jsref/jsref-obj-regexp.html

错误处理

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误，术语：抛出一个错误
try和catch是成对出现的

JSON

JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。
JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。
JSON 数据格式为键/值对，就像 JavaScript 对象。
示例，以下 JSON 语法定义了 employees 对象: 3 条员工记录（对象）的数组：

{"employees":[ 
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"}, 
    {"firstName":"Peter", "lastName":"Jones"} 
]}

JSON 字符串转换为 JavaScript 对象

var text = '{ "employees" : [' + 
'{ "firstName":"John" , "lastName":"Doe" },' + 
'{ "firstName":"Anna" , "lastName":"Smith" },' + 
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
var obj = JSON.parse(text);

javascript:void(0) 含义

void，该操作符指定要计算一个表达式但是不返回值

var a,b,c; 
a = void ( b = 5, c = 7 );  //结果：a=undefined,b=5,c=7

href=”#”与href=”javascript:void(0)”的区别

javascript:void(0)，仅仅表示一个死链接
href=”#id”，表示跳转到页面指定id的位置

代码规范

变量和函数为驼峰法
全局变量为大写
文件名建议使用小写
为了便于阅读每行字符建议小于数 80 个。如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行

燕点轻波

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录