JavaScript+jQuery日常学习(一)

第1章 初识JavaScript

1.JavaScript的特点
  • 是一种脚本语言
  • 可以跨平台
  • 支持面向对象
2.三大主流框架
  • Vue.js
  • Angular
  • React
3.JavaScript的组成
  • ECMAScript:JavaScript的核心,ECMAScript规定了JavaScript的编程语法和基础核心内容,是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。

  • DOM:文档对象模型,是W3C组织推荐处理可扩展标记语言的标准编程接口,通过对DOM提供的接口,可以对页面上的各种元素进行操作。

  • BOM:浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构,通过对浏览器窗口进行操作。

4.JavaScript入门

(1)代码书写位置

  • 行内式:将单行或少量的JavaScript代码写在HTML标签的事件属性中。
DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <input type="button" value="输入密码" onclick="alert('密码输入错误')"> 
body>
html>

注意:1.在html中推荐使用双引号,而JavaScript推荐使用单引号。

​ 2.行内式可读性差,编写大量JavaScript代码时,不方便阅读。

​ 3.多层引号嵌套使用时,非常容易混淆,导致代码出错。

​ 4.只有临时测试或者特殊情况下才会使用行内式。

  • 内嵌式(嵌入式):使用< script>标签包裹代码,该标签可以写在< head>或< body>标签中。
DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script>
        alert('密码输入错误');  
    script>    
head>
<body>
body>
html>

  • 外部式(外链式):将代码写在一个单独的文件中,一般用"js"作为文件的扩展名,在html页面使用< script>标签引入。
DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="test.js"> 
    script>    
head>
<body>
body>
html>
alert('密码输入错误'); /*test.js中写入*/

注意:伪协议也是一种嵌入JavaScript的方法。

<a href="javascript:alert('密码输入错误')">输入密码a> 

JavaScript异步加载:为了尽可能减少对整个页面下载的影响,推荐将不需要的提前执行的< script>标签放在< body>标签的底部。

  • async:用于异步加载,即先下载文件,不阻塞其他代码执行,下载完成后执行。
<script src="file.js" async></script>
  • defer:用于延后执行,即下载文件,直到网页加载完成后再执行。
<script src="file.js"defer></script>

(2)注释

  • 单行注释:“//”
  • 多行注释:“/* */”

(3)输入和输出语句

常用的输入和输出语句

语句 作用
alert(‘msg’) 浏览器弹出警告框
console.log(‘msg’) 浏览器控制台输出信息(在控制台可以直接运行JavaScript代码)
prompt(‘msg’) 浏览器弹出输入框,用户可以输入内容

(4)JavaScript变量

  • 变量:程序在内存中申请的一块用来存放数据的空间。

  • 变量的使用

声明变量并赋值

var age;
age = 10;

变量初始化

var age=10;
var myname='小明';
var address='XX市XX区';
var age=18;
var email='xiaoming@localhost';
alert(age); 
console.log(myname); 
console.log(address); 
console.log(age); 
console.log(email);  /*全局作用下定义的变量会自动注册为windows对象的属性*/
var ID=prompt('请输入ID');  //输入语句
var myname='小明';
var address='XX市XX区';
var age=18;
var email='xiaoming@localhost';
alert(age); 
console.log(myname); 
console.log(address); 
console.log(age); 
console.log(email); 
console.log(ID); 

(5)变量命名规则

①有字母、数字、下划线和美元符号组成。

②严格区分大小写。

③不能以数字开头。

④不能是关键字、保留字,如var,for。

⑤要尽量做到"见其名知其意"

⑥建议遵守驼峰命名法。如myFisrstName。

例子:

1.交换两个变量的值。

DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="test.js"> //外链式
    script>    
head>
<body>
body>
html>
var apple1=prompt('请输入apple1的值');  
var apple2=prompt('请输入apple2的值');
var temp;
temp=apple1;
apple1=apple2;
apple2=temp;
console.log(apple1); 
console.log(apple2); 

2.将用户输入的信息输出到网页的JavaScript程序。

var msg=prompt('请您输入信息');
alert('用户输入的内容是:'+msg); //输出
JavaScript+jQuery日常学习(一)_第1张图片

你可能感兴趣的:(日常学习,IT,编程,javascript,jquery,学习)