JavaScript学习笔记（一）基本概念及语法

最新推荐文章于 2022-06-22 22:16:14 发布

罗大宝

最新推荐文章于 2022-06-22 22:16:14 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： JavaScript 编程语言脚本语言浏览器 js

本文链接：https://blog.csdn.net/sharleneluo/article/details/21320003

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

认识JS

JavaScript用来干什么？

是浏览器中运行的脚本（用户交互，数据处理）
JAVA需要编译，而JSP是解释性语言，源码掺在HTML里面，和HTML【一起从服务器端下载下来】

浏览器会在读取代码的时候，逐行执行脚本语言；而传统的编程语言，会在执行前对所有代码进行编译

怎么在HTML中加入JS？

在标签里面加入on..时候的动作，比如<body onload="alert('hello!')">这样的
在HTML里面放<script>【这是最简单的方法：<script>....</script>。可以放在head里也可以放在body里。head里面是函数和变量的定义，在body里面是让它做实际的动作】

杂项

-document指的是浏览器页面

-注释用// 或者/**/来写

-末尾不写分号 ; 也是可以哒

-JS对大小写敏感

-反斜杠 \ 可以对代码进行折行而不影响执行。但要注意添加 \ 的地方。添得不对的话代码不能正常执行（总是就是还是别用它了= =）

-调用外部js文件：在body中加入
<script src="/js/example_externaljs.js">
</script>

-消息框：

都是在head里面写函数，在body的input button的onclick属性调用这个函数

警告框：alert(){...} 带折行的话，在{ }中加“”+‘\n’+“”
确认框：var r=confirm("PRESS A BUTTON")
if(r==true)
{alert(....)}
else
{alert(....)}
提示框：var r=prompt("PLEASE INPUT YOUR NAME", "luoshalin")//后面的是文本框里的默认值
if(r != "")
document.write("hello "+r+" how r u")

基本语法

输出

alert("!!!");

document.write("string");

document.write("<p>this is a paragraph.<p>");

document.write("<h"+i+">this is header "+i+"</h"+i+">" )

变量和数据类型

-所有变量都统一用var声明：

var x = 2;

var name = "Bill Gates";

-示例：(将变量carname放入id="demo"的HTML段落中)

<p id="demo"></p>

var carname = "volvo";

document.getElementById("demo").innerHTML = carname;

-JS中有如下数据类型：

字符串//用单引号或双引号//var name = 'Bill Gates'
数字//JS中只有一种数字类型，数字可以带小数点，也可不带//var x1 = 3.30;//科学技术法：var y = 123e5//12300000
布尔值//var x = true; var y = false;
Undefined 和 Null//Undefined 表示变量不含有值；可以通过将变量的值设为null来清空变量

-JS中的变量对大小写敏感；可以用字母或$或_开头；字符串用单引号或双引号包围（JS中，单引号双引号是一样的。两层双引号会引起辨识困难，所以里面最好用单引号）；最好在代码开始处【统一】对需要的变量进行声明

-如果只声明不赋值的话（比如var carname;）则carname的值为undefined

-如果重新声明JS变量，该变量的值不会丢失（比如如下两条语句：var carname="volvo"; var carname; 执行完以后carname的值仍然是"volvo"）

运算符

好像没什么特别的= =。

像java一样，字符串可以直接相加；字符串和数字相加，结果会变成字符串：document.write("5"+5); 结果是55
比较运算符：不等于：!= 全等：===（这个表示值和类型都完全相同）
条件运算符：greeting = (visitor == 'PRES') ? 'Dear President' : 'Dear'; //如果visitor=='PRES'成立，则将‘Dear President’赋给greeting

基本结构语句

条件分支

if...else ——没什么特别的。

switch ——JS里面的switch和C一样的，只有定义变量的时候用的是var v，switch(v)，但是在C里面switch里面只能是整形的

大概的结构：switch(var) {case 1: ... break; case2: ... break; default: ...}

循环

也是while/do-while/for三种循环

break： 跳出循环，离开，剩下的几轮全不做了

continue：这个循环体剩下的语句不做了，做下一轮

数组

var cars = new Array();

cars[0] = 'Audi';

cars[1] = 'BMW';

cars[2] = 'Volvo';

或

var cars = new Array('Audi', 'BMW', 'Volvo');

或

var cars = ['Audi', 'BMW', 'Volvo'];

函数

举个栗子：

<html>

<head>

<script>

function myFunction(){

alert('hello world!');

}

</script>

</head>

<body>

<button onclick = "myFunction">点击这里</button>

</body>

</html>

//在点击写有“点击这里”的button时，触发muFunction函数，弹出警告框

带参函数+带返回值的函数

function f(i, j){

return i*j ;

}

document.getElementById('demo').innerHTML = myFunction(4, 3);

//将id为demo中的HTML内容更改为myFunction(4, 3)的执行结果。4,3为传入的参数。

-局部变量在函数运行以后被删除；全局变量在页面关闭以后被删除

-如果把值赋给未声明的变量，这个变量将被自动作为全局变量，比如：carname = 'volvo'; //没有用var carname; 语句声明过变量

异常

try-catch

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");//写错了，应该是alert，产生一个err异常
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" οnclick="message()">
</body>

</html>

try-throw-catch

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";//按情况抛出不同的异常
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");//在网页末端的mess段落中显示错误信息
  y.innerHTML="Error: " + err + ".";//输出错误类型err
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">Test Input</button>
<p id="mess"></p>//用于输出错误信息的段落

罗大宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（一）基本概念及语法

认识JSPJavaScript用来干什么？是浏览器中运行的脚本（用户交互，数据处理）JAVA需要编译，而JSP是解释性语言，源码掺在HTML里面，和HTML【一起从服务器端下载下来】浏览器会在读取代码的时候，逐行执行脚本语言；而传统的编程语言，会在执行前对所有代码进行编译怎么在HTML中加入JS？在标签里面加入on..时候的动作，比如onload="aler
复制链接

扫一扫