XZ_JavaScript之JavaScript的基本语法

时间：2022-03-12 19:53:14
什么是JavaScript？是一门广泛用于浏览器客户端的脚本语言，由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java。简称，JS。

JS的常见用途
  • HTML DOM操作（节点操作，比如，添加、修改、删除节点）；
  • 给HTML网页增加动态功能，比如动画
  • 事件处理：比如，监听鼠标点击、鼠标滑动、键盘输入

<script> 标签
  1. 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
  2. 您可以在 HTML 文档中放入不限数量的脚本。
  3. 脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
  4. 我们把 JavaScript 放到了页面<body>代码的底部，这样就可以确保在标签元素创建之后再执行脚本。

外部的 JavaScript
  1. 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
  2. 外部 JavaScript 文件的文件扩展名是 .js。
  3. 如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件。
  4. 外部脚本不能包含 <script> 标签。

JavaScript对大小写敏感
  1. JavaScript 对大小写是敏感的。
  2. 当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
  3. 函数 getElementById 与 getElementbyID 是不同的。
  4. 同样，变量 myVariable 与 MyVariable 也是不同的。

空格
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：
var name = “Jack” ;
var name = " Jack ” ;

注释
单行注释以 // 开头。
多行注释以 /* 开始，以 */ 结尾。

声明（创建）JavaScript变量
1.使用 var 关键词来声明变量；
2.变量声明之后，该变量是空的（它没有值）。
3.如需向变量赋值，请使用等号：
var name = 'jack' ; // 字符串类型
4.当变量是字符串类型时，应该用双引号或单引号包围这个值。
5.在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：
var name = "Gates" , age = 56 , job = "CEO” ;
声明也可横跨多行：
var name = "Gates" ,
age = 56 ,
job = "CEO”;
6. 如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo”：
var carname = "Volvo” ;
var carname;
7. JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。 当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname =new String;
var x =      new Number;
var y =      new Boolean;
var cars =   new Array;
var person = new Object;


JavaScript的书写方式
JS常见的书写方式有2种
1>页内JS：在当前网页的script标签中编写，一般放在body标签中，不放在header标签中
< script type = "text/javascript" > </ script >
2>外部JS
< script src = "test.js" type = "text/javascript" charset = "utf-8" ></ script >

输出元素的方式
// 弹框输出
alert( 'hello world' );
alert( '你好，世界！' );
// 调试输出
console .log( '你好，世界!' );

< script type = "text/javascript" >
1.基本语法
var age = 18 ; // 整型
var money = 100.99 ; // 浮点型
var name = 'jack' ; // 字符串类型
     name2 = 'rose' ;
var result = true ; // false 布尔类型
var number = null ; // 空类型
var number1  = undefined ;
var result2 ; // result2  为 undefined, undefined  这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

2.输出
console .log(age,money,name,name2,result, number ,number2);
3.变量的真实类型 typeof
console .log( typeof age, typeof money, typeof name, typeof name2, typeof result, typeof number , typeof number2);
4.基本数据类型的运算
4.1 字符串的拼接
var newName = name + '-' + name2;
console .log(newName);
4.2 题目 输出结果
//  基本数据类型的运算 遵循的规律:运算是从左往右;任何类型的变量与string类型的变量拼接就会被强转为string;
var str1 = 10 + 10 + '10' ; // 2010
var str2 = '10' + 10 + 10 ; // 101010
var str3 = ( 10 + '10' ) + 10 ; // 101010
console .log(str1,str2,str3);
5.数组:可以装任何东西
var numbers = [ - 10 , 'san' ,name,result, number ,[ '哈哈' , '呵呵' ]];
5.1遍历数组
for ( var i = 0 ;i < numbers.length;i ++ ) {
     console .log(numbers[i]);
}
for ( var i in numbers) {
     console .log(numbers[i]);
}
5.2 JS中常用的属性
数组相当于栈，删除栈元素用pop，往栈中添加元素用push
// 删除数组中最后一个内容
numbers.pop();
// 向数组末尾添加一个元素
numbers.push( 'zhangsan' );
for ( var i in numbers) {
     console .log(numbers[i]);
}
6.JS 常用的类库 Math
var numsArr = [ 10 , 212 , 3223 , 32 ];
var maxNum = Math.max( 10 , 30 , 20 );
// 获取最大值
var NewMaxNum = Math.max.apply( this ,numsArr);
console .log(NewMaxNum);
</ script >

JS中常见的函数
语法
function 函数名 (){
// 函数体
}
function 函数名 (参数1，参数2){
// 函数体
}

关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

变量
局部变量
1.在 JavaScript 函数内部声明的变量（使用 var）是 局部 变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
2.您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
3.只要函数运行完毕，本地变量就会被删除。

全局变量
在函数外声明的变量是 全局 变量，网页上的所有脚本和函数都能访问它。

变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除 。

向未声明的变量来分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname = "Volvo” ;
将声明一个 全局 变量 carname，即使它在函数内执行。


< script >
当声明函数时，把参数作为变量来声明：
1.1加法运算（两个数）
function sum ( num1 , num2 ) {
   return num1 + num2;
}
// 如何调用？
var result = sum( 12 , 323 );
console .log(result);

1.2万能的加法函数
function sum2 ( nums ) {
// 变量
var result = 0 ;
for ( var i in nums) {
   result += nums[i];
}
// 返回
return result;
}
// 调用；
var result1 = sum2([ 1 , 2 , 3 , 4 ]);
console .log(result1);

1.3匿名函数:没有函数名称,得有变量接收
var res = function () {
console .log( '我是匿名函数’ )；
}
// 调用匿名函数；
res();
</ script >

JS中的对象
1.对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔；
2.空格和折行无关紧要。声明可横跨多行；
3. 对象属性有两种寻址方式：
name = dog.name ;
name = dog[ "name” ];
4. JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据。


< script type = "text/javascript” >
1.创建对象，object
var dog = {
name : 'wangwang' ,
age : 3 ,
height : 0.7 ,
dogFriends : [ 'lili' , 'wangcai' ],
eat : function ( something ) {
// this 所在的函数属于哪个对象，this就代表这个对象
console .log( this .name + '吃狗粮' + something);
},
run : function ( somewhere ) {
console .log( this .name + '跑一跑' + somewhere);
}
};
2.输出dog的类型
console .log( typeof dog);
// 2.输出狗对象的属性和行为
console .log(dog.name,dog.age);
dog.eat( '喝牛奶' );
dog.run( '5km' );
</ script >

JS批量创建对象
< script type = "text/javascript” >
// 构造函数
var Dog = function () {
     console .log( '这是一个普通函数' );
}

// 普通调用
Dog();
// 普通函数 -> 构造函数 alloc init -> new
var dog1 = new Dog();
var dog2 = new Dog();
console .log(dog1,dog2);
</ script >

确实批量产生对象
< script type = "text/javascript” >
// 创建构造函数（抽象）
var Dog = function () {
this .name = null ;
this .age = null ;
this .dogFriends = [];
this .height = null ;
this . eat = function ( something ) {
console .log( this .name + 'eat' + something);
}
this . run = function ( somewhere ) {
console .log( this .name + 'run' + somewhere);
}
}

// 批量产生对象
var dog1 = new Dog();
dog1.name = 'wangcai' ;
dog1.age = 8 ;
dog1.dogFriends = [ 'anan' , 'daidai' ];
dog1.eat( ‘狗粮' );

var dog2 = new Dog();
dog2.name = 'wangwang' ;
dog2.age = 1 ;
dog2.eat( ' 狗粮 ' );
console .log(dog1,dog2);
</ script >

// 创建带参数的构造函数（抽象）
var Dog = function ( name , age , dogFriends , height ) {
this .name = name;
this .age = age;
this .dogFriends = dogFriends;
this .height = height;
this . eat = function ( something ) {
console .log( this .name + 'eat' + something);
}
this . run = function ( somewhere ) {
console .log( this .name + 'run' + somewhere);
}
}
var dog3 = new Dog( 'daidai' , 5 ,[ 'we' ], 0.8 );

总结
JavaScript：写入 HTML 输出
document .write( 'hello,world’ );
document .write( '<input type="file" />' );
document .write( '<img src="../../03-登录界面/imgs/login_QQ.png" />’ );

JavaScript：对事件作出反应
< button type = "button" onclick = " alert ( 'Welcome!' ) " >点击这里</ button >

JavaScript：改变 HTML 内容
使用 JavaScript 来处理 HTML 内容是非常强大的功能。
// 查找元素 
var btn = document .getElementsByTagName( 'button' )[ 0 ];
// 修改内容
btn.innerText = '隐藏’ ;

JavaScript：改变 HTML 图像
// 1.获取网页中的img标签
var img = document .getElementsByClassName( 'icon' )[ 0 ];
// 2.改变src属性
img.src = "image/img_02.jpg” ;

JavaScript：改变 HTML 样式
var icon = document .getElementsByClassName( 'icon' )[ 0 ];
icon. style .display = 'none' ;

JavaScript：验证输入
if isNaN (x) {
     alert( "输入正确" );
}

标签：

相关文章